50-Web基础-HTML

1、什么是HTML？

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页，Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

2、标签

2.1 基础概念

  • HTML标签是HTML语言中最基本的单位，标签不区分大小写，由尖括号包裹关键字构成，例如<html>test</html> 叫做html标签，<div>test</div>叫做div标签，以此类推。
  • 类似<meta>这种就叫做自闭合标签，类似<a></a>就叫做主动闭合标签。
  • 标签可以嵌套，例如<div><div></div></div>。
  • 标签存在的意义：定位操作、CSS操作、让JS操作更简单。
  • 所有的标签分为块级标签和行内标签(又叫做内联标签)
    • 块级标签：占满一行，如常见的H系列标签，P标签，div标签。
    • 行内标签(内联标签)：只占元素长度大小，如span标签。

2.2 常用的标签

　　<!DOCTYPE> 定义遵循的文档类型，如<!DOCTYPE html> 则代表遵循html文档规范。

　　2.2.1 head中的常见标签：

 1 <head>
 2     <meta charset="UTF-8">  <!-- meta为自闭合标签， charset属性定义字符编码 -->
 3     <meta http-equiv="Refresh" content="3">  <!-- 3秒自动刷新 -->
 4     <meta http_equiv="Refresh" content="3;Url=http://edu.51cto.com">  <!-- 3秒自动跳转百度 -->
 5     <meta name="keywords" content="吃鸡,关键字2,关键字3">  <!-- 给搜索引擎用的关键字 -->
 6     <meta name="description" content="网站描述信息">  <!-- 描述当前网站是干嘛的 -->
 7     <meta http_equiv="X-UA-Compatible" content="IE=EmulateIE8;IE=IE7">  <!-- 主动兼容IE8和IE7 -->
 8     <title>标签</title>  <!-- head内部的标签只有title可见 -->
 9     <link rel="shortcut icon" href="image/favicon.ico">  <!-- 小图标显示 -->
10 </head>

　　2.2.2 body中的常见标签：

　　2.2.2.1 <h>-</h>标签：h标签用来定义标题

<body>
    <h1>Druid</h1>  <!-- h标签用来定义标题，字体从上至下依次缩小 -->
    <h2>Druid</h2>
    <h3>Druid</h3>
    <h4>Druid</h4>
    <h5>Druid</h5>
    <h6>Druid</h6>
</body>　　　

　　　　2.2.2.2 <p>-</p>标签：p标签用来定义段落

1 <body>
2     <p>第一段落</p>  <!-- p标签用来控制段落,段落间有间距 -->
3     <p>第二段落</p>
4     <p>第三段落</p>
5 </body>

2.2.2.3 <span>-</span>标签：span标签为白板标签(行内标签)

1 <body>
2     <span>第一行</span>  <!-- 行内标签（内联标签） -->
3     <span>这里紧跟第一行，不会换行</span>
4 </body>

2.2.2.4 <div>-</div>标签：div标签为白板标签(块级标签)

1 <body>
2      <div>第一行</div>  <!-- 块级标签 -->
3      <div>这里就要换行了</div>
4 </body>

2.2.2.5 <a>-</a>标签：a标签用来定义链接和锚

用来定义链接：单击文字即可跳转至链接

<body>
    <a href="http://www.baidu.com" target="_blank">百度</a>  <!-- target="_blank"在新的标签页打开百度，若不加则在原页打开 -->
</body>

用来定义锚：作为锚点，单击文字即可跳转至对应的ID处。什么是锚？通俗的讲，我们想要让页面跳转到的位置，就是锚点。锚点是一种超链接，只不过它是页面内部的超链接，

它指向页面特定的部分。

要使用锚点定位，需要两个部分组成：1、锚点； 2、指向锚点的链接

方法一：使用id属性作为锚点，a标签作为指向锚记的链接，俗称“id”定位，代码如下所示：

 1 <body>
 2     <a href="#1">第一章</a>  <!-- #为关键字符，创建指向锚点的链接，id后面的字符要和跳转地方id属性值保持一致 -->
 3     <a href="#2">第二章</a>
 4     <a href="#c">第三章</a>
 5     <div style="height: 600px;" id="1">  <!-- 创建的锚点 -->
 6         第一章的内容
 7     </div>
 8     <div style="height: 600px;" id="2">  <!-- 创建的锚点 -->
 9         第二章的内容
10     </div>
11     <div style="height: 600px;" id="c">  <!-- 创建的锚点 -->
12         第三章的内容
13     </div>
14 </body>

