[前端基础]HTML+CSS入门（一）
目录
HTML结构
一个HTML文件分为head和body两部分，主要内容在body里面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>热门活动页面</title>
</head>
<body>
</body>
</html><! DOCTYPE html>：文档声明，用来告诉浏览器当前的版本，不区分大小写，放在开头。
<title>：title标签的内容会作为搜索结果的超链接显示在标题栏
<meta charset="utf-8">：字符编码，utf-8
HTML注释
注释：<!--注释内容 -->，快捷键CTRL+/，注释内容不会显示在页面中，//和/* */在html里也是常用的注释，但只能用在js和CSS语言,不对HTML语言起作用
HTML转义字符
- <(<)
- >(>)
- ( )（空格）(html空格space无论多少个都只显示一个，想要多个空格只能使用转义字符)
- ' 表示单引号（' '）
- "双引号（" "）
- &与（&）
HTML基础标
一些基础常见标签：
标题标签:一级标题<h1></h1>，二级标题<h2></h2>...六级标题<h6></h6>
换行标签:<br />换行
横线标签<hr/>：横线
段落标签<p>:<p>段落内容</p>
span标签：<span> 用于对文档中的行内元素进行组合。
div标签：<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
超链接标签：<a href=""></a>，""里填写跳转路径，#代表跳转本页面
图片标签：<img src="" alt="" title=" " />，src填写图片地址，alt填写图片未加载成功显示的内容，title填写鼠标悬停图片上方要显示的文字
音频标签：<audio src=""></audio>，音频，src填写地址
视频标签：<video src=""></video>，视频，src填写地址
长文本标签：<textarea></textarea>设置长文本
文本格式化标签：
左边的标签自带强调含义，优先使用左边
更多标签可参考其他网站：HTML 标签参考手册 (w3school.com.cn)
HTML列表
有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>type="1/A/a/I/i"，无样式：style="list-style-type:none"
无序列表
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>圆点：style="list-style-type:disc"，圆圈：style="list-style-type:circle"，正方形：style="list-style-type:square"，无样式：style="list-style-type:none"
定义列表
<dl>
<dt>标题</dt>
<dd>详情</dd>
</dl>HTML表格
<table border="1px" cellspacing="0px" >
<thead>
<tr>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>总计</td>
<td colspan="3"></td>
</tr>
</tbody>
</table>-
<caption>:设置表格标题； -
<thead>:表示表格头部，用来放头部的tr； -
<tbody>:表示表格主要内容； -
<tfoot>:表示表格底部； - tr： 是 table row 的缩写，表示表格的一行。
- td：是 table data 的缩写，表示表格的数据单元格。
- th：是 table header的缩写，表示表格的表头单元格。
thead和tbody不能合并，删除单元格是指把后面被合并的<tr>或<td>删除
border="1px" cellspacing="0px" 可添加外边框取消内边框
HTML表单
<form action="#" method="">
<label>电子邮箱：<input type="email"/></label><br/>
<label>设置密码：<input type="password"/></label><br/>
<label>真实姓名：<input type="text"/></label><br>
性别：<input type="radio" name="sex" checked/>男
<input type="radio" name="sex"/> 女<br/>
生日：<select name="" id="">
<option>1999</option>
<option>2000</option>
</select>
年
<select>
<option>1</option>
<option>2</option>
</select>
月
<select name="" id="">
<option>1</option>
<option>2</option>
</select>
日<br/>
<img src=""/><a href="#">看不清换一张？</a><br/>
<p>验证：<input type="text"/></p>
<input type="image" src=""/>
</form>action：跳转页面路径
method：get/post
input类型：
文本框 type="text";
- 将表单的数据提交到服务器必须要为表单项指定一个name属性；
- disabled属性：设置该文本框不可输入任何内容；
密码框：type="password";
label标签：<label></label>:绑定文字和表单控件的关系，增大表单控件的点击范围
单选框：type="radio";
- name属性：将单选按钮进行分组，name相同则为同一组按钮，相同name下单选生效；
- checked属性：默认选中该选项；
多选框：type="checkbox"；
- value属性代表该选项的名称;
- checked属性：设置默认选中项；
邮箱框：type="email"
文件：type="file"
日期：type="date"：可以设置min等
下拉列表
- select标签创建下拉列表
- option标签添加列表项
- name属性指定给select标签，value属性指定给option
- selected属性设置默认选项
按钮：type="button"
- <button type="submit">提交按钮
- <button type="reset">重置按钮
- <button type="button">普通按钮，配合js