HTML5基础
第一章 HTML标签
一、HTML语法规范
分为单标签和双标签
单标签 例如：
<br/>
双标签 成对出现 例如：
<html>
<head></head>
<body></body>
</html>
标签之间是包含关系或并列关系
二、HTML基本结构标签
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
三、开发工具
<!DOCTYPE html>
文档类型的声明标签 表示采取HTML5
<html lang="en">
lang语言种类 用来定义当前文档显示的语言
en为英语 zh-CN为中文
<meta charset="UTF-8">
必须写 采取UTF-8来保存文字 不写会乱码
四、HTML常用标签
1.标题标签
六个等级的标题标签
-
由大到小 h 意思 head
<h1>标题一共六级选</h1>
<h2>文字加粗一行显</h2>
2.段落标签
标签用于定义段落
<p>我是一个段落标签</p>
标签语义：可以把HTML文档分割为若干段落
特点：一个段落里的文本会根据浏览器窗口大小自动换行
段落之间有空隙
3.换行标签
<br/>
break的缩写 打断，换行
标签语义：强制换行
4.文本格式化标签
加粗 <strong></strong> 或者<b></b> 推荐前者 语义更强
倾斜 <em></em> 或者<i></i>
删除线 <del></del> 或者<s></s>
下划线 <ins></ins> 或者<u></u>
5.div和span标签
<div>和<span>是没有语义的 就是一个盒子 用来装内容
<div>这是头部</div>
<span>今日价格</span>
div是division的缩写 表示分割 分区
span表示跨度 跨距
特点：
标签布局 一行可以多个span 小盒子
6.图像标签
img标签用于定义HTML页面中的图像 image的缩写 意为图像
<img src="img.jpg"/>
<img src="img1.jpg" alt="我是小晴"/>
<img src="img.jpg" title="我是小晴哦"/>
<img src="img.jpg" title="我是小晴哦" width="300"/>
<img src="img.jpg" title="我是小晴哦" height="300"/>
<img src="img.jpg" title="我是小晴哦" height="300" border="15"/>
src是img标签的必须属性 用于指定图像文件的路径和文件名
src 图片路径 必须属性
alt 文本 替换文本 图像不能显示的文字
title 文本 提示文本 鼠标放到图像上 显示的文字
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 像素 设置图像的边框粗细
属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开
7.路径（图像标签）
打开目录文件夹的第一层就是根目录
路径：
相对路径：图片相对于HTML页面的位置
相对路径分类 符号 说明
同一级路径 图像文件位于HTML文件同一级 <img src="img.jpg">
下一级路径 / 图像文件位于HTML文件下一级 <img src="images/img.jpg">
上一级路径 ../ 图像文件位于HTML文件下一级 <img src="../img.jpg">
绝对路径:
目录下的绝对位置 直接到达目标位置
8.超链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
外部链接 <a href="https://www.qq.com" target="_blank">小小腾讯</a>
内部链接 <a href="index.html">首页</a>
空链接 <a href="#">肥羊的体重</a>
下载链接 <a href="img.zip">下载文件</a> (地址链接的是文件.exe或zip等压缩包形式)
网页元素链接<a href="http://www.baidu.com"><img src="img.jpg"/></a>
锚点链接：点击链接· 可以快速定位到页面中的某个位置
1)在链接文本的href属性中，设置属性值为 #名字 的形式（以井号开头），如<a href="#two">第二集</a> `
2)找到目标位置标签，里面添加一个id属性=刚才起的名字，如<h3 id="two">第二集介绍</h3>
herf 用于指定链接目标的url地址，应用这个属性就具有了超链接的功能 是必须属性
target 用于指定链接页面的打开方式 其中_self为默认值(当前窗口) _blank为在新窗口中打开方式
五、HTML中的注释和特殊字符
<!--注释语句--> 快捷键：ctrl+/
空格符 ( )
小于号 <
大于号 >
六、表格标签
用于展示数据
1.表格基本结构：
<table>
<tr><th>wenzi</th><th>xiaoqing</th><th>xiaofeiyang</th></tr>
<tr><td>wenzi</td><td>xiaoqing</td><td>xiaofeiyang</td></tr>
<tr><td>wenzi</td><td>xiaoqing</td><td>xiaofeiyang</td></tr>
<tr><td>wenzi</td><td>xiaoqing</td><td>xiaofeiyang</td></tr>
<tr><td>wenzi</td><td>xiaoqing</td><td>xiaofeiyang</td></tr>
</table>
表头单元格标签：第一行或第一列 加粗居中显示
th标签表示HTML表格的表头部分（table head的缩写）
2.表格属性名 属性值
align left center right 规定表格相对周围元素的对齐方式
border 1或"" 规定表格单元是否有边框 默认为""，表示没有边框
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素
cellspacing 像素值 规定单元格之间的空白，默认2像素
width 像素值或百分比 规定表格的宽度
<thead></thead>:用于定义表格的头部 <thead>内部必须有<tr>标签 一般位于第一行
<tbody></tbody>:用于定义表格的身体 主要用于放数据本体
以上标签都是放在<table></table>中
3.合并单元格
跨行合并：rowspan=“合并单元格的个数” （不同行之间）
跨列合并：colspan=“合并单元格的个数” （不同列之间）
目标单元格（写合并代码）
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码
步骤：判断跨行跨列 找目标单元格 删除多余单元格
七、列表标签
用于布局
1.无序列表（重点）
<ul>
<li>葡萄</li>
<li>麻辣烫</li>
<li>芒果</li>
<li>章鱼小丸子</li>
<li>凤爪</li>
</ul>
无序列表中各个列表项没有顺序 是并列关系
ul /ul 中只能嵌套li /li 不能直接在ul /ul标签中输入其他标签或者文字
li 相当于一个容器 可以容纳所有元素
无序列表会带有自己的样式属性 但实际使用用css设置
2.有序列表
ol定义有序列表 li定义列表项
<ol>
<li>葡萄</li>
<li>麻辣烫</li>
<li>芒果</li>
<li>章鱼小丸子</li>
<li>凤爪</li>
</ol>
ol只能放li
li都能放
有自己样式 实际使用用css设置
3.自定义列表
常用于对属于或名词进行解释 无顺序
dl用于定义描述列表 和dt dd一起使用
<dl>
<dt>关注我</dt>
<dd>关注QQ</dd>
<dd>关注微信</dd>
<dd>关注抖音</dd>
</dl>
dl里只能包含dt 和dd
dt和dd没有个数限制 经常是一个dt对应多个dd dt和dd是兄弟关系 一个老婆n个老公
dt和dd里面可以放任何标签
八、表单标签
表单由表单域，表单控件（表单元素），提示信息三部分组成
1.表单域 from
表单域是一个包含表单元素的区域
from把范围内的表单元素信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</from>
常用属性 ：
属性 属性值 作用
action url地址 用于指定接受并处理表单数据的服务器程序的url程序
method get/post 用于设置表单数据的提交方式，其取值为get或post
name 名称 用于指定表单的名称，以区分同一个页面中的多个表单域
2.表单控件（表单元素）
1）input表单元素
input标签用于收集用户信息
包含一个type属性，根据不同的type属性值，输入字段有很多形式
<input type="属性值" />
input/标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
type属性的属性值：
属性值 描述
text 定义单行的输入字段，用户可在其中输入文本。默认宽度20字符
password 定义密码字段 输入的字符被掩码
radio 定义单选按钮 同一组要赋予相同的name
checkbox 定义复选框（多选） 同一组要赋予相同的name
button 定义可点击按钮
file 定义输入字段和浏览按钮 供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
reset 定义重置按钮 （会清除表单中的所有数据）
submit 定义提交按钮 会把表单数据发送到服务器
input的其他属性
name 由用户自定义 定义input元素的名称
value 由用户自定义 规定input元素的值
checked 规定此input元素首次加载时应当被选中
maxlength 正整数 规定输入字段中的字符的最大长度
1.name和value是每个表单元素都要有的属性值，主要给后台人员使用
2.name表单元素的名字 要求 单选按钮和复选框要有相同的name值
3.checked属性主要针对单选按钮和复选框，主要作用一打开页面，就默认选中某个表单元素
4.maxlenght 输入的最大字符数
<form>
用户名:<input type="text" name="username" value="请输入用户名" maxlength="6"><br>
密码:<input type="password"><br>
性别:男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女" checked="checked"> <br>
爱好:肥羊<input type="checkbox" name="hobby" value="肥羊" checked="checked">
干饭<input type="checkbox" name="hobby" value="干饭">
睡觉<input type="checkbox" name="hobby" value="睡觉">
学习<input type="checkbox" name="hobby" value="学习">
看剧<input type="checkbox" name="hobby" value="看剧">
<input type="submit" value="注册">
<input type="reset" value="重置">
<input type="file">
</form>
label标签
label标签为input元素定义标注
用于绑定一个表单元素，点击label标签内的文本时，浏览器光标自动定位选择到对应表单元素上，增加用户体验
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>
核心:label标签for属性应当与相关元素的id属性相同
<td>
<input type="radio" name="sex" value="男" id="nan"> <label for="nan">男</label>
<input type="radio" name="sex" value="女" id="nv"> <label for="nv">女</label> <br>
</td>
for里面的内容 也就是id 不能相同
2）select下拉表单元素
很多选项 节约页面空间
<select>
<option>黑龙江</option>
<option>黑龙</option>
<option>黑江</option>
<option selected="selected">龙江</option>
<option>黑</option>
</select>
select中至少包含一组option
在option中定义selected="selected"时，当前项即为默认选中项
3)textarea文本域元素
输入文本较多时
恋爱宣言：<textarea cols="50" rows="5"></textarea>
2754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
