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标签里的内容：

特殊的符号

&nbsp

<p>这是一个&nbsp;&nbsp;&nbsp;&nbsp;段落</p>：表示空格

&gt、&lt

<p>这是一个&nbsp;&nbsp;&nbsp;&nbsp;&lt;a&gt;段落</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; 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>

实现的效果：