HTML
一、HTML基本语法
1.1 标签(元素)
-
不同标签不同的语义,决定了标签的功能
-
标签分为单标签和双标签
<!--双标签有开始标签和结束标签--> <p>内容</p> <!--单标签没有结束标签--> <hr> <hr/>
-
标签名不区分大小写
-
标签具有属性,通过属性可以设置标签的相关属性
<font color='red' size='5'>zzzz</font> <!--- color和size就是属性->
掌握一会HTML标签需要掌握以下三点:
1.标签的语义和功能
2.标签的属性和属性的设置
3.单标签/双标签
1.2 注释
- 解释说明作用
- 注释掉一部分代码,查看页面等功能
1.3 文档声明
-
<!DOCTYPE html>
-
告诉浏览器以HTML的标准解析网页
二、HTML标签
2.1 主体结构标签
标签名 | 语义及作用 | 属性 | 单标签/双标签 |
---|---|---|---|
html | 页面的根标签 | 双 | |
head | 页面的描述标签 | 双 | |
body | 页面的主体标签 | 双 |
2.2 head标签
标签名 | 语义及作用 | 属性 | 单标签/双标签 |
---|---|---|---|
title | 网页在导航栏的标题 | 双 | |
meta | 设置网页元信息 | charset:设置网页的字符集 name:指定要设置的信息,如keywords,description content:与内容匹配,设置内容 http-equiv:如name类似 | 单 |
link | 设置网页外联信息 | rel: 值shortcut icon , stylesheet href属性: 指定外部文件地址 | 单 |
style | 写css内容 | 所有css属性 | 双 |
script | 写js内容 | 所有scrpt | 双 |
①meta设置网页元信息
<!-- 1.charset----设置字符集编码,避免网页乱码-->
<meta charset="UTF-8">
<!-- 2.keywords----设置关键字 优化SEO-->
<meta class="keywords" content="方便,快捷,实惠">
<!-- 3.description----设置描述信息 用于SEO -->
<meta class="description" content="zzzzzzzzzzz">
<!-- 4.refresh---设置指定时间后跳转指定页面 -->
<meta http-equiv="refresh" content="3;url=https://www.lilithgames.com">
②设置网页导航栏图标
<link rel="shortcut icon" href="图标地址">
2.3 格式排版标签
标签名 | 语义及作用 | 属性 | 单标签/双标签 |
---|---|---|---|
h1~h6 | 标题(一级标题到六级标题) | 双 | |
p | 段落 | 双 | |
hr | 分隔符 | 单 | |
br | 换行 | 单 | |
pre | previous–>按原文显示 | 双 | |
div | 用于布局 | 双 |
<!---->
<h1>格式排版标签</h1><!-- h1标签只写一个有利于搜索引擎优化 -->
<h2>格式排版标签</h2>
<h3>格式排版标签</h3>
<h4>格式排版标签</h4>
<h5>格式排版标签</h5>
<h6>格式排版标签</h6>
<p>格式排版标签</p><!--段落-->
<hr> <!--分割线-->
<p>
锄禾日当午
<br> <!--不多用,p能自动换行-->
汗滴禾下土
<br>
谁知盘中餐
<br>
粒粒皆辛苦
</p>
<pre> <!--用于在网页显示原代码-->
格式排版标签
格式排版标签
格式排版标签
</pre>
<p>格式排版标签</p>
<!--div用于布局-->
<div>
<div>
<div>格式排版标签</div>
</div>
</div>
**注意: ** 格式排版标签重要的不是在浏览器上的表现样式 , 而是他们的语义.
合理使用格式排版标签 , 对于SEO优化是友好的.
2.4 文本标签
标签名 | 语义及作用 | 属性 | 单标签/双标签 |
---|---|---|---|
em | 强调(文字斜体) | 双 | |
strong | 强调(文字加粗) | 双 | |
del | 删除线5 | 双 | |
ins | 下划线 | 双 | |
sub | 下标 | 双 | |
sup | 上标 | 双 |
三、功能标签
3.1 超链接
标签名 | 语义和功能 | 属性 | 单标签/双标签 |
---|---|---|---|
a | 超链接 | href属性 : 指定目标地址 target属性 : 指定目标文件打开方式 name属性 : 用于设置锚点名 | 双 |
base | 指定超链接的基础特性 写在head标签中 | href属性 : 设置超链接的基础地址(影响相对路径) target属性 : 页面内所有超链接打开方式 | 单 |
3.2 超链接的功能
①目标地址
- 通过 href 属性指向目标地址 , 目标地址是文件的地址
- 点击超链接 , 浏览器就会打开目标地址的指向文件
- 如果目标地址指向的文件的格式浏览器打不开 , 浏览器就会下载
②超链接的特殊用法
<!--移动端功能-->
<a href="tel:10086">10086</a>
<a href="sms:10086">发短息给我</a>
③指定目标文件打开的位置
- 把 target 属性的值设置为 “_blank” , 目标文件会在新窗口打开
- target 的默认属性值是 “_self”
3.3 锚点链接
①在页面设置锚点
<!--1. 使用a标签-->
<a name = "锚点名"></a>
<!--2. 给标签设置 id 属性-->
<div id="锚点名"></div>
②跳转到锚点
跳转到锚点 , 还是需要超链接 , 不跳转到新页面 , 跳转到当前页面的锚点位置
<a href="锚点名">指定锚点</a>
<a href-"#">返回定位</a>
注意:
不但可以跳转到本页面的某个锚点
<a href="#锚点名">
还可以跳转到其他页面的某个锚点
<a href="页面地址#锚点名">
3.4 图片标签
标签名 | 语义及功能 | 属性 | 单标签/双标签 |
---|---|---|---|
img | 图片 | src属性 : 指定图片地址 alt属性: 指定图片失效时,提示的文字 usemap属性 : 指定与该图像对应的map标签name值 | 单 |
map | 用于图像映射 | name属性 : 指定区域的形状不同执行不同的坐标 | 双 |
area | 用于图像映射划分区域 必须嵌套在map标签的里面 | shap属性 : 指定area的形状 rect(矩形),circle(圆形),poly(多边形) coods属性 : 根据形状不同执行不同的坐标 href属性 : 指定目标地址 target属性 : 指定在什么位置打开新的页面 | 单 |
3.4.1 在页面中引入图像
<!-- src: resource 目标源 alt: 图片失效后提示文字 title: 图片提示文字-->
<img src="" alt="" title="" >
- 常见的图片格式:
- jpg:静态图片,不支持透明
- png:静态图片,不支持透明
- gif:动态图片,支持透明
3.4.2 图片和超链接配合使用
<!--在a标签的里面嵌套img标签-->
<a href="http://www.baidu.com">
<img src="" alt="">
</a>
3.4.3 图片映射
<!--例:-->
<img src="./images/浏览器.jpg" alt="" usemap="#mymap">
<!-- map双标签 area单标签, area标签要嵌套在map标签里面-->
<map name="mymap">
<area shape="circle" coords="130,114,100" href="https://www.google.cn" title="google" target="_blank">
<area shape="rect" coords="265,27,491,159" href="https://www.firefox.com" title="Firefox" target="_blank">
<area shape="poly" coords="138,349,248,157,374,346" href="https://support.microsoft.com/" title="IE" target="_blank">
</map>
四、列表标签
-
无序列表
<!-- ul: 无序列表 li: 列表项 --> <ul> <li>HTML</li> <li>CSS</li> <li>Javascript</li> <li>Jquery</li> <li>Vue</li> <li>React</li> </ul> <!-- 列表的里面还可以嵌套列表 --> <h2>行政规划</h2> <ul> <li>江苏 <ul> <li>南京</li> <li>苏州</li> <li>镇江</li> </ul> </li> <li>浙江</li> <li>安徽</li> </ul>
-
有序列表
<!-- ol: 有序列表 li: 列表项 --> <h1>有序列表</h1> <hr> <h2>前端要学习的内容</h2> <ol> <li>HTML</li> <li>CSS</li> <li>Javascript</li> <li>Jquery</li> <li>Vue</li> <li>React</li> </ol>
**注意 : **无序列表在页面中非常常见 , 如导航 新闻列表 商品列表
一组具有相关性的内容放在一起 , 一般选择使用无序列表
-
定义列表
<!-- dl: 定义列表 dt: define title 定义列表标题 dd: define description 定义列表描述 --> <h1>定义列表</h1> <hr> <h2>商品分类</h2> <dl> <dt>家用电器</dt> <dd>电视</dd> <dd>空调</dd> <dd>洗衣机</dd> <dd>电冰箱</dd> <dt>电脑/办公</dt> <dd>电脑整机</dd> <dd>电脑配件</dd> <dd>外部设备</dd> </dl>
-
列表标签总结
标签名 语义和功能 属性 单标签/双标签 ul 无序列表 双 ol 有序列表 双 li 列表项–嵌套在ul和ol里面 双 dl 定义列表 双 dt 定义列表标题 双 dd 定义列表描述 双
五、表格标签
<!-- 表格 -->
<table>
<caption>表格标题</caption>
<!-- 表头 -->
<thead>
<!-- table row 表示一行 -->
<tr>
<!-- 表头单元格 -->
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
<th>地址</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<!-- 普通单元格 -->
<td>1</td>
<td>tiffy</td>
<td>1</td>
<td>cat</td>
<td>zzz</td>
</tr>
<tr>
<td>2</td>
<td>qwe</td>
<td>2</td>
<td>dog</td>
<td>asd</td>
</tr>
<tr>
<td>3</td>
<td>rty</td>
<td>3</td>
<td>bird</td>
<td>vbn</td>
</tr>
</tbody>
<!-- 表格注脚 -->
<tfoot></tfoot>
</table>
-
单元格设置内容对齐方式
使用 align 属性设置水平对齐方式, 值可以选择为 left, right, center 可以给 thead, tbody, tfoot 进行设置
-
设置单元格宽高
td{ width: ??px; height: ??px; }
-
设置表格中的对齐方式
<!----> tr,td{<!--设置居中,左对齐,右对齐--> text-align: center/left/right; }
-
合并单元格
给 td 或者 th 设置 colspan 用于跨列
给 td 或者 th 设置 rowspan 用于跨行
表格标签总结
标签名 | 语义和功能 | 属性 | 单标签/双标签 |
---|---|---|---|
table | 表格 | **cellspacing属性: ** 设置单元格之间的宽度 cellpadding属性: 设置单元格的内边距 | 双 |
caption | 表格标题 | 双 | |
thead | 表头 | align属性: 设置单元格内内容的水平对齐方式 valign属性: 设置单元格内内容的垂直对齐方式 | 双 |
th | 表头单元格 | align属性: 设置单元格内内容的水平对齐方式 valign属性: 设置单元格内内容的垂直对齐方式 rowspan属性: 设置该单元格跨越的行数 colspan属性: 设置该单元格跨越的列数 | 双 |
tbody | 表格主题 | align属性: 设置单元格内内容的水平对齐方式 valign属性: 设置单元格内内容的垂直对齐方式 | 双 |
tr | 行 | align属性: 设置单元格内内容的水平对齐方式 valign属性: 设置单元格内内容的垂直对齐方式 | 双 |
td | 普通单元格 | align属性: 设置单元格内内容的水平对齐方式 valign属性: 设置单元格内内容的垂直对齐方式 rowspan属性: 设置该单元格跨越的行数 colspan属性: 设置该单元格跨越的列数 | 双 |
tfoot | 注脚 | align属性: 设置单元格内内容的水平对齐方式 valign属性: 设置单元格内内容的垂直对齐方式 | 双 |
六、表单标签
6.1 表单form标签
form是表单的包裹标签,表单中所有的东西都要写在 form 标签里面
具有以下属性:
action: 表单提交的地址
method: 指定提交方式
target: 指定新打开页面的方式
6.2 表单控件
① 文本输入框
<!-- 1.文本输入框 -->
<!-- 属性:
type: text
name: 提交给服务器的信息
value: 文本框在页面显示的值
maxlength: 文本框可输入符号数的最大值
-->
<input type="text" name="" value="显示在页面的值" maxlength="12">
② 密码输入框
<!-- 2.密码输入框 -->
<!-- 属性:
type: password
name: 提交给服务器的信息
value: 文本框在页面显示的值-----暗文无意义
maxlength: 文本框可输入符号数的最大值
-->
<input type="password" name="" value="显示在页面的值" maxlength="12">
③ 单选框
<!-- 3.单选框 -->
<!-- 属性:
type: radio
name: 提交给服务器的信息, 相同name的radio同属一个单选框
checked: 单选框的默认值
value: 属性指定真正向后端提交的数据
-->
性别:
<input type="radio" name="sex" value="male" >男
<input type="radio" name="sex" value="female" checked>女
<input type="radio" name="sex" value="unknown" >??
④ 复选框
<!-- 3.复选框 -->
<!-- 属性:
type: checkbox
name: 属性指定名字(向后端提交数据的时候使用)
value: 属性指定真正向后端提交的数据
checked: 默认选中值
-->
兴趣:
<input type="checkbox" name="hobby" value="basket">篮球
<input type="checkbox" name="hobby" value="soccer" checked>足球
<input type="checkbox" name="hobby" value="volley">排球
⑤ 下拉菜单
<!-- 5.下拉菜单 -->
<!-- 属性:
name: 属性的名字,提交给服务器的值
value: 提交给服务器的具体值
selected:下拉菜单的默认选项
-->
<select name="education" id="">
<option value="primary">小学</option>
<option value="junior" selected>初中</option>
<option value="senior">高中</option>
</select>
⑥ 提交按钮
<!-- 6.提交按钮 -->
<!--提交按钮有两种实现形式
1): input -- type值为submit(默认值)
value值为提交按钮上的文字
2): button -- button的type属性的默认值就是submit, 可以实现提交功能
-->
<input type="submit" value="提 交">
<button>提交</button>
⑦ 重置按钮
<!-- 7.重置按钮--重置form表单中所有的内容 -->
<!--重置按钮有两种实现形式
1): input -- type值为reset
value值为重置按钮上的文字
2): button -- type属性值为reset
-->
<input type="reset" value="重 置">
<button type="reset">重置</button>
⑧ 普通按钮
<!-- 8.普通按钮-->
<!--重置按钮:
type属性值为button,实现普通按钮,没有效果
-->
<input type="button" value="按 钮">
<button type="button">普通</button>
⑨ 文本区域
<!-- 9.文本区域 -->
<!-- 属性:
name: 提交给服务器的信息
cols: 控制文本域的列数, 影响宽度
rows: 控制文本域的行数, 影响高度
-->
<textarea name="smg" id="" cols="30" rows="10"></textarea>
⑩ 隐藏域
<!-- 9.隐藏域--向服务器提交隐藏内容 -->
<!-- 属性:
type 设置为 hidden
name 属性指定名字(向后端提交数据的时候使用)
value 属性指定向后端提交的数据
-->
<input type="hidden" name="hid" value="隐藏数据">
七、表单label , fieldset , legend 标签
7.1 label标签
-
label标签用于和表单控件做关联 , label中的通常包含表单控件的说明文字
-
好处:
- 有利于SEO , 让文字和表单控件关联
- 点击与表单控件关联的文字可以让表单控件获取焦点
<!--用法--> <!--label的for属性要和关联的id属性的值相同,通过这样确定关系--> <label for="txt"> <input type="text" id="txt"> </label> <label for="pwd"> <input type="password" id="pwd"> </label> <!--label用于单选框,复选框 将input嵌套在label标签中--> <label> <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" value="famale">女 <input type="radio" name="sex" value="unknown">?? </label> <label> <input type="checkbox" name="hobby" value="basket">篮球 <input type="checkbox" name="hobby" value="soccer" checked>足球 <input type="checkbox" name="hobby" value="volley">排球 </label>
7.2 fieldset和legend标签
- fieldset 可以在表单控件的周围加一个边框
- legend 指定表单的标题,出现在边框的上面
<form>
<fieldset>
<legend>表单标题</legend>
表单控件...
</fieldset>
</form>
八、disabled属性
<!-- disabled属性: disabled标签让input标签变为不可用状态-->
<input type="password" name="" value="显示在页面的值" maxlength="12" disabled>
九、表单标签总结
标签名 | 语义及功能 | 属性 | 单标签/双标签 |
---|---|---|---|
form | 表单 , 可以提交给服务器 | action:提交到服务器的地址 target: 表单提交方式 method: 表单打包提交方式 | 双 |
input | 输入框 | type: 表单的控件,值有text , password , radio , checkbox , reset , button ,submit name: 提交给服务器的值 checked: 为 radio 和 checkbox设置默认选项。 length: 设置输入框的最大输入长度(text 和 password) size: 设置输入框尺寸(text 和 password) | 单 |
select | 下拉菜单栏 | name: 提交给服务器的值 value: 真正提交给服务器的值 | 双 |
option | select的选项 | name: 提交给服务器的值 value: 真正提交给服务器的值 selected: 默认选中 | 双 |
textarea | 文本域 | name: 标识该输入框,后端用改标识获取数据(暂时不用) rows: 文本域行数,能决定文本域的高度 **cols:**文本域列数,能决定文本域的宽度 | 双 |
label | 关联表单控件 | **for:**指定其他要关联的表单控件的ID | 双 |
fieldset | 表单边框 | 双 | |
legend | 表单边框标题 | 双 |
十、框架标签
<!--框架就是把另一个网页引入到当前网页-->
<iframe src="http://www.baidu.com" frameborder="0"></iframe>
十一、字符实体
-
常用的
空格 < 小于 > 大于 & &符号 ¥ ¥ × × ÷ ÷ © ©