1、html列表
1.1 无序列表
没有序列的一组内容。
(1)语法
<ul> <li>苹果</li> <li>香蕉</li> ... </ul>
(2)语义
无序列表,用于将没有数字顺序的一组数据或内容进行分组。
(3)默认样式(演示)
-
默认间距(外边距、内边距)
-
列表样式:实心圆
(4)典型应用
-
新闻列表
-
产品列表
-
导航、分页、选项止
(5)type属性
-
disc列表样式实心圆
-
circle 列表样式空心圆
-
square列表样式为小方块
<ul type="square"> <li>苹果</li> <li>香蕉</li> </ul>
注意:type属性不常用,通常使用css属性替代。
1.2 有序列表
(1)语法
<ol> <li>出门</li> <li>右转</li> ... </ul>
(2)语义
无序列表,用于将顺序是有意义的一组数据或内容进行分组
(3)默认样式(演示)
-
默认间距
-
列表样式:数字编号
(4)典型应用 (图示)
-
烹饪食谱中的各个步骤
-
指路时的各处转弯方向
-
营养信息标签上 按含量排序的成分列表
-
面包屑导航
(5)type属性(了解)
-
a
: 小写字母 -
A
: 大写字母 -
i
: 小写罗马数字 -
I
: 大写罗马数字 -
1
: 数字<ol type="I"> <li>步骤一</li> <li>步骤二</li> </ol>
注意:type属性不常用,通常使用css属性替代。
1.3 定义列表
(1)语法
<dl> <dt>定义</dt> <dd>描述 </dd> ... </dl>
(2)语义
-
包含术语定义以及描述的列表
-
dl自定义列表、dt 自定义列表项、dd自定义列表项的注释(描述)
-
用于将一组项目及其相关的描述进行分组
(3)默认样式
-
默认dl,dd带有间距
(4)典型应用
-
名词解释、分类(大分类-细节的类别)
-
键-值对列表 (内存:100M)
注意:
允许使用多条项目定义与描述。
<dl> <dt>姓名</dt> <dd>李美丽</dd> <dt>生日</dt> <dd>1990</dd> </dl>
允许使用带有多个描述的单个项目定义。
<dl> <dt>加入我们</dt> <dd>社会招聘</dd> <dd>校园招聘</dd> <dd>国际招聘</dd> </dl>
2、行级标签
2.1 图像
图像是网页的主要内容之一,在HTML标签中,img标签用于定义HTML页面中的图像。
(1)语法
<img src="" alt="" width="" height="">
(2)标签属性
-
src属性
-
作用:用于指定图像文件的路径和文件名
-
注意:是<img>标签的必须属性
-
代码演示
-
-
alt属性
-
作用:指定替换文本,默认不显示,当图像不能正常显示时,显示该文字对图像进行替换,有利于用户体验
-
代码演示
-
-
width/height属性
-
作用:指定图片宽度/高度
-
注意:值可以不带单位默认px,只指定宽或高属性其中一个,另一个按照原比例等比缩放
-
代码演示
-
(3)默认样式
-
多张图片可以交列在一行显示
-
默认产生下间隙
(4)典型应用
作为内容展示的图像:产品图、广告图、详情页、文章页中插图。
(5)图像路径
页面中的图片会非常的多,通常我们会新建一个文件夹来存放这些图像文件images,这时候再查找图像,就需要通过路径的来描述图像文件的位置。 路径可以分成,相对路径和绝对路径。
相对路径
概述:相对路径是指由这个文件所在位置为参考基础,而建立出的目录关系,常用的相对路径包括当前目录,上一级目录,下一级目录。
-
当前目录
-
语法
一个点(.)后面跟一个斜杠表示当前目录也就是当前文件所在目录。
<img src="pic.png" alt=""> <img src="./pic.png" alt=""> <!-- ./ 可以省略 -->
-
-
上一级目录
-
语法
两个点(.)后跟一个斜杠表示前文件所在目录的上一级目录。
<img src="../pic2.png" alt="">
-
-
下一级目录
-
语法
一个斜杠,表示图像文件位于HTML文件下一级。
<img src="images/pic3.png" alt="">
-
绝对路径
绝对路径文件在目录中的绝对位置完整描述,常见的绝对路径一种由其在网络上的绝对位置定义的位置,一种是本地从盘符出发的绝对位置。
-
网络绝对位置
-
语法
-
-
本地绝对位置
-
语法
D盘下webset文件夹下的image文件夹中的logo.png描述为:
D:\webset\images\logo.jpg
特点:绝对URL始终指向同一位置,无论在何处使用
注意:在链接到同一网站内的其他位置时,应尽可能使用相对链接。链接到另一个网站时,需要使用绝对链接。
-
2.2 超链接
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像。将文档链接到其他文档或资源,链接到文档的特定部分。
(1)语法
<a href="">文字或图片</a>
(2)语义
超链接
(3)默认样式
-
不独占一行
-
默认当前窗口打开
-
默认带有下划线、文字颜色
(4)超链接属性
-
href属性
-
作用:指定链接跳转的地址
<a href="http://www.jd.com">京东商城(文字链接)</a> <a href="4.例-导航.html" target="_blank"><img src="pic.png" alt="">(图片链接)</a>
-
-
target属性
-
作用:指定目标地址的打开方式
-
取值
-
_blank
新窗口打开 -
_self
当前窗口打开(默认值 )
<a href="http://www.jd.com" target="_blank"><img src="pic.png" alt=""></a>
-
-
-
title属性
-
作用:定义提示文本,将鼠标悬停在链接上会显示标题作为工具提示
-
(5)链接的类型
-
空链接
-
描述:如果当时没有确定链接的目标时使用空链
<a href="#">商品</a>
-
-
外部链接
-
描述:链接到站外其他 网站的链接 (绝对地址)
<a href="https://www.baidu.com"> 百度 </a>
-
-
内部链接 (相对地址)
-
描述:网站内部页面之间的相互链接。直接链接内部页面的名称
<a href="index.html">首页</a>
-
-
下载链接
-
描述:如果href里面的地址是一个文件或压缩包,会下载这个文件。
-
代码演示
<a href="1.txt">下载文本文件</a>
(6)锚点链接
描述:当我们点击锚点链接时,可以快速定位到页面中的某个位置。
-
跳转至当前页面指定位置的锚点
-
语法:
定义目标:<p id="box"></p> 定义跳转:<a href="#box"></a>
-
-
跳转至其它页面的锚点
-
语法:
定义目标:a.html页面的 <div id="box"></div> 定义跳转:<a href="a.html#test"></a>
-
总结:重点掌握内部链接,外部链接,锚点链接。
效果参考:腾讯公司 - Tencent 腾讯 腾讯企业站
文本格式化标签
概述:在日常用语中,我们常常会加重某个字的读音,或者用加粗等方式突出某句话的重点。
与此类似,HTML 也提供了相应的标签,用于标记某些文本,使其具有加粗、倾斜、删除划线等效果。
em标签
(1)语法
<em></em>
(2)语义
强调,用于标记强调内容。
(3)默认样式
-
斜体显示
-
不独占一行
strong 标签
(1)作用
标记重要强调的内容。
为了强调重要的词,在口语方面我们往往用重音强调,在文字方面则是用粗体字来达到强调的效果。
(2)语法
<strong></strong>
(3)语义
着重强调
(4)默认样式
-
不独占一行
-
加粗显示
del标签
(1)作用
被从文档中删除的文字内容
(2)语法
<del></del>
(3)语义
删除的内容
(4)默认样式
-
带有中划线
-
不独占一行
(5)应用
-
价格中的原价
-
待办事项中已完成的项
I标签
(1)作用
区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等
(2)语法
<i></i>
(3)语义
无
(4)默认样式
-
斜体显示
-
不独占一行
b标签
(1)作用
定义粗体文本,用于吸引读者的注意到该元素的内容上。
(2)语法
<b></b>
(3)语义
没有语义
(4)默认样式
-
加粗
-
不独占一行
span标签
(1)作用
作为行内容器包含短语内容,通常用来区分文本样式。
(2)语法
<span></span>
(3)语义
无
(4)默认样式:无
-
2.3 换行
常常我们在需要手动换行地方,加入换行标签 ,即可实现内容强制换行。
(1)语法
<br />
注意:
-
不应该只为了实现加粗、斜体效果使用strong,em,可以使用css替代
-
br用于处理文本内容换行,不应用于控制元素间距
3、HTML 字符实体
概述:HTML中有些字符是保留的。例如,不能直接在文本中输入大于号(>)或小于号(<),因为浏览器会误以为它们是标记。 希望浏览器如实显示这些字符,那么我们必须在HTML源代码中插入字符实体。
3.1 常用的实体字符
-
注意:实体名称对大小写敏感!
完整实体字符参考手册
具体所需可在使用时查询,无需记忆。
4、HTML语义化(谈谈你对HTML语义化理解-从以下两方面阐述)
4.1 什么是语义化
语义化是指用合理的HTML标记以及其特有的属性去格式化文档内容。(例如标题用 h1-h6、段落用 p 标签,合理得给图片添加alt属性等)
4.2 语义化的好处(为什么要语义化)
-
在没有 CSS 的情况下,页面也能呈现出很好地内容结构。
-
使代码更具【可读性】,便于团队开发和维护。
-
有利于SEO搜索引擎优化(和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重)。
-
有利于【用户体验】(例如:title、label 标签、alt属性的灵活运用)