html基础学习
1. 什么是html
hyper text markup language 超文本标记语言：一门使用标记和浏览器交流沟通的语言，用文本的形式来技术。
2. html页面结构
<!DOCTYPE html> 文档声明标记
<html> 网页的起始
<head> 网页的头部
<title> 网页标题标记
放显示在浏览器标题栏的内容
</title>
</head>
<body>网页的主体内容
</body>
</html>网页的结束
3. 开发者工具查看页面结构
在浏览器上右键找到“检查（审查元素、检查元素）”，可以查看该页面的结构代码。
4. html标签学习
4.1 标签中属性语法
标签属性：描述标签特征的东西
语法：
1.必须要写在标签里，开始标签里
2.属性名=”属性的值”
3.当有多个属性的时候用空格隔开
4.2 h系列标签（heading标题标签）
标签：h1 - h6
用法：<h1>内容</h1>
特点：可以将文字设置为标题，效果为加粗，字体大小从h1到h6依次变小，h4的字体和普通文本一样大，h系列标签在html中有特殊语义。
4.3 font标签（字体标签）
用法：<font color=”gray” size=”2” face=”宋体” >内容</font>
属性：color：设置文字颜色
size：设置文字大小，范围是1-7，正常为3
face : 指定文本的字体
4.4 hr标签(Horizontal Rule 水平线标签)
用法：<hr />
4.5 p标签（paragraph 段落标签）
用法：<p>内容</p>
特点：让文字成为段落，占据一行，并且上下有明显间距
4.6 br标签（break 换行标签）
用法：<br />
作用：让标签两边的文字换行显示
4.7 strong、ins、em、del和b、u、i、s标签
|
标签 |
用法 |
效果 |
被弃用的相同效果 |
|
strong |
<strong></strong> |
加粗 |
b |
|
em |
<em></em> |
斜体 |
i |
|
ins |
<ins></ins> |
下划线 |
u |
|
del |
<del></del> |
删除线 |
s |
4.8 img标签(image)
用法：<img src=”图片路径” />
属性：src=”图片的路径” 指定图片标签里需要显示的图片
alt=”图片加载异常时显示的文字”
title=”鼠标停留在图片上的时候显示的提示”
4.9 a标签（anchor 超链接）
1： 在页面之间跳转：
<a href=”跳转到其他页面的相对路径”>这里必须要有内容</a>
属性：herf=”跳转的目标地址”
title=”鼠标停留时的提示”
target=”跳转的方式”
2.使用a标签在页面上定位标签
2.1 要准备一个被a标签定位的标签，要有id属性
2.2 a标签的href属性的值是#+目标标签的id
3.实现下载功能
<a href=”文件的相对路径” ></a>
注意：
1.这种方式当下已经很少使用
2.如果浏览器认识这种文件，会直接在浏览器中打开
4.10 base标签
用法：写在head标签里
<base target=”跳转方式” />
作用：统一设置当前页面上的a标签（未设置target属性）的跳转方式
4.11 无序列表ul(unordered list)
用法：
<ul>
<li></li>
...
</ul>
4.12 有序列表ol (ordered list)
用法：
<ol>
<li></li>
...
</ol>
4.13 自定义列表dl（definition list）
用法：
<dl>
<dt>小标题</dt>
<dd>内容<dd>
...
<dt>小标题</dt>
<dd>内容<dd>
...
</dl>
4.14 table（表格标签）
用法：
<table>
<caption></caption>
<thead>
<tr>
<th></th>
...
</tr>
</thead>
<tbody>
<tr>
<td></td>
...
</tr>
...
</tbody>
<tfoot>
<tr>
<td></td>
...
</tr>
</tfoot>
</table>
属性：border：控制边框的粗细
cellspacing：控制单元格的间距
width: 控制表格的宽度
align： 控制的是对齐方式，如果给table设置，控制表格对于浏览器而言的对齐，如果是给td,tr,tbody..控制内容的对齐方式
colspan/rowspan：控制td合并多少个单元格显示
4.15 input系列标签
1 输入框
<input type=”text” />
属性：placeholder：提示的文字，当我们输入内容的时候，会消失
value：设置输入框的默认值
maxlength：设置允许输入的最大长度
2 密码框
<input type=”password” />
3 单选框
<input type=”radio” />
name属性：可以让一堆的单选框成为互斥的一组
checked属性：设置某个单选框默认选中
4 按钮
<input type=”button” value=”按钮显示的文本” />
5 多选框
<input type=”checkbox” />
属性checked：设置多选框默认选中
6 提交按钮
<input type=”submit” />
作用：把表单里的数据提交到服务器
7 重置按钮
<input type=”reset” />
作用：把表单里的数据恢复默认
注意点：重置按钮必须放在表单里才能起效果
8 图片提交
<input type=”image” />
作用：提交数据
9 文件上传按钮
<input type=”file”/>
作用：上传文件
4.16 textarea文本域
<textarea cols="20" rows="10"></textarea>
属性：cols：控制宽度，并且是可缩放的最小宽度
rows：控制高度，并且是可缩放的最小高度
4.17 select（下拉框）
用法：
<select>
<option>选项</option>
...
</select>
设置某一个选项默认被选中：selected=”selected”
4.18 form表单
用法：
<form>
在这里放表单控件
</form>
表单：用来收集用户信息，用来装表单控件
表单控件：给用户输入或者交互用的标签
action属性：指定数据上交的地址
method属性：提交数据的方式
4.19 meta标签
1 设置页面的编码格式
<meta charset=”编码格式” />
2 设置页面的关键词
<meta name=”keywords” content=”” >
做搜索引擎优化
3 设置页面的描述
<meta name=”description” content=”” >
做搜索引擎优化
4.20 link标签
1 引入网站的图标
<link rel=”shortcut icon” type=”image/x-icon” href=”图标的路径” >
2 引入css文件
<link rel=”stylesheet” href=”css文件的路径” >
3 dns预解析
<link rel="dns-prefetch" href="需要预解析的服务器的地址">
只有特别大的网站才需要做dns预解析。
4.21 script和style标签
script：写js代码的
style：写css的
4.22 特殊字符
在浏览器中许多特殊字符需用对应的代码来表示。
如： ；为空格，<；为小于号等。
5. 什么是http协议
超文本传输协议（HyperText Transfer Protocol）
规定了浏览和服务交互的数据格式。
6. URL
统一资源定位器（Uniform Resoure Locator）
协议名+服务器ip+端口+目标资源的路径
7. 什么是SEO
搜索引擎优化(Search Engine Optimization)：让页面对搜索引擎更加友好
目的：让网站符合搜索引擎的排名需求，提高网站在搜索引擎中的排名，提高访问量从而提高收益。
8. HTML语义化
8.1 什么是HTML语义化
每一个标签都有语义，这个语义是相对于浏览器和搜索引擎的，需要在合适的地方用合适的标签。
8.2 两个没有语义化的标签
<div></div> 都是容器
<span></span>
div是一个占据一整行的容器
span是一个自适应内容多少的容器