　　　　方法二：既使用a标签的name属性作为锚点，又使用a标签作为指向锚点的链接，俗称“name”定位，代码如下所示：

 1 <body>
 2     <a href="#1">第一章</a>  <!-- #为关键字符，创建指向锚的链接，#后面的字符要和跳转地方name属性值保持一致 -->
 3     <a href="#2">第二章</a>
 4     <a href="#c">第三章</a>
 5     <p></p>
 6     <a style="display:inline-block; height: 600px; width: 100%" name="1">  <!-- 创建锚点;inline-block为行内块，因此需要设置宽度 -->
 7         <p>第一章的内容</p>
 8     </a>
 9     <a style="display:block; height: 600px;" name="2">  <!-- 创建锚点;block为块元素，因此不需要设置宽度 -->
10         第二章的内容
11     </a>
12     <a style="display:inline-block; height: 600px; width: 100%" name="c">  <!-- 创建锚点 -->
13         第三章的内容
14     </a>
15 </body>

2.2.2.6 <img />标签：img标签用来定义图片

1 <body>
2     <img src="1.png" />
3 </body>
1 <body>
2     <a href="http://www.baidu.com">
3         <img src="1.png" title="图片" style="height: 300px;width: 300px" alt="图片"/>
4     </a>  <!-- 单击图片直接跳转至指定url；title属性用于鼠标悬浮显示信息；alt属性在图片不能显示的时候显示对应的文字信息 -->
5 
6 </body>　　　

　　　　2.2.2.7 <br />标签：<br /> 元素是一个空的 HTML 元素，用来换行

1 <body>
2     <div>换行<br />测试</div>
3 </body>

2.2.2.8 <form> </form>标签：HTML表单用于收集用户输入，form标签用来定义HTML表单。HTML表单又包含表单元素：input、select和textarea。

　　　　<input />标签(元素):

1 <body>
2     <form action="" method="">  <!-- form为表单标签,用来向后台提交数据;action属性用来指定服务器url;method用来指定get或者post -->
3         <input type="text" />  <!-- 单行文本输入框 -->
4         <br />
5         <input type="password" />  <!-- 会隐藏真实字符 -->
6         <input type="button" value="没用" />  <!-- button默认情况下无用 -->
7         <input type="submit" value="登录" />  <!-- submit才能提交表单 -->
8     </form>
9 </body>　
 1 <body>
 2     <form action="http://localhost:8888/index" method="post">  <!-- get会将输入内容拼接成url提交给后台，post会将内容放到数据中提交给后台 -->
 3         <input type="text" name="user" />  <!-- name属性用来定义字典的key -->
 4         <br />
 5         <input type="password" name="pwd" />
 6         <!-- 打包成字典{"user": "用户输入的用户名", "pwd": "用户输入的密码"}发给后台 -->
 7         <input type="button" value="没用" />
 8         <input type="submit" value="登录" />
 9     </form>
10 </body>
<body>
    <form enctype="multipart/form-data">  <!-- enctype="multipart/form-data"该属性用来上传文件 -->
        <div>
            用户名:<input type="text" name="user" />
            <p>请选择性别:</p>
                男:<input type="radio" name="sex" value="1" checked="checked" />  <!-- radio为单选框，如果没有name或者name不相同，那么就可以多选 -->
                女:<input type="radio" name="sex" value="2" />  <!-- 这里的value用于给后台传数据;checked用来设置默认值 -->
            <p>爱好:</p>
                篮球:<input type="checkbox" name="favor" value="1" />  <!-- checkbox为复选框 -->
                足球:<input type="checkbox" name="favor" value="2" />  <!-- 这里的name用于后台批量获取数据 -->
                羽毛球:<input type="checkbox" name="favor" value="3" />
                台球:<input type="checkbox" name="favor" value="4" />
                网球:<input type="checkbox" name="favor" value="5" />
            <p>技能:</p>
                写代码:<input type="checkbox" name="skill" value="1" checked="checked" />
                修车:<input type="checkbox" name="skill" value="2" />
            <p>上传文件:</p>
                <input type="file" name="filename" />  <!-- type="file"用来上传文件，真实的传文件依赖form表单属性enctype -->

        </div>
        <input type="reset" value="重置" />  <!-- 重置除默认值以外的值 -->
        <input type="submit" value="提交" />
    </form>
</body>　　　

<select> </select>标签(元素)：select标签定义下拉列表，option标签定义待选项，列表通常会把首个选项显示为被选选项，能够通过添加 selected 属性来定义预定义选项。

　　　　value属性规定在表单被提交时被发送到服务器的值。<option> 与 </option> 之间的值是浏览器显示在下拉列表中的内容，而value属性中的值是表单被提交时被发送到服务器的值。

