1、一套规则，浏览器认识的规则
2、开发者：
3、学习HTML规则
4、开发后台程序
- 写html文件（充当模板的作用）*****
- 数据库获取数据，然后替换到HTML文件的指定位置（web框架）
4.1本地测试
- 找到文件路径，直接浏览器打开
- pychatm打开测试
4.2编写HTML文件
- doctype对应关系
- HTML标签，标签内部可以写属性
- 注释：
4.3标签分类
4.3.1自闭和标签
- 页面编码
#### 4.3.2主动闭合标签
5、head标签中
5.1 meta编码，跳转，关键词，描述，IE兼容
- 自动刷新
- 自动跳转
- 关键词
- 描述
- 以新的IE9模式显示网页
5.2 title标签
5.3 link标签
5.3.1 icon图标
5.4style标签
5.5script标签
6、body标签
6.1 图标
空格 大于号>小于号<6.2 p标签和br标签
<p>标签：段落,段落之间存在一个空行<br/>标签：换行,仍在同一个段落6.3 总结
6.3.1 所有的标签分为：块级标签，行内标签
块级标签：H系列（加大加粗），p系列（段落和段落之间有间距），div（白板）
<h1>1</h1><h2>2</h2><h3>3</h3><h4>4</h4><h5>5</h5><h6>6</h6>行内标签：span（白板）
<span>22</span>6.3.2 标签之间可以嵌套
6.3.3 标签存在的意义，css操作，js操作
6.4 div标签
是白板，是块级标签。
6.5 chrome审查元素的使用
定位
查看样式
7、表单
7.1 input系列
<form action="http://localhost:8080/index" method="POST"> ???<input type=‘test‘ name=‘user‘ value=‘zhaofan‘/> value 默认值 ???<input type=‘test‘ name=‘email value=‘122@126.com‘‘/> ???<input type=‘password‘ name=‘pwd‘/> ???<input type=‘button‘ value=‘登录‘/> ???<input type=‘submit‘ value=‘提交‘/> </form>7.2 表单组件
7.2.1 单选
name相同则互斥,checked="checked"默认被选中<p>请选择性别：</p>男：<input type="radio" name="gender value=‘1‘ checked="checked"/>女：<input type="radio" name="gender value=‘2‘/>7.2.2 复选框
name属性，批量获取数据，checked="checked"默认被选中<p>爱好</p>篮球：<input type="checkbox" name="favor" ?value="3" checked="checked" />足球：<input type="checkbox" name="favor" ?value="4" /><p>技能</p>撩妹：<input type="checkbox" name="skill" ?value="5" checked="checked" />写代码：<input type="checkbox" name="skill" ?value="6" />7.2.3 上传文件
依赖表单的一个属性enctype="multipart/form-data"<form enctype="multipart/form-data"> ???<p>上传文件：<input type=‘file‘ name="fname"></p></form>7.2.4 重置
<input type=‘reset‘ value="重置">7.2.5 多行文本
<textarea name="meno">默认值</textarea>7.2.6 下拉框
单选selected="selected"默认选中.默认size="1"显示1个.<select name="city" size="1"> ???<option value="1">北京</option> ???<option value="2" selected="selected">上海</option> ???<option value="3">广州</option> ???<option value="4">南京</option></select>多选<select multiple="multiple" name="city" size="5"> ???<option value="1">北京</option> ???<option value="2" selected="selected">上海</option> ???<option value="3">广州</option> ???<option value="4">南京</option></select>分组<select name="city" size="1"> ???<optgroup label="中国"> ???????<option value="3">广州</option> ???????<option value="1">北京</option> ???????<option value="2" selected="selected">上海</option> ???????<option value="4">南京</option> ???</optgroup> ???<optgroup label="美国"> ???????<option value="1">纽约</option> ???????<option value="2">华盛顿</option> ???</optgroup></select>8 超链接
8.1 跳转
target属性决定如何跳转网页<a href="http://www.baidu.com" target="_blank">baidu</a>8.2 锚点
id是不能重复的,name可以重复
href="#某个标签的id" <a href="#i1">第1张</a><a href="#i2">第2张</a><a href="#i3">第3张</a><a href="#i4">第4张</a><div style="height:600px" id="i1">第一张的内容</div><div style="height:600px" id="i2">第2张的内容</div><div style="height:600px" id="i3">第3张的内容</div><div style="height:600px" id="i4">第4张的内容</div>9 图片
src
alt
title
<img src="1.jpg" style="height:200px;width:200px" title="大美女" alt="加载失败..." ?/>10 列表
10.1 有序列表
<ol> ???<li>a</li> ???<li>a</li> ???<li>a</li> ???<li>a</li></ol>10.2 无序列表
<ul> ???<li>a</li> ???<li>a</li> ???<li>a</li> ???<li>a</li></ul>10.3 自定义列表
<dl> ???<dt>aaa</dt> ???????<dd>111</dd> ???????<dd>222</dd> ???????<dd>333</dd> ???<dt>bbb</dt> ???????<dd>111</dd> ???????<dd>222</dd> ???????<dd>333</dd></dl>11 表格
11.1 格式
简单的
<table border="1"> ???<tr> ???????<td>11</td> ???????<td>12</td> ???????<td>13</td> ???</tr> ???<tr> ???????<td>21</td> ???????<td>22</td> ???????<td>23</td> ???</tr></table>标准的
<table border="1"> ???<thead> ???????<th>11</th> ???????<th>12</th> ???????<th>13</th> ???</thead> ???<tbody> ???????<tr> ???????????<td>21</td> ???????????<td>22</td> ???????????<td>23</td> ???????</tr> ???</tbody></table>11.2 合并
横向合并 ?同一行colspan<table border="1"> ???<thead> ???????<th>11</th> ???????<th>12</th> ???????<th>13</th> ???????<th>11</th> ???????<th>12</th> ???????<th>13</th> ???</thead> ???<tbody> ???????<tr> ???????????<td>21</td> ???????????<td colspan="4">22</td> ???????????<td>23</td> ???????</tr> ???</tbody></table>纵向合并 同一列rowspan<table border="1"> ???<thead> ???????<th>11</th> ???????<th>12</th> ???????<th>13</th> ???</thead> ???<tbody> ???????<tr> ???????????<td rowspan="2">21</td> ???????????<td>22</td> ???????????<td>23</td> ???????</tr> ???????<tr> ????????????<td>22</td> ???????????<td>23</td> ???????</tr> ???</tbody></table>11.3 label标签
用于点击文件,使得关联的标签获取光标通过for和input的id关联 ???<label for="username" >用户名:</label><input id="username" type="text" name="user" />11.4 fieldset标签
<fieldset> ???<legend>登录</legend> ???<label for="username" >用户名:</label> ???<input id="username" type="text" name="user" /> ???<br/> ???<label for="password" >密码:</label> ???<input id="password" type="text" name="pwd" /></fieldset>HTML基础
原文地址：https://www.cnblogs.com/chenych/p/8846770.html