50-Web基础-HTML

阅读量：5252 次

发布时间：2019-06-14

本文共 8899 字，大约阅读时间需要 29 分钟。

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中的常见标签：

　　2.2.2 body中的常见标签：

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

    Druid
  
         Druid
    Druid
    Druid
    Druid
    Druid

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

1 2

第一段落

第二段落

第三段落

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

1 2     第一行  
     3     这里紧跟第一行，不会换行4

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

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

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

    百度

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

它指向页面特定的部分。

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

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

1  2     第一章  
      3     第二章 4     第三章 5     
       
       6         第一章的内容 7     
     
 8     
       
       9         第二章的内容10     
     
11     
       
      12         第三章的内容13     
     
14

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

1 2 第一章

3 第二章 4 第三章 5

第一章的内容

8 9

10 第二章的内容11 12

13 第三章的内容14 15

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

1 2     3

1 2     3         4       
     5 6

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

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

　　　　<input />标签(元素):

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

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

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

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

1 2     
     
      3         
      4             这里的文本作为默认值5           
      6     
     
7

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

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

1  2     一个嵌套列表：
 3     
     
       4       
      咖啡
 5       
      茶 6         
       
         7         
        红茶
 8         
        绿茶
 9         
       
10       
11       
      牛奶
12     
     
13

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

1  2     数字列表：
 3     
     
       4      
      苹果
 5      
      香蕉
 6      
      柠檬
 7      
      桔子
 8     
     
 9 10     字母列表：
11     
     
      12      
      苹果
13      
      香蕉
14      
      柠檬
15      
      桔子
16     
     
17 18     小写字母列表：
19     
     
      20      
      苹果
21      
      香蕉
22      
      柠檬
23      
      桔子
24     
     
25 26     罗马字母列表：
27     
     
      28      
      苹果
29      
      香蕉
30      
      柠檬
31      
      桔子
32     
     
33 34     小写罗马字母列表：
35     
     
      36      
      苹果
37      
      香蕉
38      
      柠檬
39      
      桔子
40     
     
41

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

　　　　让列表元素横向排列

1  2     
      3     Title 4     12 13 14     
     
      15         
      列表内容
16         
      列表内容
17         
      列表内容
18     
     
19

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

1  2     
     
       3         
         4             
 5             
 6             
 7         
 8         
         9             
10             
11             
12         
13     
                     第一行，第一列         第一行，第二列         第一行，第三列        
                        第二行，第一列         第二行，第二列         第二行，第三列        
      
     
14     
     
      15         
        16             
17             
18             
19         
20         
        21             
22             
23             
24         
25     
                     第一行，第一列         第一行，第二列         第一行，第三列        
               第二行，第一列         第二行，第二列         第二行，第三列        
      
     
26

1  2     
     
       3         
         4             
 5             
 6             
 7             
 8         
 9         
        10             
11             
12             
13             
17         
18         
        19             
20             
21             
22             
26         
27         
        28             
29             
30             
31             
35         
36     
                     主机名         IP地址         端口号         操作        
               host1         1.1.1.1         80         14                 查看详细15                 修改16                    
               host2         2.2.2.2         80         23                 查看详细24                 修改25                    
               host3         3.3.3.3         80         32                 查看详细33                 修改34                    
      
     
37

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

1  2     
     
       3         
        4             
         5                 
 6                 
 7             
 8         
 9         
       10             
        11                 
12                 
13             
14             
        15                 
16                 
17             
18             
        19                 
20             
21             
        22                 
23                 
24             
25             
        26                 
27             
28         
29     
                     主机名         IP地址        
      
                     host1         1.1.1.1        
               host2         2.2.2.2        
               第三行占两列        
               host3占两行         3.3.3.3        
               3.3.3.3        
      
     
  
     30

主机名	IP地址
host1	1.1.1.1
host2	2.2.2.2
第三行占两列
host3占两行	3.3.3.3
3.3.3.3

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

1  2     
     
       3         
      
        4             
       登录  
        5                 
       用户名: 6                 
        7                 
       密码: 8                 
        9         
      
10         
      
       11             
       性别  
       12                 男:
       13                 女:
       14         
      
15     
     
16

3、注释

HTML语言注释用，CSS中用/*注释*/

转载于:https://www.cnblogs.com/Druidchen/p/8979156.html

你可能感兴趣的文章

wp7 使用缓存改善性能

查看>>

CS294-112 深度强化学习秋季学期（伯克利）NO.1 Introduction NO.2 Supervised learning and imitation...

查看>>

[CV] OpenCV图像处理教程- 23:像素重映射pixel remap

查看>>

竞争性排斥原理(高斯假说)

查看>>

Intellig IDEA 搭建spring boot 热部署

查看>>

MySQL 对于大表（千万级），要怎么优化呢?

Codeforces 915 G Coprime Arrays

BAPI_GOODSMVT_CANCEL物料凭证完全…

查看>>

Thinkphp 生成的验证码不显示问题解决

查看>>

Sql获取数据集中各类型中的最大值（最新值）

查看>>

Xcode：只修改 Bundle Identifier，不修改项目名

查看>>

WPF之路五：wpf 隐藏与显示 Visibility

查看>>

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！

强烈建议你试试无所不能的CHAT-GPT，快点击我

第一行，第一列	第一行，第二列	第一行，第三列
第二行，第一列	第二行，第二列	第二行，第三列

主机名	IP地址	端口号	操作
host1	1.1.1.1	80	14 查看详细15 修改16
host2	2.2.2.2	80	23 查看详细24 修改25
host3	3.3.3.3	80	32 查看详细33 修改34