HTML
HTML 概述
- HTML(HyperTEXT MarkUp Language)
"超文本标记语言"，它是制作网页的标准语言 HTML 不区分大小写 2.标签
由尖括号包围，比如<title>, 通常成对出现如<title></title>不能交叉嵌套 并且要注意缩进 如：
<html> //外层：父元素
<head> //内层
</head>
<body> //内层为同级
</body>
</html>一个标签可以有多个属性，且与属性先后顺序无关
HTML文件结构
文件结构为：.htm .html 文件
<html> //头部：浏览器，搜索引擎所需信息
<head>
<title> </title>
</head>
<body> //主体：网页中包含的具体内容
</body>
</html>HTML5文件结构
<!DOCTYPE html> //文档类型：符合HTML5标准
<html lang="en"> //lang属性：en英文zh中文
<head>
<meta chraset="UTF-8"> //<meta>:元数据 用于指定关于HTML文档的信息
// chraset属性：字符集编码方式
//浏览器：UTF-8 是国际编码
<title> </title>
</head>
<body> //主体：网页中包含的具体内容
</body>
</html>字符集与编码
ASCII: 数字，英文字母，符号进行了编码
GB2312: 简体中文
Unicode: 所有语言
UTF-8: 所有语言，占用空间更小
乱码问题
- 源文件保存时的编码方式
源文件声明
<meta charset="编码方式">
不一致时就会出现乱码HTML标签（1）
标题h1~h6
即分级标题，一个页面建议只有一个h1
<h1>一级标题 heading 1</h1>
<h2>一级标题 heading 2</h2>
<h3>一级标题 heading 3</h3>
<h4>一级标题 heading 4</h4>
<h5>一级标题 heading 5</h5>
<h6>一级标题 heading 6</h6>
这里正文文字段落p<p></p>
<p>段落内容</p>由于对 html 源文件会自动去掉空格空行，对于源代码连续多个空格空行只生成 1 个空格空行
空行解决方式
段内换行<br/>
单独出现的标签，直接结束
<p>这是段落。<br/> 换行，多个则为空行。</p>空格字符  ；
 ；
