其他分享
首页 > 其他分享> > 领跑计划Day002Html

领跑计划Day002Html

作者:互联网

文章目录

Day002Html

1.超链接

1-1.a标签简介

HTML <a> 元素(或称锚元素)可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。<a> 中的内容应该应该指明链接的意图。如果存在 href 属性,当 <a> 元素聚焦时按下回车键就会激活它。

<p>You can reach Michael at:</p>

<ul>
  <!--外部链接-->
  <li><a href="https://example.com">Website</a></li>
  <!--发送邮件-->
  <li><a href="mailto:m.bluth@example.com">Email</a></li>
  <!--电话-->
  <li><a href="tel:+123456789">Phone</a></li>
  <!--QQ推广-->
  <li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=546174468&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:546174468:52" alt="点击这里给我发消息" title="点击这里给我发消息"/></a></li>
</ul>

1-2.a标签常用属性

1-3.锚链接

<!--使用id跳转到当前页面的content位置-->
<p id="content"></p>
<a href="#content">回到顶部</a>
<!--使用name跳转到当前页面的content-->
<p id="content"></p>
<a href="#content">回到顶部</a>
<!--使用id或者name 跳转到其他页面的content-->
<p id="content"></p>
<a href="index.html#content">回到顶部</a>
<!--注:html5中name属性已弃用-->

2.路径的写法:(站内资源和站外资源)

2-1.绝对路径(站内)

文件在电脑中的绝对位置

/Users/baize/Desktop/Wechat.jpg

D:\user\baize\desktop\wechat.jpg

https://www.duqianedu.com

2-2.相对路径(站内)

文件相对于当前文件所在的位置

./day001.html

…/day001.html

day001.html

2-3.url地址(站外或站内)

协议名://主机名:端口号:路径

schema://host:port:path

主机名:域名、IP地址

协议名: http https file chrome

端口号:http 80 https 443

域名解析:

A解析

CNAME解析

MX解析

泛域名解析

2-4.http和https区别

是一种透过计算机网络进行安全通信的传输协议。HTTPS 经由 HTTP 进行通信,但利用 SSL/TLS 来加密数据包。

3.行元素和块元素的区别

是否独占一行width、heightpadding、margin默认宽高
块级元素有效有效撑满父容器
行内元素无效padding有效、margin水平有效随内部元素的内容
行内块级元素有效有效随内部元素的内容

3-1.常见的块元素:

div , h1—h6 , p , ul , ol , dl , table , form

div - 常用块级元素,也是css layout的主要标签* h1—h6 标题* p - 段落* ul - 非排序列表* ol - 排序表单* dl - 定义列表* table - 表格* form - 交互表单* hr - 水平分隔线* pre - 格式化文本* address - 地址 * blockquote - 块引用* header - HTML5区段头或页头。* footer - HTML5区段尾或页尾。* section - HTML5一个页面区段。* article - HTML5文章内容。* aside - HTML5伴随内容。* hgroup - HTML5标题组。* menu - HTML5菜单列表* figcaption - HTML5图文信息组标题* figure -HTML5图文信息组 * audio - HTML5音频播放* video - HTML5视频* output - HTML5表单输出

3-2.常见的行元素:

在这里插入图片描述

* span - 常用内联容器,定义文本内区块* a - 锚点* strong - 粗体强调* b - 粗体* em - 强调* i - 斜体* small - 小字体文本* big - 大字体* sub - 下标* sup - 上标* label - 表格标签

* img - 图片* input - 输入框* select - 项目选择* textarea - 多行文本输入框* abbr - 缩写* code - 计算机代码(在引用源码的时候需要)* acronym - 首字* bdo - bidi override* br - 换行* cite - 引用* dfn - 定义字段* font - 字体设定(不推荐)* kbd - 定义键盘文本* q - 短引用* s - 中划线(不推荐)* samp - 定义范例计算机代码* strike - 中划线* tt - 电传文本* u - 下划线* var - 定义变量

3-3.行元素与块元素的相互转换

行内元素和块级元素都不是绝对的,可以相互转换,,通常有这些方式可以转换。

1、display,将元素设置为块级、行内或是其它。display:inline-block;[inline;][block;]

2、float,隐形地把内联元素转换为行内块级元素。不会占据一行,相当于display:inline-block;

3、position,属性值为absolute、fixed 时,隐形地把内联元素转换为块级元素,其它属性值不会做转换。

3-4.特殊的行内元素

<img>、<input>、<textarea>、<select>、<object>是行内元素,但是它们却可以设置宽高,这是为什么呢?因为它们是行内置换元素。

置换元素:内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。浏览器根据元素的标签和属性,来决定元素的具体显示内容。 例如:浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看html代码,则看不到图片的实际内容;<input>标签的type属性来决定是显示输入框,还是单选按钮等。

置换元素在其显示中生成了框,这也就是有的内联元素能够设置宽高的原因。

4.列表

4-1.有序列表

    <!-- 
        有序列表
        type:序号的类型 A a I i
        resveresed 是否倒序 添加后即是倒序
        start 开始于第几个元素
     -->
<ol>
        <li>
            demo
            <ol type="I">
                <li>demo001</li>
                <li>demo002</li>
                <li>demo003</li>
            </ol>
        </li>
        <li>
            work
            <ol type="A">
                <li>work001</li>
                <li>work002</li>
                <li>work003</li>
            </ol>
        </li>
        <li>
            test
            <ol type="a" reversed=>
                <li>test001</li>
                <li>test002</li>
                <li>test003</li>
            </ol>
        </li>
</ol>

4-2.无序列表

<ul>
        <li>
            demo
          <!--
						type
						空心圆
						circle
						实心圆
						disc
						实心方块
						square
					-->
            <ul type="circle">
                <li>demo001</li>
                <li>demo002</li>
                <li>demo003</li>
            </ul>
        </li>
        <li>
            work
            <ul type="disc">
                <li>work001</li>
                <li>work002</li>
                <li>work003</li>
            </ul>
        </li>
        <li>
            test
            <ul type="square">
                <li>test001</li>
                <li>test002</li>
                <li>test003</li>
            </ul>
        </li>
</ul>

标签:领跑,行内,标签,元素,Day002Html,计划,HTML5,上下文,属性
来源: https://blog.csdn.net/weixin_45297286/article/details/121140566