HTML
什么是HTML，HTML全称为 Hyper Text Markup Language, 寓意为 超文本标记语言
准备工作
浏览器的选择
学习过程中以chrome浏览器为主。
Sublime开发工具
- 在浏览器中输入 www.sublimetext.com
- 或者，在浏览器中输入www.sublimetext.cn
用Sublime开发第一个HTML页面
- 设计文件扩展名为显示状态
- 创建文件夹及必须的文件
- 打开Sublime进行页面设计
HTML文件结构
<!DOCTYPE html>
<html>
<head>
<title>first.html</title>
</head>
<body>
这里是正文部分
</body>
</html>
常用标签
<font>标签
作用： 规定文本的字体、字体尺寸、字体颜色
示例：<font size="3" color="red" face="楷体">我是蓝色</font>
小贴士：在HTML4中，不赞成使用该标签，在HTML5，不支持该标签
<p>标签
作用：定义一个段落
示例：<p>我是p标签</p>
小贴士： 段落内依据所在容器的宽度自动换行，浏览器会自动地在段落地前后添加空行，<p>和<br>的区别，<br>自闭和标签，只换行，不换段。
<!-- -->注释标签
作用： 编写程序时，给代码的解释或提示，能提高程序的可读性，以便后续的参考，修改
示例：<!--这是注释-->
小贴士：注释不会在浏览器中进行显示，注释出现的频率非常高。
h标签
作用：定义标题头的六个不同文字大小，依次显示重要性的递减，也就是权重依次降低，总共有6级别。
示例：<h1>我是一级标题</h1>。
小贴士：尽量靠近html中的<body>标签,越近越好，以便让搜索引擎最快的领略主题。
<img src = '***' />标签
作用：在浏览器显示图片
示例：<img src = 'image/logo.jpg' alt='**' />
常用属性：src、alt、height、width。
<a>标签
作用：使用超级链接与网络上的另一个文档相连
示例：<a href="page2.html">打开另一个页面</a>
小贴士：超链接可以是一个字，一个词，或者一个词组，也可以是一幅画像，你可以点击这些内容来跳转道新的文档或者当前文档中的某个部分。
锚点标签
作用：同一个文档中创建指向该锚（位置）的链接
示例：<a href="#duanluo">段落标签</a>，段落需先定义，<a name="duanluo>……</a>;或者<a href=page1.html#duanluo>段落标签</a>
小贴士：锚点必须先定义，再使用
无序列表<ul>
作用：此列项目使用粗体圆点（典型的小黑圆圈）进行标记
示例：<ul><li>我的文件</li></ul>
小贴士：列表项内容可以使用段落、换行符、图片、链接以及其他列表。
有序列表<ol>
表格设计
table,caption,tr,th,td,border,width等。
作用：用于表格、行、列、宽度、边框的制作
示例：制定工作计划表
合并行列：
colspan、rowspan
作用： 合并表格标题等位置
表单设计
例子：
<!DOCTYPE html>
<html>
<head>
<title>表单</title>
</head>
<body>
<form action="" method="">
<label>请输入姓名：</label>
<input type="text" name="userName" id="userName"> <br>
<!-- name通常给后台使用，允许重复，id通常给前端使用比如js，id不允许重复 -->
<label>请输入密码：</label>
<input type="password" name="" id=""> <br>
<label>再次输入密码：</label>
<input type="password" name="" id=""> <br>
<label>性别：</label>
<input type="radio" name="xb" id="" value="1"> 男
<input type="radio" name="xb" id="" value="0"> 女 <br>
<!-- 这里name属性要保持一致，以便只有一个按钮能被选中 -->
<!-- value属性传递到后台 -->
<label>兴趣爱好：</label>
<input type="checkbox" name="" id="" value="1">游泳
<input type="checkbox" name="" id="" value="2" checked="checked">看书 <br>
<label>生日：</label>
<select>
<option value="1995">1995</option>
<option value="1996" selected="selected">1996</option>
<option value="1997">1997</option>
</select> <br>
<input type="button" value="普通按钮">
<input type="submit" value="提交按钮">
</form>
<textarea rows="5" cols="30" name="" id="">请输入文字</textarea> <br>
<input type="file" > <input type="button" value="上传"><br>
<select size="4" multiple="true">
<!-- 普通列表框 -->
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
</select>
</body>
</html>