空格解决方式
特殊字符 全小写
使用该字符为增加空格的方法
<body>
<p>连续三个空格 ； ； ；</p>
</body>预留格式 pre 更简单解决方式
<pre> </pre>
定义预格式化的文本，文本总的空格和换行符会被保留
pre 标签很适合显示计算机代码
<body>
<pre>
内容格式不会变，空格空行会保留
</pre>
</body>行内组合 span
**<span> </span>**
组合行内元素，以便通过 CSS 样式 来格式化 需要单独标记出来的信息所用
<p>将<span>需要特殊标识出来的文字放在该标签内</span></p>
在学到CSS利用代码对该标签进行设置如：
<style type="text/css"
span{
color:blue;（蓝色）
font-weight:bold;（加粗）
}
</style>水平线 hr
<hr/>
单独出现
添加水平线来分割网页的不同部分
<p>
<hr/>单独出现 默认网页左端到右端 在需要添加的位置直接书写该标签即可
</p>注释
<!--注释内容-->
<body>
<!--注释内容 主要对代码功能进行说明，增加可读性-->
<!--注释不会在浏览器中显示-->
<!--注释可以
跨行-->
</body>语义化
为规范使用
斜体标签<em>此部分文本显示为斜体</em>
粗体标签<strong>此部分文本显示加粗</strong>
HTML 标签（2）
超链接
<a href="网址">文字或图片</a>
此标签成对出现
链接到本站点其他网页<a href="news.html">新闻</a>
即单击到新闻页面
链接到其他站点<a href="http://www.baidu.com">百度</a>
即单击百度 要带上协议部分的名字 跳转百度
虚拟超链接<a href="#">板块2</a>
不知道跳转到哪个页面当鼠标停留在链接的文字或图片上时，依然会出现超链接的效果 比如光标变小，但不会单机链接到任何位置。
//如部分代码需要其他html文件配套
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>首页</h1>
<h2>导航</h2>
<a href="news.html">新闻</a>
<a href="technology.html">科技</a>
<a href="www.baidu.com">问问百度</a>
</body>
</html>
HTML 标签（3）
img 标签
<img src="图片" alt=“图片替换文本”/>
常见图像格式
- JPG：有损压缩，色彩丰富图片。
- GIF:简单动画，背景透明。
- PNG:无损压缩、透明、交错、动画。
插入图像
<img src="图片" alt=“图片替换文本”/>
比如有以下两个文件 要在 index.htm 中添加 logo.gif
绝对路径：以根目录为基准
C:/site/index.htm
C:/site/logo.gif<img src="C:/site/logo.gif" />
相对路径：以该文档所在的位置为基准图片直接在站点文件夹内<img src="logo.gif" />图片在站点文件夹内images文件夹<img src="images/logo.gif"/>图片在站点文件夹内 网页在站点文件夹内的文件夹两个点表示上一级文件夹 <img src="../logo.gif">图片和网页分别在站点文件夹子文件夹内 <img src="../images/logo.gif"/>
HTML 标签（4）
区域：div
<div></div>
成对出现，确定一个单独的区域，如页面的一个组成部分，一个栏目板块
<div align="center"> align属性：表示对齐
<h1>web 前端开发</h1>
<p>HTML</p>
<p>CSS</P>
<p>JavaScript</p>
</div>列表
无序列表 ul li
无序列表<ul></ul> 列表项<li></li> 成对出现
<h1>web 前端开发</h1>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>有序列表 ol li
有序列表<ol></ol> 列表项<li></li>成对出现 出现序号
<h1>web 前端开发</h1>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>表格
table tr td
<table></table> 表示要绘制表格<tr></tr> 表示行数<td></td> 表示单元格（列）
下列代码表示两行三列的表格
<table >
<tr>
<td>此处填写内容</td>
<td>此处填写内容</td>
<td>此处填写内容</td>
</tr>
<tr>
<td>此处填写内容</td>
<td>此处填写内容</td>
<td>此处填写内容</td>
</tr>
</table>下面表是2*3有边框表格
<table border="1"> border属性表示 边框的粗细
<tr>
<td>此处填写内容</td>
<td>此处填写内容</td>
<td>此处填写内容</td>
</tr>
<tr>
<td>此处填写内容</td>
<td>此处填写内容</td>
<td>此处填写内容</td>
</tr>
</table>table tr th
<table></table> 表示要绘制表格<tr></tr> 表示行数<th></th> 表示表头单元格tablehead 加粗显示
下面代码表示 4*3 且第一行为表头单元格的表格
<table border="1">
<tr> <th>内容</th> <th>内容</th> <th>内容</th> </tr>
<tr> <td>内容</td> <td>内容</td> <td>内容</td> </tr>
<tr> <td>内容</td> <td>内容</td> <td>内容</td> </tr>
<tr> <td>内容</td> <td>内容</td> <td>内容</td> </tr>
</table>dl，dt，dd
自定义列表 dl，列表项 dt，描述 dd
<dl>
<dt>列表项</dt>
<dd>描述</dd>
<dt>列表项</dt>
<dd>描述</dd>
</dl>HTML 标签（5）
表单：是一个区域，采集用户信息
表单元素：文本框，按钮，单选，复选，下拉列表，文本域
表单 form 标签
<form></form>成对出现
<form action="数据处理网页"> action属性：表示收集来的数据交由那个页面处理
表单元素
</form>文本框，密码框 input----text password
<form> <input type="text|password"</form>type属性：文本框:type="text"密码框:type="password"
例子：
<form>
账户：<input tpye="text" name="userName"/>
</br>
密码：<input tpye="password" name="userPsd"/>
</form>：
PS:通常不会自动换行所以要添加</br>标签，
name属性代表名字是什么，当表单元素数据需要交给后端处理，后端处理数据就要知道数据来源于哪个表单元素，通过name属性读取到是哪个表单元素的数据。提交重置按钮 input----submit
按钮：提交按钮 重置按钮提交按钮需要将type属性设置为submit重置按钮需要将tpye属性设置为resetvalue属性：用来规定表面文字是什么
例子
<form>
姓名：
<input type="text" value="" name="myName"/>
<input type="submit" value="提交” name="submit"/>
</form>
例子
<form>
爱好：
<input tpye="text">
<input tpye="submit" value="确定"/>
<input type="reset" value="重置"/>
</form>单选框 复选框 input----radio checkbox
单选框需要将 type 属性设置为 radio：只能选择一项
复选框需要将 type 属性设置为 checkbox：任意选择多项name属性：
当前这一项它的名称叫什么checked属性：
表示是否被默认选择当为 checked 为默认选择value属性：
表示要提交给后端的数据
//格式
<form>
<input type="radio|checkbox"
value="值" name="名称" checked="checked"/>
</form>例子:男 音乐被默认选择
<form> 性别： 男
<input type="radio" value="boy" name="gender" checked="checked" /> 女
<input type="radio" value="girl" name="gender" /> 爱好：
<input type="checkbox" value="1" name="music" checked="checked" />音乐
<input type="checkbox" value="2" name="sport" />体育
<input type="checkbox" value="3" name="reading" />阅读
</form>下拉列表框 select option
<select></select>
标签对表示一个下拉列表框<option></option>
标签对表示列表项option标签有一个selected属性：当selected="selected"表示是否默认被选
例子:
旅游被默认选择
<form> 爱好：
<select>
<option>看书</option>
<option selected="selected">旅游</option>
<option>运动</option>
<option>购物</option>
</select>
</form>文本域 Textarea
<textarea></textarea>成对出现 表示出现一块大段的文本输入区域rows属性表示行数cols属性表示列数<textarea rows="行数" cols="列数">文本</textarea>
例子
<form> 个人简介：
<br>
<textarea cols="50" rows="10"> 在这里输入内容 </textarea>
<input type="submit" value="确认"> <input type="reset" value="重置">
</form>
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。