一、摘抄
h1:标题标签 p:段落标签 br:换行标签 hr:水平线标签
b/strong:加粗 u/ins:下划线 i/em:倾斜 s/del:删除线
img:图片标签 audio:音频标签 video:视频标签 a:链接标签
ul:无序列表 ol:有序列表 dl:自定义列表 table:表格标签
caption:表格大标题 div:块级标签 span:行内标签 form:朝xx提交数据
input:文本框标签 button:提交按钮 select:下拉菜单标签 textarea:文本域
label:绑定关系
二、基本标签
1.认识网页
网页由那些部分组成?
文字、图片、音频、视频、超链接。
前端的代码是通过什么软件转换成用户眼中的页面的?
通过浏览器转换(解析和渲染)成用户看到的网页。
2.五大浏览器
浏览器:是网页显示、运行的平台,是前端开发必备利器。
常见的五大浏览器:IE浏览器、火狐浏览器(Firefox)、谷歌浏览器(Chrome)、Safari浏览器、欧朋浏览器(Opera)。
3.渲染引擎
渲染引擎(浏览器内核):浏览器中专门对代码进行解析渲染的部分。
注意点:渲染引擎不同,导致解析相同代码时的速度、性能、效果也不同的。
浏览器出品公司不同,内在的渲染引擎也是不同的:
浏览器 内核 备注 IE Trident IE、猎豹安全、360极速浏览器、百度浏览器 FireFox Gecko 火狐浏览器内核 Safari Webkit 苹果浏览器内核 Chrome/Opera Blink Blink其实是Webkit的分支
4.Web标准
Web标准:让不同的浏览器按照相同的标准显示结果,让展示的效果统一。
Web标准中分成三个构成:
构成 语言 说明 结构 HTML 页面元素和内容 表现 CSS 网页元素的外观和位置等页面样式(如:颜色、大小等) 行为 JavaScript 网页模型的定义与页面交互
5.HTML的概念
HTML(Hyper Text Markup Language)中文译为:超文本标记语言。
专门用于网页开发的语言,主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。
6.HTML语法规范
注释:<!--注释-->
注释的作用:
为代码添加的具有解释性、描述性的信息,主要用来帮助开发人员理解代码。
浏览器执行代码时会忽略所有的注释。
HTML标签的结构:
1.标签由<、>、/、英文单词或字母组成,并且把标签中<>包括起来的英文单词或字母为标签名。
2.常见标签由两部分组成,我们称之为:双标签。前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容。
3.少数标签由一部分组成,我们称之为:单标签。自成一体,无法包裹内容。
三、HTML标签
1.标题标签
场景:在新闻和文章的页面中,都离不开标题,用来突出显示文章主题。
代码:h系列标签。
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
语义:1~6级标题,重要程度依次递减
特点:
- 文字都有加粗
- 文字都有变大,并且从h1-->h6文字逐渐减小
- 独占一行
2.段落标签
场景:在新闻和文章的页面中,用于分段显示。
代码:<p>段落标签</p>
语义:段落
特点:段落之间存在间隙,独占一行。
3.换行标签
场景:让文字强制换行显示。
代码:<br>
语义:换行
特点:单标签,让文字强制换行。
4.水平线标签
场景:分割不同主题内容的水平线。
代码:<hr>
语义:主题的分割转换
特点:单标签,在页面中显示一条水平线。
5.文本格式化标签
场景:需要让文字加粗、下划线、倾斜、
删除线等效果。语义:突出重要性的强调语境
代码:
标签 说明 标签 b 加粗 strong u 下划线 ins i 倾斜 em s 删除线 del
6.图片标签
场景:在网页中显示图片。
代码:<img src="" alt="">
特点:单标签,img标签需要展示对应的效果,需要借助标签的属性进行设置。
属性注意点:
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间可以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
属性名:src
属性值:目标图片的路径
注意点:当前网页和目标图片在同一个文件夹中,路径直接写目标图片的名字即可。
属性名:alt
属性值:替换文本
当图片加载失败时,才显示alt的文本。
当图片加载成功时,不会显示alt的文本。
属性名:title
属性值:提示文本
当鼠标悬停时,才显示的文本。
注意点:title属性不仅仅可以用于图片标签,还可以用于其他标签。
属性名:width和height
属性值:宽度和高度(数字)
注意点:
如果只设置width或height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形)。
如果同时设置了width和height两个,若设置不当此时图片可能会变形。
7.绝对路径与相对路径
绝对路径:指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径。
例如:
盘符开头:D\day01\images\1.jpg
完整的网络地址:https://tupian.qqw21.com/logo.jpg
相对路径:从当前文件开始出发找目标文件的过程。
同级目录:当前文件和目标文件在同一目录中。
代码步骤:
方法一:<img src="目标图片.jpg">
方法二:<img src="./目标图片.jpg">
下级目录:目录文件在下级目录中。
代码步骤:<img src="images/目标图片.jpg">
上级目录:目标文件在上级目录中。
代码步骤:<img src="../目标图片.jpg">
8.音频标签
场景:在页面中插入音频。
代码:<audio src="./music.mp3" controls></audio>
注意点:音频标签目前支持三种格式:mp3、wav、ogg。
常见属性:
属性名 功能 src 音频的路径 controls 显示播放的控件 autoplay 自动播放(部分浏览器不支持) loop 循环播放
9.视频标签
场景:在页面中插入视频。
代码:<video src="./video.mp4" controls></video>
注意点:视频标签目前支持三种格式:mp4、webm、ogg。
常见属性:
属性名 功能 src 视频的路径 controls 显示播放的控件 autoplay 自动播放(谷歌浏览器中配合muted实现静音播放) loop 循环播放
10.链接标签
场景:点击之后,从一个页面转跳到另一个页面
代码:<a href="./目标网页.html">超链接</a>。
特点:
双标签,内部可以包裹内容。
如果需要a 标签点击之后去指定页面,需要设置a标签的href属性
属性名:target
属性值:目标网页的打开形式。
_self:默认值,在当前窗口中跳转(覆盖原网页)。
_blank:在新窗口中跳转(保留原网页)。
<a href="https://www.baidu.com" target="_blank">百度</a>
11.列表标签
场景:在网页中按照行展示关联性的内容,如:新闻列表、排行榜、账单等。
特点:按照行的方式,整齐显示内容。
种类:无序列表、有序列表、自定义列表。
无序列表:
场景:在网页中表示一组无顺序之分的列表,如:新闻列表。
标签组成:
ul:表示无序列表的整体,用于包裹li标签。
li:表示无序列表的每一项,用于包含一行的内容。
显示特点:列表的每一行前默认显示圆点标识。
注意点:ul标签中只允许包含li标签,li标签可以包含任意内容。
代码演示:
<ul>
<li>千岁忧</li>
<li>张三</li>
<li>李四</li>
</ul>
有序列表:
场景:在网页中表示一组有顺序之分的列表,如:排行榜。
标签组成:
ol:表示有序列表的整体,用于包裹li标签。
li:表示有序列表的每一项,用于包含每一行的内容。
显示特点:列表的每一项前默认显示序号标识。
注意点:ol标签中允许包含li标签,li标签可以包含任意内容。
代码演示:
<ol>
<li>春江潮水连海平,海上明月共潮生。</li>
<li>滟滟随波千万里,何处春江无月明.</li>
<li>昨夜闲潭梦落花,可怜春半不还家。</li>
</ol>
自定义列表:
场景:在网页的底部导航中通常会使用自定义列表实现。
标签组成:
dl:表示自定义列表的整体,用于包裹dt/dd标签。
dt:表示自定义列表的主题。
dd:表示自定义列表的针对主题的每一项内容。
显示特点:dd前会默认显示缩进效果。
注意点:dl标签中只允许包含dt/dd标签,dt/dd标签可以包含任意内容。
代码演示:
<dl>
<dt>将进酒</dt>
<dd>君不见,黄河之水天上来,奔流到海不复回。</dd>
<dd>君不见,高堂明镜悲白发,朝如青丝暮成雪。</dd>
<dt>满江红</dt>
<dd>怒发冲冠,凭栏处、潇潇雨歇。</dd>
<dd>抬望眼,仰天长啸,壮怀激烈。</dd>
</dl>
12.表格标签
场景:在网页中以行+列的单元格的方式整齐展示和数据,如:用户表。
基本标签:
table:表格整体,可用于包裹多个tr。
tr:表格每行,可用于包裹td。
td:表格单元格,可用于包裹内容。
注意点:标签的嵌套关系:table > tr > td。
常见相关属性:
属性名 属性值 效果 border 数字 边框宽度 width 数字 表格宽度 height 数字 表格高度
表格标题和表头单元格标签:
场景:在表格中表示整体大标题和一列小标题。
其他标签:
caption:表格大标题,表示表格整体大标题,默认在表格整体顶部剧中位置显示。
th:表头单元格,表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示。
注意点:caption标签书写在table标签内部,th标签书写在tr标签内部(用于替换td标签)。
表格的结构标签:
场景:让表格的内容结构分组,突出表格的不同部分(头部、主体、底部),使语义更加清晰。
结构标签:
thead:表格头部。
tbody:表格主体。
tfoot:表格底部。
注意点:表格结构标签内部用于包裹tr标签,表格的结构标签可以省略。
合并单元格:
rowspan:跨行合并,将多行的单元格垂直合并。
colspan:跨列合并,将多列的单元格水平合并。
代码演示:
<table border="1">
<tr>
<th colspan="3">用户表</th>
</tr>
<tr>
<th>ID</th>
<th>username</th>
<th>password</th>
</tr>
<tr>
<td>1</td>
<td>千岁忧</td>
<td>123456</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>abc123</td>
</tr>
</table>
三、表单标签
1.input系列标签
场景:在网页中显示收集用户的表单效果,如:登录页、注册页。
标签:input标签可以通过type属性值的不同,展示不同效果。
type属性值:
type属性值 说明 text 文本框,用于输入单行文本
password 密码框,用于输入密码 radio 单选框,用于多选一 checkbox 多选框,用于多选多 file 文件选择,用于之后上传文件 submit 提交按钮,用于提交 reset 重置按钮,用于重置 button 普通按钮,默认无功能,之后配合js添加功能
常用属性:
placeholder:占位符,提示用户输入内容。
name:分组,有相同name属性的单选框为一组,一组中同时只能有一个被选中。
value:默认内容。
checked:默认选中。
multiple:多文件选择。
<h3>代码演示</h3>
<form action="">
<p><label>账号:<input type="text" placeholder="请输入账号"></label></p>
<p><label for="d1">密码:</label><input type="password" placeholder="请输入密码" id="d1"></p>
<p>性别:
<input type="radio" name="性别" checked>男
<input type="radio" name="性别">女
</p>
<p>爱好:
<input type="checkbox">书法
<input type="checkbox">弹琴
<input type="checkbox">下棋
</p>
<p>文件上传:<input type="file" multiple></p>
<p>省:
<select name="" id="">
<option value="">魔都</option>
<option value="">燕京</option>
<option value="">长安</option>
</select>
</p>
<p>个人简介:<br>
<textarea name="" cols="30" rows="10"></textarea>
</p>
<input type="submit">
<input type="reset">
<input type="button" value="普通按钮">
</form>
2.button按钮标签
场景:在网页中显示用户点击的按钮
标签名:button
注意点:谷歌浏览器中button默认是提交按钮,button标签是双标签,更便于包裹其他内容:文字、图片等。
type属性值(同input的按钮系列):
标签名 type属性值 说明 button submit 提交按钮,点击之后提交数据给后端服务器 button reset 重置按钮,点击之后恢复表单默认值 button button 普通按钮,默认无功能,之后配合js添加功能
3.select下拉菜单标签
场景:在网页中提供多个选择项的下拉菜单控件。
标签组成:
select标签:下拉菜单的整体。
option标签:下拉菜单的每一项。
常见属性:selected,下拉菜单的默认选中。
4.textarea文本域标签
场景:在网页中提供可输入多行文本的表单控件。
标签名:textarea
常见属性:
cols:规定了文本域内可见宽度。
rows:规定了文本域内可见行数。
注意点:右下角可以拖拽改变大小,实际开发时针对于样式效果推荐用CSS设置。
5.label标签
场景:常用于绑定内容与表单标签的关系。
标签名:label
使用方法1:
- 使用label标签把内容(如:文本)包裹起来。
- 在表单标签上添加id属性。
- 在label标签的for属性中设置对应的id属性值。
使用方法2:
- 直接使用label标签把内容(如:文本)和表单标签一起包裹起来。
- 需要把label标签的for属性删除即可。
6.语义化标签
场景:在HTML5新版本中,推出了一些有语义的布局标签仅供开发者使用。
注意点:标签显示特点和div一致,但是比div多了不同的语义。
标签:
标签名 语义 header 网页头部 nav 网页导航 footer 网页底部 aside 网页侧边栏 section 网页区块 article 网页文章
7.特殊字符
场景:在网页中展示特殊符号效果时,需要使用字符实体替代。
结构:&英文;
常见字符实体:
显示结果 描述 实体名称 空格 < 小于号 < > 大于号 > & 和号 & " 引号 " ' 撇号 '(IE不支持) ¢ 分(cent) ¢ £ 镑(pound) £ ¥ 元(yen) ¥ € 欧元(euro) € § 小节 § © 版权(copyright) ©