前端技术：HTML + CSS + Javascript + jQuery + ajax + bootstrap
HTML的基本标签
HTML（HyperText Markup Language）超文本标记语言，网页制作必备的语言
HTML中语言的语法是标签，标签分为两种的
标签的结构分类
-
对标签
包含两部分：开始标签和结束标签
例如
<html></html> -
单标签
自带结束标记的
例如
<img />
标签的结构组成
-
<> 包含标签名
-
标签名 html
-
属性
<title 属性名=属性值 属性名1=属性值1></title>
<img 属性名=属性值 />
标签之间的关系
标签之间是可以相互嵌套的，就出现了标签和标签之间的关系
-
父子关系
直接包含的关系
<div> <b>hello</b> </div> -
兄弟关系
被同一个标签包含的标签之间的关系
<div> <b>hello</b> <img /> </div> -
先辈/后辈关系
间接包含和被包含的关系
<div> <b>hello</b> <img /> <p>hello nice to <i>meet</i> you</p> </div>
文档结构
<!-- 注释 html中的注释 快捷键ctrl + /-->
<!--
DTD 文档类型声明 Document Type Define
将当前文档声明为HTML文档
-->
<!DOCTYPE html>
<!-- html文档开始位置 -->
<html>
<!-- 文档的头部设置：文档的编码 文档的标题 文档中引入的文件等等 -->
<head>
<meta charset="utf-8">
<title>文档结构</title>
</head>
<!-- 文档体 在文档中呈现的内容都是在body中的 -->
<body>
<p>hello</p>
</body>
<!-- HTML文档结束位置 -->
</html>
常用标签
标题标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题标签</title>
</head>
<body>
<!--
hi标签
i是数字 有1到6的
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 分割线 -->
<hr />
</body>
</html>
文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本标签</title>
</head>
<body>
<!-- 呈现一般文本的 span
由span结合css给一些文字设计样式
-->
<span>一般文本</span>
<!-- 加粗字体的文本 b 或者 strong -->
<b>王欣</b>
<strong>耿豪</strong>
<!-- 斜体字体的文本 i 或者 em -->
<i>奕辰</i>
<em>文琛</em>
<!-- 段落标签 -->
<p>第一段</p>
<p>第二段</p>
</body>
</html>
图像标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 属性
src -- 要显示的图片的路径【本地文件路径 或者 网络图片路径】
相对路径（使用）-- 文件放在项目下面的
参照物：当前正在编辑的文件
两个路径：
. --- 当前编辑的这个文件所在的文件夹 HTMLDemo
.. --- 当前编辑的文件所在的文件夹的上一级目录
找文件的方式
参照正在编辑的这个文件 找与目的文件相同的一级目录， 找到这级目录之后
从这个目录为起点依次去定位到目的文件
./img/picture.jpg
绝对路径
C:\Users\liuyanan\Downloads\蜡笔小新.jpg
width -- 设置图片宽度
height --- 设置图片的高度
width和height设置一方即可 另一方会根据图片的比例自适应
alt --- 图片路径的错误提示
title -- 鼠标悬浮提示语 【应用到所有标签】
-->
<img src="./img/picture.jpg" width="200" title="已选中目标"/>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d5572.png" alt='图片资源不存在' />
</body>
</html>
超链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接标签</title>
</head>
<body>
<!-- 属性
href --- 设置链接地址
可以是网络地址 也可以是本地的html文件的地址
target -- 设置的是链接地址显示的位置
1.默认是在当前页面中显示
2._blank -- 新建一个空白的页面 在页面中显示
3.指定的具有某个名字的窗口中显示页面
-->
<a href="https://www.bilibili.com/">bilibili</a>
<a href="https://www.bilibili.com/" target="_blank">bilibili</a>
<a href="https://www.bilibili.com/" target="custom">跳转到指定窗口</a>
<!-- 内嵌窗口 -->
<!-- <iframe src="http://www.baidu.com" name="custom"></iframe> -->
<img src="img/1.jpeg" />
<!-- 如何让一张图片具有链接性 -->
<a id="xiaoxin" href="https://baike.baidu.com/item/%E8%9C%A1%E7%AC%94%E5%B0%8F%E6%96%B0/29538?fr=aladdin">
<img src="img/picture.jpg" width="100" />
</a>
</body>
</html>
列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表标签</title>
</head>
<body>
<!--
1.有序列表
ol -- 列表标签
li -- 列表的元素
2.无序列表
ul --- 列表标签
li --- 列表的元素
3.自定义列表
dl --- 列表标签
dt --- 列表的元素
dd --- 对列表元素的解释
-->
<!-- 有序列表
属性 type 设置有序的符号
默认是1 ---- 数字符号
A --- 大写英文字母
a ----- 小写英文字母
I ---- 大写的罗马符号
i ---- 小写的罗马符号
-->
<ol type="i">
<li>苹果</li>
<li>西红柿</li>
<li>鸭梨</li>
</ol>
<!-- 无序列表
type: circle --- 圆圈
desc --- 默认 实心黑点
square -- 实心黑框
-->
<ul type="desc">
<li>游泳</li>
<li>篮球</li>
<li>网球</li>
</ul>
<!-- 自定义列表 -->
<dl>
<dt>网球</dt>
<dd>我最喜欢的运动</dd>
<dt>苹果</dt>
<dd>我最常吃的水果</dd>
</dl>
</body>
</html>
表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签</title>
</head>
<body>
<!--
table --- 表格标签
tr --- 行
td --- 单元格
th --- 标题单元格
tbody --- 表格体
thead --- 表格头
tfoot --- 表格尾
caption --- 表格的标题
-->
<!-- table的属性
border -- 设置边框线的线宽 默认是0
width --- 设置表格的宽度
cellspacing --- 设置的是单元格之间的缝隙
height --- 设置表格的高度
-->
<table border="1" width="500" cellspacing="0" height="300">
<thead>
<tr>
<!-- 标签名*数量 tab键就能生成对应个数的标签-->
<th width="200">姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr height="150">
<td>YDZ</td>
<td>20</td>
<!-- rowspan 占几行 -->
<td style="background-color: #FFC0CB;" rowspan="2">男</td>
<td>77</td>
</tr>
<tr>
<!-- colspan 占几列 -->
<td colspan="2">DZ</td>
<!-- <td>22</td> -->
<!-- <td>男</td> -->
<td>78</td>
</tr>
</tbody>
</table>
<!-- 父标签>子标签*数量>子标签*数量 tab键 -->
<!-- table>tr*3>td*4 -->
<!-- <table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table> -->
<!-- table>tr>td*4 -->
<!-- <table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table> -->
</body>
</html>