<!DOCTYPE html>
<!DOCTYPE> 文档类型声明，只能写在开头，作用就是告诉浏览器使用哪种HTML版本来显示网页。
<html lang="en">
用来定义当前文档显示的语言。
1. en定义语言为英语
2. zh-CN定义语言为中文
3、fr定义语言为法语
<head>
<meta charset="UTF-8">
通过<meta>标签的charset属性，不定义会乱码
charset常用的值有:GB2312、BlG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符
<title>浏览器标题</title>
</head>
<body>
1.排版标签
h 标题标签
p 段落标签
单标签
br 换行标签
hr 水平标签
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
<!--段落标签-->
<p>我是段落文字</p>
<h1>标题</h1>
<p>段落<br>换行</p>
<hr>水平分割线
<p>段落之间存在缝隙</p>
<p>段落之间存在缝隙</p>2.文件格式化标签
<!--b strong 加粗-->
<b>加粗</b><strong>加粗</strong>
<!--u ins 下划线-->
<u>下划线</u><ins>下划线</ins>
<!--i em 倾斜-->
<i>倾斜</i><em>倾斜</em>
<!--s del 删除线-->
<s>删除线</s><del>删除线</del>3.图片标签
<img 属性名="属性值" 属性名="属性值" 属性名="属性值" ...>
src 目标图片的路径 当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可(包括后缀名)
若在网页下级文件夹中：文件夹名/图片名
若在网页上级文件夹中： ../文件夹名/图片名 (一个../就返回一次上级文件夹)
<img src="2.jpg" height="200"width="300">
<!--相对路径（常用）不会暴露电脑资料也更简洁-->
<img src="D:\xx\Java2\idea2020.1.1\html\2.jpg" height="200">
<!--绝对路径：盘符开始或者完整的网络地址-->alt 替换文本 当图片加载失败时，才显示alt的文本当图片加载成功时，不会显示alt的文本
title 提示文本 鼠标悬停的时候显示文本
width 宽度
height 高度
<!--width和 height属性只需要给出一个值,另一个等比例缩放，所以一般只写一个，这样图片不会变形-->
<img src="./错的路劲图片会加载失败" alt="图片错误替换文本"
title="这是title文字鼠标悬停的时候显示" width="200"><!--属性注意点:
1.标签的属性写在开始标签内部
2.标签上可以同时存在多个属性
3.属性之间以空格隔开
4.标签名与属性之间必须以空格隔开
5.属性之间没有顺序之分-->
3、音频标签
<audio 属性名="属性值" 属性名="属性值" 属性名="属性值" ...></audio>
src 音频的路径
controls 显示播放的控件
autoplay 自动播放（部分浏览器不支持）
loop 循环播放
<audio src="../html/2.mp3" controls autoplay loop></audio>
4.视频标签
<video 属性名="属性值" 属性名="属性值" 属性名="属性值" ...></video>
src 视频的路径
controls 显示播放的控件
autoplay 自动播放（谷歌浏览器中需配合muted实现静音播放）
loop 循环播放
<video src="../html/2.mp4" controls autoplay loop muted></video>
5、链接标签
<a 属性名="属性值" 属性名="属性值" 属性名="属性值" ...></a>
href 跳转地址
target 目标网页的打开形式
取值：_self 默认当前窗口跳转（覆盖原网页）
_blank 新窗口中跳转（不覆盖原网页）
<a href="http://www.baidu.com" target="_blank " alt="百度" title="百度">跳转到百度</a>
<a href="#">空链接，不跳转</a>
<!--双标签，内部可以包裹内容-->
<!--如果需要a标签点击之后去指定页面，需要设置a标签的href属性-->6、特殊字符
空格符
< 小于号 <
> 大于号 >
& 和号 &
￥ 人民币 ¥
c 版权 ©
R 注册商标 ®
° 摄氏度 °
± 正负号 ±
✖ 乘号 ×
➗ 除号 ÷
² 平方2(上标2) ²
³ 立方3(上标3) ³
< p ≶ 是一个段落标签
7、表格标签
<table> 是用于定义表格的标签
<thead>标签表格的头部区域</thead>
<tr> 标签用于定义表格中的行，必须嵌套在<table> </table>标签中
<th>表头单元格标签（加粗）</th> 标签表示HTML表格的表头部分(table head的缩写)
表头单元格也是单元格,常用于表格第一行,突出重要性,表头单元格里面的文字会加粗居中显
...
</tr>
<tbody> 标签表格的主体区域
<tr>
<td>单元格内的文字</td>
用于定义表格中的单元格，必须嵌套在<tr> </tr>标签中,
字母td指表格数据(table data)，即数据单元格的内容
...
</tr>
</tbody>
</table>这些属性都得写到table标签里面去
属性名 属性值 描述
align left、center、right 规定表格相对周围元素的对齐方式
border 1或"" 规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素
cellspacing 像素值 规定单元格之间的空白，默认2像素
width 像素值或百分比 规定表格的宽度
合并单元格方式（写在td标签属性上）:
跨行合并(上下合并）:rowspan="合并单元格的个数"
跨列合并（左右合并）:colspan="合并单元格的个数"
8、列表标签
无序列表
<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义
1．无序列表的各个列表项之间没有顺序级别之分，是并列的
2. <ul></ul>中只能嵌套<li><li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的
3.<li>与</li>之间相当于一个容器，可以容纳所有元素
4．无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li><h1>列表项3</h1></li>
...
</ul>有序列表(同上)
<ol>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>自定义列表
<dl>标签用于定义描述列表(或定义列表)，该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用。
<dl>
<dt>联系我们</dt>
<dd>新浪微博</dd>
<dd>微信公众号</dd>
...
</dl>自定义列表的使用场景:
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
9、表单标签
表单的组成：一个完整的表单通常由表单域<form>、表单控件（也称为表单元素)和提示信息3个部分构成。
<form>会把它范围内的表单元素信息提交给服务器
属性 属性值 作用
action url地址 用于指定接收并处理表单数据的服务器程序的url地址
method get/post 用于设置表单数据的提交方式，其取值为get或post
name 名称 用于指定表单的名称，以区分同一个页面中的多个表单域
<form action="01标签学习.html" method="get" name="表单"></form>1. input输入表单元素
<input>表单元素
属性 属性值 描述
name 由用户自定义 表单元素名字
value 由用户自定义 文本框输入提示
checked checked 规定此input元素首次加载时应当被选中
maxlength 正整数 规定输入字段中的字符的最大长度
type
type属性值
属性值 描述
button 定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)
checkbox 定义复选框
file 定义输入字段和"浏览""按钮，供文件上传
multiple 多文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段，该字段中的字符被掩码
radio 定义单选按钮
reset 定义重置按钮，重置按钮会清除表单中的所有数据
submit 定义提交按钮，提交按钮会把表单数据发送到服务器
text 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符
1. name和value是每个表单元素都有的属性值主要给后台人员使用
2. name表单元素的名字,要求单选按钮和复选框要有相同的name值
<form action="01标签学习.html" method="get" name="表单">
用户名：<input type="text" name="uname" value="请输入名字"><br>
密码：<input type="password" name="pwd" maxlength="8" value="请输入密码"><br>
性别：男<input type="radio" name="sex" checked> 女<input type="radio" name="sex"><br>
<!--name是表单元素名字这里性别单选按钮必须有相同的名字name才可以实现多选1-->
爱好：吃饭<input type="checkbox" name="hobby"> 睡觉<input type="checkbox" name="hobby"> 玩游戏<input type="checkbox" name="bobby"><br>
<input type="submit" value="免费注册"><br>
<!--点击了提交按钮,可以把表单域form里面的表单元素里面的值提交给后台服务器-->
<input type="reset" value="重置"><br>
<!-- 重置按钮可以还原表单元素初始的默认状态-->
<input type="button" value="获取验证码"><br>
<!-- 普通按钮，搭配js使用-->
上传头像：<input type="file" value="上传文件"><br>
<!-- 文件域使用场景上传文件使用的-->
</form>
<label>标签为input元素定义标注（标签)
<label>标签用于绑定一个表单元素当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验
<label for="sex">男</label><input type="radio" name="sex" id="sex"/>核心: <label>标签的for属性应当与相关元素的id属性相同
2. select下拉表单元素
<select>
<option selected = "selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select><select>中至少包含一对<option>
在<option>中定义selected = " selected "时，当前项即为默认选中项
3. textarea文本域元素
常见：留言板、建议...
<form>
反馈：
<textarea cols="100" rows="10">留言反馈</textarea>
</form>通过<textarea>标签可以轻松地创建多行文本输入框
cols=“每行中的字符数”，rowS=“显示的行数”，我们在实际开发中不会使用，都是用CSS来改变大小
10、语义化标签
无语义标签（常用）
div标签:一行只显示一个（独占一行)
span标签:一行可以显示多个
<div>独占一行</div>
<div>另起一行</div>
<span>一行</span><spen>显示多个</spen>有语义的布局标签（了解，常用于手机端网页制作）
标签名 语义
header 网页头部
nav 网页导航
footer 网页底部
aside 网页侧边栏
section 网页区块
article 网页文章
以上标签显示特点和div一致，但是比div多了不同的语义
</body>
</html>
扫一扫
167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