　　　　如果没有指定value属性，<option> 与 </option> 之间的值则会在表单被提交时发送到服务器。

 1 <body>
 2     <form>
 3         <div>
 4             <select name="city">
 5                 <option value="1">北京</option>
 6                 <option value="2">上海</option>
 7                 <option value="3">广东</option>
 8                 <option value="4">深圳</option>
 9                 <option value="5" selected="selected">成都</option>
10             </select>  <!-- selected="selected"为默认值 -->
11             <input type="submit" value="提交" />
12         </div>
13         <div>
14             <select name="city" size="10">
15                 <option value="1">北京</option>
16                 <option value="2">上海</option>
17                 <option value="3">广东</option>
18                 <option value="4">深圳</option>
19                 <option value="5" selected="selected">成都</option>
20             </select>  <!-- size用来设置显示的行数 -->
21             <input type="submit" value="提交" />
22         </div>
23         <div>
24             <select name="city" size="10" multiple="multiple">
25                 <option value="1">北京</option>
26                 <option value="2">上海</option>
27                 <option value="3">广东</option>
28                 <option value="4">深圳</option>
29                 <option value="5" selected="selected">成都</option>
30             </select>  <!-- multiple属性用于多选 -->
31             <input type="submit" value="提交" />
32         </div>
33         <div>
34             <select name="city">
35                 <optgroup label="北京市">
36                     <option value="1" selected="selected">北京</option>
37                 </optgroup>
38                 <optgroup label="四川省" />
39                     <option value="2" selected="selected">成都</option>
40                     <option value="3">绵阳</option>
41                 </optgroup>
42                 <optgroup label="河北省" />
43                     <option value="4" selected="selected">石家庄</option>
44                     <option value="5">保定</option>
45                 </optgroup>
46             </select>  <!-- optgroup属性用于组合相关选项 -->
47             <input type="submit" value="提交" />
48         </div>
49     </form>
50 </body>

<label></label>标签： 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。

 1 <html>
 2     <body>
 3 
 4         <p>请点击文本标记之一，就可以触发相关控件：</p>
 5 
 6         <form>
 7             <label for="male">Male</label>
 8            <input type="radio" name="sex" id="male" />
 9             <br />
10             <label for="female">Female</label>
11             <input type="radio" name="sex" id="female" />
12         </form>
13 
14     </body>
15 </html>

<textarea> </textarea>标签(元素)：textarea标签用来定义多行输入

1 <body>
2     <div>
3         <textarea name="key">
4             这里的文本作为默认值
5         </textarea>  <!-- textarea标签用来定义多行输入，name还是作为Key -->
6     </div>
7 </body>

　　　　2.2.2.9 HTML列表：HTML支持有序、无序列表和定义列表　

　　　　无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

1 <body>
2     <ul>
3         <li>第一行</li>
4         <li>第二行</li>
5         <li>第三行</li>
6     </ul>  <!-- ul样式为圆点 -->
7 </body>　　　　
 1 <body>
 2     <h1>一个嵌套列表：</h1>
 3     <ul>
 4       <li>咖啡</li>
 5       <li>茶
 6         <ul>
 7         <li>红茶</li>
 8         <li>绿茶</li>
 9         </ul>
10       </li>
11       <li>牛奶</li>
12     </ul>
13 </body>

　　　　有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

1 <body>
2     <ol>
3         <li>第一行</li>
4         <li>第二行</li>
5         <li>第三行</li>
6     </ol>  <!-- ol样式为数字 -->
7 </body>　　　
 1 <body>
 2     <h1>数字列表：</h1>
 3     <ol>
 4      <li>苹果</li>
 5      <li>香蕉</li>
 6      <li>柠檬</li>
 7      <li>桔子</li>
 8     </ol>
 9 
10     <h1>字母列表：</h1>
11     <ol type="A">
12      <li>苹果</li>
13      <li>香蕉</li>
14      <li>柠檬</li>
15      <li>桔子</li>
16     </ol>
17 
18     <h1>小写字母列表：</h1>
19     <ol type="a">
20      <li>苹果</li>
21      <li>香蕉</li>
22      <li>柠檬</li>
23      <li>桔子</li>
24     </ol>
25 
26     <h1>罗马字母列表：</h1>
27     <ol type="I">
28      <li>苹果</li>
29      <li>香蕉</li>
30      <li>柠檬</li>
31      <li>桔子</li>
32     </ol>
33 
34     <h1>小写罗马字母列表：</h1>
35     <ol type="i">
36      <li>苹果</li>
37      <li>香蕉</li>
38      <li>柠檬</li>
39      <li>桔子</li>
40     </ol>
41 </body>

