标签：领跑 行内 标签 元素 Day002Html 计划 HTML5 上下文 属性

文章目录

• Day002Html
• • 1.超链接
  • • 1-1.a标签简介
    • 1-2.a标签常用属性
    • 1-3.锚链接
  • 2.路径的写法：（站内资源和站外资源）
  • • 2-1.绝对路径（站内）
    • 2-2.相对路径（站内）
    • 2-3.url地址（站外或站内）
    • 2-4.http和https区别
  • 3.行元素和块元素的区别
  • • 3-1.常见的块元素：
    • 3-2.常见的行元素：
    • 3-3.行元素与块元素的相互转换
    • 3-4.特殊的行内元素
  • 4.列表
  • • 4-1.有序列表
    • 4-2.无序列表

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标签常用属性

• hreflang
  • 该属性用于指定链接文档的人类语言。其仅提供建议，并没有内置的功能。hreflang 允许的值取决于HTML5
• ping
  • 包含一个以空格分隔的url列表，当跟随超链接时，将由浏览器(在后台)发送带有正文 PING 的 POST 请求。通常用于跟踪。
• referrerpolicy
  • 表明在获取URL时发送哪个提交者（referrer）
    • "no-referrer" 表示 Referer: 头将不会被发送。
    • "no-referrer-when-downgrade" 表示当从使用HTTPS的页面导航到不使用 TLS(HTTPS)的来源 时不会发送 Referer: 头。如果没有指定策略，这将是用户代理的默认行为。
    • "origin" 表示 referrer将会是页面的来源，大致为这样的组合：主机和端口（不包含具体的路径和参数的信息）。
    • “origin-when-cross-origin” 表示导航到其它源将会限制为这种组合：主机 + 端口，而导航到相同的源将会只包含 referrer的路径。
    • 'strict-origin-when-cross-origin'
    • "unsafe-url" 表示 referrer将会包含源和路径（domain + path）（但是不包含密码或用户名的片段）。这种情况是不安全的，因为它可能会将安全的URLs数据泄露给不安全的源。
• rel
  • 该属性指定了目标对象到链接对象的关系。该值是空格分隔的列表类型值。
• target
  • 该属性指定在何处显示链接的资源。 取值为标签（tab），窗口（window），或框架（iframe）等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义:
    • _self: 当前页面加载，即当前的响应到同一HTML 4 frame（或HTML5浏览上下文）。此值是默认的，如果没有指定属性的话。
    • _blank: 新窗口打开，即到一个新的未命名的HTML4窗口或HTML5浏览器上下文
    • _parent: 加载响应到当前框架的HTML4父框架或当前的HTML5浏览上下文的父浏览上下文。如果没有parent框架或者浏览上下文，此选项的行为方式与 _self 相同。
    • _top: IHTML4中：加载的响应成完整的，原来的窗口，取消所有其它frame。 HTML5中：加载响应进入顶层浏览上下文（即，浏览上下文，它是当前的一个的祖先，并且没有parent）。如果没有parent框架或者浏览上下文，此选项的行为方式相同_self
• title
  • 鼠标悬浮显示的文字

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、height	padding、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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。