领跑计划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标签常用属性
- 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数据泄露给不安全的源。
- 表明在获取URL时发送哪个提交者(referrer)
- 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
- 该属性指定在何处显示链接的资源。 取值为标签(tab),窗口(window),或框架(iframe)等浏览上下文的名称或其他关键词。以下关键字具有特殊的意义:
- 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