　　　　自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

 1 <body>
 2     <dl>
 3         <dt>标题行</dt>
 4         <dd>缩进行1</dd>
 5         <dd>缩进行2</dd>
 6         <dt>标题行</dt>
 7         <dd>缩进行1</dd>
 8         <dd>缩进行2</dd>
 9     </dl>
10 </body>

　　　　让列表元素横向排列

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         li{
 6         width:100px;
 7         height:20px;
 8         float:left;
 9         list-style: none;  <!-- 不显式任何列表符号 -->
10         }
11     </style>
12 </head>
13 <body>
14     <ul >
15         <li>列表内容</li>
16         <li>列表内容</li>
17         <li>列表内容</li>
18     </ul>
19 </body>

 

　　　　2.2.2.10：table表格标签，用来定义HTML表格

 1 <body>
 2     <table>
 3         <tr>
 4             <td>第一行，第一列</td>
 5             <td>第一行，第二列</td>
 6             <td>第一行，第三列</td>
 7         </tr>  <!-- tr表示一行  td表示一列-->
 8         <tr>
 9             <td>第二行，第一列</td>
10             <td>第二行，第二列</td>
11             <td>第二行，第三列</td>
12         </tr>
13     </table>
14     <table border="1">
15         <tr>
16             <td>第一行，第一列</td>
17             <td>第一行，第二列</td>
18             <td>第一行，第三列</td>
19         </tr>
20         <tr>
21             <td>第二行，第一列</td>
22             <td>第二行，第二列</td>
23             <td>第二行，第三列</td>
24         </tr>
25     </table>
26 </body>
 1 <body>
 2     <table border="1">
 3         <tr>
 4             <td>主机名</td>
 5             <td>IP地址</td>
 6             <td>端口号</td>
 7             <td>操作</td>
 8         </tr>
 9         <tr>
10             <td>host1</td>
11             <td>1.1.1.1</td>
12             <td>80</td>
13             <td>
14                 <a href="http://www.baidu.com">查看详细</a>
15                 <a href="#">修改</a>
16             </td>
17         </tr>
18         <tr>
19             <td>host2</td>
20             <td>2.2.2.2</td>
21             <td>80</td>
22             <td>
23                 <a href="http://www.baidu.com">查看详细</a>
24                 <a href="#">修改</a>
25             </td>
26         </tr>
27         <tr>
28             <td>host3</td>
29             <td>3.3.3.3</td>
30             <td>80</td>
31             <td>
32                 <a href="http://www.baidu.com">查看详细</a>
33                 <a href="#">修改</a>
34             </td>
35         </tr>
36     </table>
37 </body>

　　　　下面的写法才是最标准的：

 1 <body>
 2     <table border="1">
 3         <thead>
 4             <tr>
 5                 <th>主机名</th>
 6                 <th>IP地址</th>
 7             </tr>
 8         </thead>
 9         <tbody>
10             <tr>
11                 <td>host1</td>
12                 <td>1.1.1.1</td>
13             </tr>
14             <tr>
15                 <td>host2</td>
16                 <td>2.2.2.2</td>
17             </tr>
18             <tr>
19                 <td colspan="2">第三行占两列</td>
20             </tr>
21             <tr>
22                 <td rowspan="2">host3占两行</td>
23                 <td>3.3.3.3</td>
24             </tr>
25             <tr>
26                 <td>3.3.3.3</td>
27             </tr>
28         </tbody>
29     </table>  <!-- thead为标准的表头,tbody为标准的表内容;colspan合并列,rowspan合并行 -->
30 </body>

2.2.2.11：fieldset标签用来对表单元素进行分组

 1 <body>
 2     <form>
 3         <fieldset>
 4             <legend>登录</legend>  <!-- 该标签用来设置框上的文字 -->
 5                 <label for="username">用户名:</label>
 6                 <input type="text" name="user" id="username" />
 7                 <label for="password">密码:</label>
 8                 <input type="password" name="pwd" id="password" />
 9         </fieldset>
10         <fieldset>
11             <legend>性别</legend>  <!-- 该标签用来设置框上的文字 -->
12                 男:<input type="radio" name="sex" value="1" checked="checked" />
13                 女:<input type="radio" name="sex" value="2" />
14         </fieldset>
15     </form>
16 </body>

 

3、注释

HTML语言注释用<!-- 注释 -->，CSS中用/*注释*/

 

 

posted @ 2018-05-02 10:45  Druid_Py  阅读(259)  评论(0)  编辑  收藏  举报