领跑计划Day002Html

Posted 2021-12-05 师兄白泽

文章目录

• 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:[e-mail]">Email</a></li>
  <!--电话-->
  <li><a href="tel:[phone]">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>