HTML
HTML是一门语言，所有的网页都是用HTML这门语言编写出来的HTML(HyperText Markup Language):超文本标记语言
超文本:超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
标记语言:由标签构成的语言
HTML运行在浏览器上，HTML标签由浏览器来解析
HTML标签都是预定义好的。例如:使用<img>展示图片
W3C标准:网页主要由三部分组成
结构:HTML
表现:CSS
行为:JavaScript
1，HTML入门
1．新建文本文件，后缀名改为.html
2．编写HTML结构标签
3．在<body>中定义文字
<html>
<head>
<title>html 快速入门</title>
</head>
<body>
<font color="red">乾坤未定，你我皆是黑马~</font>
</body>
</html>HTML结构标签:
| 标签 | 描述 |
| <HTML> | 定义HTML文档 |
| <head> | 定义关于文档的信息 |
| <title> | 定义文档的标题 |
| <body> | 定义文档的主题 |
HTML标签不区分大小写
HTML标签属性值单双引皆可
HTML语法松散
2，基础标签
| 标签 | 描述 |
| <h1> ~ <h6> | 定义标题，h1最大，h6最小 |
| <font> | 定义文本的字体、字体尺寸、字体颜色 |
| <b> | 定义粗体文本 |
| <i> | 定义斜体文本 |
| <u> | 定义文本下划线 |
| <center> | 定义文本居中 |
| <p> | 定义段落 |
| <br> | 定义折行 |
| <hr> | 定义水平线 |
html表示颜色:
1．英文单词: red , pink , blue . . .
2. rgb(值1,值2,值3):值的取值范围:0~255 rgb(255,0,0)
3．#值1值2值3:值的范围:00~FF
转义字符:
| HTML源代码 | 显示结果 | 描述 |
| < | < | 小于号或显示标记 |
| > | > | 大于号或显示标记 |
| & | & | 可用于显示其它特殊字符 |
| " | " | 引号 |
| ® | ® | 已注册 |
| © | © | 版权 |
| ™ | ™ | 商标 |
| | 不断行的空白 |
3，图片，音频，视频标签
| 标签 | 描述 |
| <img> | 定义图片 |
| <audio> | 定义音频 |
| <video> | 定义视频 |
img:定义图片
src:规定显示图像的URL(统一资源定位符)
height:定义图像的高度
width:定义图像的宽度
audio:定义音频。支持的音频格式:MP3、WAV、OGG
src:规定音频的URL
controls:显示播放控件
video:定义视频。支持的音频格式:MP4, WebM、OGG
src:规定视频的URL
controls:显示播放控件
尺寸单位:px和%
资源路径:
1.绝对路径:完整路径
2.相对路径:相对位置关系
4，超链接标签
| 标签 | 描述 |
| <a> | 定义超链接，用于链接到另一个资源 |
href:指定访问资源的URL
target:指定打开资源的方式
_self:默认值，在当前页面打开
_blank:在空白页面打开
<a href="http://www.itcast.cn" target="_blank">点我有惊喜</a>5，列表标签
| 标签 | 描述 |
| <ol> | 定义有序列表 |
| <ul> | 定义无序列表 |
| <li> | 定义列表项 |
type:设置项目符号
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<ul>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ul>
6，表格标签
| 标签 | 描述 |
| <table> | 定义表格 |
| <tr> | 定义行 |
| <td> | 定义单元格 |
| <th> | 定义表头单元格 |
table:定义表格
border:规定表格边框的宽度
width :规定表格的宽度
cellspacing:规定单元格之间的空白
tr:定义行
align:定义表格行的内容对齐方式
td:定义单元格
rowspan:规定单元格可横跨的行数
colspan:规定单元格可横跨的列数
<table border="1" cellspacing="0" width="500">
<tr>
<th>序号</th>
<th>品牌</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr align="center">
<td>010</td>
<td>a</td>
<td>三只松鼠</td>
<td>三只松鼠</td>
</tr>
<tr align="center">
<td>009</td>
<td>b</td>
<td>优衣库</td>
<td>优衣库</td>
</tr>
<tr align="center">
<td>008</td>
<td>c</td>
<td>小米</td>
<td>小米科技有限公司</td>
</tr>
</table>
7，布局标签
| 标签 | 描述 |
| <div> | 定义HTML文档中的一个区域部分，经常与cSS一起使用，用来布局网页 |
| <span> | 用于组合行内元素 |
8，表单标签
表单:在网页中主要负责数据采集功能，使用<form>标签定义表单
表单项(元素):不同类型的input元素、下拉列表、文本域等
（1）表单
| 标签 | 描述 |
| <form> | 定义表单 |
| <input> | 定义表单项，通过type属性控制输入形式 |
| <label> | 为表单项定义标注 |
| <select> | 定义下拉列表 |
| <option> | 定义下拉列表的列表项 |
| <textarea> | 定义文本域 |
（1）form:定义表单
1）action:规定当提交表单时向何处发送表单数据，URL
#表单项数据要想被提交，则必须指定其name属性
3）method :规定用于发送表单数据的方式
【1】get:浏览器会将数据直接附在表单的action URI之后。大小有限制
请求参数会拼接在url后面
url长度有限制 4KB
【2】post:浏览器会将数据放到http请求消息体中。大小无限制
请求参数会在http请求协议的请求体中
（2）表单项
<input>:表单项，通过type属性控制输入形式
<select>:定义下拉列表，<option>定义列表项
<textarea>︰文本域
| type取值 | 描述 |
| text | 默认值，定义单行的输入字段 |
| password | 定义密码字段  |
| radio | 定义单选按钮  |
| checkbox | 定义复选框  |
| file | 定义文件上传按钮  |
| hidden | 定义隐藏的输入字段 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| reset | 定义重置按钮，重置按钮会清除表单中的所有数据 |
| button | 定义可点击按钮  |
<form action="#" method="post">
<input type="hidden" name="id" value="123">
<label for="username">用户名:</label>
<input type="text" name="username" id="username"><br>
<label for="password">密码:</label>
密码:<input type="text" name="password" id="password"><br>
性别:
<input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
<input type="radio" name="gender" value="2" id="female"> <label for="female">女</label>
<br>
爱好:
<input type="checkbox" name="hobby" value="1" id="trip"> <label for="trip">旅游</label>
<input type="checkbox" name="hobby" value="2" id="movie"> <label for="movie">电影</label>
<input type="checkbox" name="hobby" value="3" id="game"> <label for="game">游戏</label>
<br>
头像:
<input type="file">
<br>
城市:
<select name="city">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<br>
个人描述:
<textarea cols="20" rows="5"></textarea>
<br>
<br>
<input type="submit" value="免费注册">
<input type="reset" value="重置">
<input type="button" value="一个按钮">
</form>
![[线代]自用大纲](https://img-blog.csdnimg.cn/ee72f2e9d28e46aaadcc979065e99bbd.png)
