Html1
一，HTML概述
网页开发需要学习的知识：
html
css
javaScript
两个框架
VUE.js
ElementUI UI user interface 用户界面
HTML xml 可扩展标记语言-->存储数据
Markup Language标签语言都会提供各种标签
html （HyperText Markup Language）超文本标记语言
文本：文字字符
超文本：指的是网页内容
标记：标签 标识 eg：买商品，商品上有标签，介绍了商品信息
超文本标记语言中会提供许多不同功能的标签，使用这些标签来修饰我们这些网页的内容，通过浏览器运行解释网页，最终运行出我们想要的效果
html语言就是一种标记语言，提供了许多的标签，不同的标签功能不同
网页就是通过这些标签描述出来的
最终有浏览器解释运行成我们看到的网页
eg： <a href="地址">百度</a> 定义一个超链接
二，HTML基本语法
1.<!-- --> html注释样式
2.HTML基本样式
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body>
</html>（1）<!DOCTYPE html>
声明html语言的版本信息 ，告诉浏览器以html5标准解释运行
（2）<html> </html>
骨架标签，根标签
所有标记语言都必须有一个根标签
html是网页中的根标签，所有内容都应该写在此标签中
（3）<head> </head>
头标签 主要对网页做设置：字符编码，标题，css样式，js脚本
包含了所有头部标签标签
头部区域的标签都有：<title>，<style>,<meta>,<link>,<script>
<title>：定义网页标题
<meta>：设置网页关键字，让搜索引擎查找
<meta charset="utf-8" />：网页字符集，需位于文档顶部
<link>标题处添加图标
（4）<body></body>
身体标签，用来写网页内容
3.标签
HTML中的标记指的就是标签
HTML使用标记标签来描述网页
（1）标签结构和写法
1.闭合标签（双标签）
2.自闭合标签：只有标签名，没有开始结束，完成一个特定的功能即可
<标签名>
<开始标签>标签体</结束标签> 闭合标签(双标签) 只对标签体内的内容进行修饰
（2）标签属性
<标签名 属性="" />完成一个特定的设置功能,没有标签体 自闭和标签(单标签)
标签中可以有属性:可以标签属性改变变迁愿挨的显示风格
<body text="red" bgcolor="green">
属性写在标签的开始标签中
一个标签可以有多个属性
属性名 = "值"
三，基本常用标签
1，标题标签
<h1></h1> <h2></h2>…<h6></h6>
共六种区别为从大到小，一个标签占一行
2，换行标签
<br/>
在前端代码中按enter键只能对代码进行换行，但向浏览器渲染时无法换行
所以使用<br/>换行（可被扫描识别）
3，段落标签
<p></p>p
一个<p>标签，代表一个独立段落，段落与段落之间有间隔
4，列表标签
（1）无序列表
<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li>
</ul>（2）有序列表
<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li>
</ol>通过给标签<ol>加属性type将其改为不同序列的有序标签
样式：<ol type=" ">
5，超链接
<a></a>
HTML使用超链接与网络上另一个文档相连，通俗的说就是使用超链接来访问其他网页资源
href 链接所要超链接地址
taeget 选择打开位置，_self在超链页面打开覆盖原本页面，_blank另起新窗口打开
6，图片链接
<img/>
注：图片的宽高一般不建议使用
7，转义字符
在HTML中预留了一些字符，这些字符不能再网页中直接使用
<；小于号
>；大于号
 ；空格
©；版权（C）
®；注册商标（R）
&trade；商标（TM）
8，表格
（1）构成表格的标签
table标签：表格标签
tr标签：表格中的行
th标签:表格的表头（作为表头，其中数据会加粗，居中）
td标签：表格单元格
（2）表格的基本结构
<table>定义表格
<tr>定义表行
<th>定义表头</th>
</tr>
<tr>
<td>定义单元格</td>
</tr>
</table>（3）表格属性
width：定义宽
height：定义高
cellpadding 只能写在table中 定义表格数据距表格边框距离 内边距
cellspacing 只能写在table中 定义不同单元格之间距离 外边距
align="内容水平方向对齐方式" left（默认） center right
valign="内容垂直方向对齐方式" top middle（默认） bottom
colspan="4" 合并列 从哪里额开始合并，在那列添加colspan="合并的数量" 记得删除多余的单元格
rowspan="4" 跨行合并单元格
例子：
eg1
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- table 表示一个表格 可以设置宽和高cellpadding 只能写在table中 定义表格数据距表格边框距离 内边距cellspacing 只能写在table中 定义不同单元格之间距离 外边距tr 表示一行 设置行高th 表示一个单元格，还是表头，内容会加粗，并且居中td 表示一个单元格，align="内容水平方向对齐方式" left（默认） center rightvalign="内容垂直方向对齐方式" top middle（默认） bottom表格中的数据都只能写在单元格中--><table border="1" width="400" ><tr height="80" width="600"><th>姓名</th><th>java</th><th width="800">c</th><th>python</th></tr><tr><td>张三</td><td>50</td><td>80</td><td>90</td></tr><tr height="100" ><td align="center">张三</td><td valign="bottom">50</td><td align="center" valign="top">80</td><td>90</td></tr><tr><td>张三</td><td>50</td><td>80</td><td>90</td></tr></table></body>
</html>eg2
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 快捷键 table>tr*4>td*4 创建一个4行4列的表格 --><!-- colspan="4" 合并列 从哪里额开始合并，在那列添加colspan="合并的数量" 记得删除多余的单元格 --><!-- rowspan="4" 跨行合并单元格 --><table border="1" width="400" height="300" ><tr><td colspan="4"></td></tr><tr><td></td><td></td><td></td><td rowspan="4"></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table></body>
</html>