Web 开发基础之Html
1、一套规则，浏览器认识的规则。
2、只能有一个html标签、head标签、body标签
3、在head标签里写的所有标签内容是看不见的，除了title标签
4、在html里的注释：< -- ! 注释的内容 -- >
标签分类
- 自闭合标签：如meta标签
- 主动闭合标签
head标签里的内容：
html 标题
<title>test_title</title>
标题旁边的图标
<link rel="shortcut icon" href="11.ico"> ：shortcut icon是固定内容，这样就表示设置图标
<link rel="stylesheet" type="text/css" href="css/common.css" >：stylesheet表示要设置css
编码
<meta charset="UTF-8">：用于定义编码
刷新
<meta http-equiv="refresh" Content="3">：默认3秒钟刷新一次页面
跳转
<meta http-equiv="refresh" Content="3; Url=http://www.baidu.com" />： 默认3秒钟跳转到百度
所以这里的meta主要的两个功能就是刷新和跳转
关键字
<meta name="keywords" content="linux，python,运维">：用来做搜索引擎，关键字搜索
描述
<meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片，汽车价格大全 "/>：用来描述网站，如网站是做什么用的
兼容IE
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;IE=IE7" />
body标签里的内容：
特殊的符号
 
<p>这是一个 段落</p>：表示空格
>、<
<p>这是一个 <a>段落</p>：表示大于、小于号
h标签：表示标题，从<h1> - <h6>。<h1>定义最大的标题，<h6>定义最小的标题
<h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6>
p标签：表示段落，默认段落之间是有间隔的
<p>这是一个段落</p> <p>这是另一个段落</p>
br标签：表示换行。
<p>这是一个<br />段落</p> <p>这是另一个<br/><br/>段落</p>
span标签：空白标签
<span>hello</span> <span>hello</span> <span>hello</span> <span>hello</span>
小总结：
所有的标签分为：
块级标签：div标签（白板）、h标签（加大加粗）、p标签（段落和段落之间有间距）
行内标签（内联标签）：span标签（白板）
div标签（用的最多的标签）
<div>1</div> <div>2</div> <div>3</div>
标签之间可以嵌套
标签存在的意义：定位操作，js、css操作
ps：chorme审查元素的使用：1.可定位、找到某个元素 2.可查看样式
input系列
<form action="http://localhost:8888/index" method="POST"> <!--要想往后台提交数据，就要用form标签。action属性规定 当提交表单时，向何处发送表单数据。method属性规定 如何发送表单数据,如果值为GET 表示把数据先拼接到URL上再提交过去，值为POST 表示把数据放到body（内容）里提交过去 --> <input type="text" name="user"> <!--name属性，value可以设置默认值 --> <input type="password" name="pwd"> <!--name属性，value可以设置默认值 --> <input type="submit" value="提交"> <input type="button" value="按钮"> </form>
单选框（input系列）
<input type="radio" value="gender"> ：单选框具有 value、checked="checked"表示默认被选中、name属性（name相同则互斥）
<p>请选择性别</p> 男：<input type="radio" name="gender" value="1"> 女：<input type="radio" name="gender" value="2"> <input type="submit" value="提交">
复选框（input系列）
<input type="checkbox" name="favor" value="1">：复选框 具有value,、checked="checked"表示默认被选中、name属性（批量获取数据）
<p>爱好</p> 足球：<input type="checkbox" name="favor" value="1"> 篮球：<input type="checkbox" name="favor" value="2"> 乒乓球：<input type="checkbox" name="favor" value="3"> 网球：<input type="checkbox" name="favor" value="4"> <input type="submit" value="提交">
上传文件与重置（input系列）
<form enctype="multipart/form-data"> <p>上传文件</p> <input type="file" name="fname"> <!--依赖form表单的一个属性：enctype="multipart/form-data" --> <input type="submit" value="提交"> <input type="reset" name="重置"> </form>
大输入框 textarea
<textarea name="member">默认值</textarea> <input type="submit" value="提交">
select标签（下拉框）
name,内部option value提交到后台
size用于显示多个，如果不写则默认显示一个。select="selected"表示默认选择
<select name="city" size="2"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">南京</option> <option value="4">成都</option> <option value="5">重庆</option> <input type="submit" value="提交"> </select>
上述只能单选，下面方式实现多选
size用于显示多个，multiple用于多选
<select name="city" size="10" multiple="multiple"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">南京</option> <option value="4">成都</option> <option value="5">重庆</option> </select>
按住Ctrl键可以多选，效果如下：
select 标签延伸
<select name="city" size="2" multiple="multiple"> <optgroup lable="河北省"> <option value="1">石家庄</option> <option value="2">邯郸</option> </optgroup> <optgroup lable="浙江省"> <option value="1">舟山</option> <option value="2">宁波</option> </optgroup> </select>
a标签
跳转：
<a href="http://www.baidu.com">百度</a> <!-- 这种默认情况下是在当前标签打开此网页 --> <a href="http://www.baidu.com" target="_blank">百度</a> <!--这样就会在一个新的标签打开网页 -->
锚：实现点击目录跳转到相应的内容，实现的方式是通过给标签设置不同的id，然后在a标签的href属性设置#id
关于锚的一个实现例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <a href="#i4">第四章</a> <div id="i1" style="height: 600px">第一章的内容</div> <div id="i2" style="height: 600px">第二章的内容</div> <div id="i3" style="height: 600px">第三章的内容</div> <div id="i4" style="height: 600px">第四章的内容</div> </body> </html>
实现的效果就是通过点击相应的章节目录跳转到相应的内容，如下：
img标签
<img src="qq_test.png" style="height: 200px;width: 200px;">
如上就可以在页面上显示图片
如果想要实现点击图片跳转，通过a标签实现：
<a href="http://www.baidu.com"> <img src="qq_test.png"> </a>
如果图片不存在了，在图片位置显示文字，通过alt参数实现：
<a href="http://www.baidu.com"> <img src="../qq_test.png" alt="图片1" > </a>
效果如下：
如果想要鼠标放在图片上显示内容，通过title参数实现：
<a href="http://www.baidu.com"> <img src="../qq_test.png" alt="图片1" title="图片1" > </a>
列表标签
<ul>
<li>苹果</li>
<li>三星</li>
<li>诺基亚</li>
</ul>
效果图如下：
<ol>
<li>香蕉</li>
<li>苹果</li>
<li>桃子</li>
</ol>
效果图如下：
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dd>梨</dd>
<dt>蔬菜</dt>
<dd>白菜</dd>
<dd>萝卜</dd>
<dd>西红柿</dd>
</dl>
效果图如下：
表格标签
代码例子：
<table border="1"> <tr> <td>主机名</td> <td>端口</td> <td>操作</td> </tr> <tr> <td>192.168.1.1</td> <td>80</td> <td>
<a href="index.html">查看详细</a>
<a href="index2.html">修改</a>
</td> </tr> <tr> <td>192.168.1.2</td> <td>81</td> <td>添加</td> </tr> </table>
实现效果：
但是上面的表格不是特别规范，下面是规范的表格写法：
<table border="1"> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> <th>表头4</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table>
这里的thead 专门用于写表头，th用于写表头中的具体信息
实现效果：
列表里的合并单元格
通过colspan="2"参数实现横向合并
通过rowspan="2"实现纵向合并
lable标签（用于点击文字，使得关联的标签获取光标）
通过和input标签搭配使用
<label for="username">用户名：</label> <input id="username" type="text" name="user" />
鼠标点击用户名输入框会自动获取光标，效果图如下：
fieldset标签
<fieldset>
<legend>登录</legend>
<label for="username">用户名</label>
<input id="username" type="text" name="user" />
<br />
<label for="password">密码</label>
<input id="password" type="password" name="pwd" />
</fieldset>
实现的效果：
