发表更新前端 / HTML8 分钟读完 (大约1191个字)

html

超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

html文档基本格式

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html> <!--声明html5文档 -->
<html lang="en"> <!-- 声明语言 -->
<head>
    <!-- 声明字符集 -->
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html  >

基本标签

序号 标签 解释
1 html 定义HTML文档
2 <body> 定义文档的主体
3 <h1>-<h6> 定义文档中的标题
4 <hr> 定义水平线
5 <!----> 定义注释
6 <p> 段落
7 <br> 换行
8 <img> 图像

文本格式化

HTML 文本格式化 | 菜鸟教程 (runoob.com)

链接标签

1
<a href="超链接地址" target="_self当前网页打开 _blank新建标签打开" ></a>

  1. 外部标签

  2. 内部标签

  3. 空标签

  4. 下载标签

    1
    <a href="document.pdf" download>下载文档</a>

  5. 网页元素标签

  6. 锚点标签

    1
    2
    <a href="two">跳转到网页的第二段</a>
    <h1 id="two">网页第二段文字</h1>

  7. 从另一个网页跳转到tips

    1
    2
    3
    <a id="tips">有用的提示部分</a>
    <a href="https://www.runoob.com/html/html-links.html#tips">
    访问有用的提示部分</a>

头部标签

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

<title>:定义文档的标题

<base>:标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

<link>:标签通常用于链接到样式表

<style>:元素中你也可以直接添加样式来渲染 HTML 文档

<meta>:标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。

1
2
3
4
5
搜索引擎定义关键词
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

网页描述内容
<meta name="description" content="免费 Web & 编程 教程">

<script>:标签用于加载脚本文件

表格标签

1
2
3
4
5
6
7
8
9
10
11
12
<table>  <!-- 表格标签 -->
  <thead>
  	<tr>
    	<th>表头便签</th>
  	</tr>
  </thead>
  <tbody>
    <tr> <!-- 行标签-->
        <td></td> <!-- 单元格标签 -->
    </tr>
  </tbody>
</table>

表格属性

表格属性 描述
boder 边框
align 对齐方式
cellpadding 边框和内容之间的间距
cellpacking 单元格之间的空白
width 表格的宽度

合并单元格（实际是设置单元格的宽度长度）

  • 跨行合并单元格 rowspan

  • 跨列合并单元格 colspan

    合并之后的表格

    代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <table align="center" border="2" >
          <thead >
              <tr>
                  <th>a</th>
                  <!-- 第一行的第二个单元格的宽度为2 -->
                  <th colspan="2">b</th> 
              </tr>
          </thead>
          <tbody >
          <tr>
              <!-- 第一列的第二个单元格的长度为2 -->
              <td rowspan="2">1</td>
              <td>2</td>
              <td>3</td>
          </tr>
          <tr>
              <td>2</td>
              <td>3</td>
          </tr>
          </tbody>
      </table>

HTML区块

HTML 区块 | 菜鸟教程 (runoob.com)

1
2
<div></div> division分割 大盒子 一个占一行
<span></span> span跨度 小盒子 一行可以放多个span

列表标签

  • 无序列表
  • 有序列表
  • 自定义列表
1
2
3
4
5
6
<!-- 无序列表 -->
<ul>
  <!-- ul里只可以嵌套li元素 li中可以嵌套其他元素 -->
  <li>列表项</li>
  <li></li>
</ul>
1
2
3
4
5
6
<!-- 有序列表 -->
<ol>
  <!-- ol里只可以嵌套li元素 li中可以嵌套其他元素 -->
  <li>列表项</li>
  <li></li>
</ol>
1
2
3
4
5
<!-- 自定义列表 -->
<dl>
  <dt>名词</dt>
  <dd>名词解释</ddd>
</dl>

表单标签

表单域

1
2
3
<form action = "url" method = "提交方式" name = "表单域名称">
  表单控件
</form>

常用属性

属性 属性值 作用
action url地址 指定接受处理表单数据的服务器程序的地址
method get/post 设置表单提交方式
name 名称 表单名称。区分一个页面中的多个表单域

表单元素

1
<input type = ""/> type属性设置不同可以用来指定不同的空间类型

属性

属性值 描述
text 单行输入字段，默认宽度为20
submit 定义提交按钮，提交按钮会把表单中数据发送到服务端
password 密码字段，输入的字符被隐藏
radio 定义单选按钮
checkbox 定义复选框
Button 定义可点击按钮（用于通过javaScript启动脚本）
file 供上传文件
image 上传图像
reset 重置按钮，恢复表单默认状态
hidden 隐藏输入字段

标签属性

属性 属性值 描述
name 自定义 input元素的名称
value 自定义 input的值
checked checke 默认选中
maxlength 正整数 输入字符的最大长度

例子

1
2
3
4
5
<form align = "center"  >
    用户： eat <input type="checkbox" name="hobby" checked = "checked" value = "eat">
                 sleep <input type="checkbox" name="hobby" value = "sleep">
                 jump <input type="checkbox" name="hobby"  value="jump">
         </form>

image-20230131181032451

Label标签

标签用于绑定一个表单元素，点击lable中文本的时候，浏览器自动将光标转到对应的表单元素上，增加用户体验

Label标签

下拉表单

1
2
3
4
5
6
7
<select>
  <option>选项</option>
  <option>选项</option>
  <option>选项</option>
  <option>选项</option>
  <option>选项</option>
</select>

文本域元素（留言评论）

1
2
<textarea cols = "50" rows= "5">文本内容</textarea>
<!-- 一般使用css来控制文本域的大小 -->

image-20230201170540811

CSS样式表

  • 内联样式
  • 内联样式表
  • 外联样式表

阶段测试

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=`, initial-scale=1.0">
    <title>网站标题</title>
</head>
<body>
    <h4>青春不再</h4>
    <table width = '500' border="1">
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex"> 男
                <input type="radio" name="sex"> 女
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日:</td>
            <td>
                <select name="" id="">
                    <option value="">--请选择年份--</option>
                    <option value="">2001</option>
                    <option value="">2002</option>
                    <option value="">2003</option>
                </select>
                <select name="" id="">
                    <option value="">--请选择月份--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                </select>
                <select name="" id="">
                    <option value="">--请选择日期--</option>
                    <option value="">1</option>
                    <option value="">2</option>
                    <option value="">3</option>
                </select>
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="杭州"></td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况</td>
            <td><input type="radio" name="marry" id="yihun"> <label for="yihun">已婚 </label>
                <input type="radio" name="marry" id="weihun"> <label for="weihun">未婚 </label>
            </td>
        </tr>
        <!-- 第武行 -->
        <tr>
            <td>学历</td>
            <td><input type="text" value="博士"></td>
        </tr>
        <!-- 第六行 -->
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="love">1
                <input type="checkbox" name="love">2
                <input type="checkbox" name="love">3
                <input type="checkbox" name="love">4
            </td>
        </tr>
         <!-- 第七行 -->
         <tr>
            <td>个人介绍</td>
            <td>
                <textarea name="" id="" cols="30" rows="10">个人简介</textarea>
            </td>
        </tr>
         <!-- 第八行 -->
         <tr>
            <td></td>
            <td>
                <input type="submit" value="免费注册">
            </td>
        </tr>
         <!-- 第九行 -->
         <tr>
            <td></td>
            <td>
                <input type="checkbox" checked="check">同意条款
            </td>
        </tr>
         <!-- 第十行 -->
         <tr>
            <td></td>
            <td>
                <a href="#">我是会员,登录</a>
            </td>
        </tr>
         <!-- 第十一行 -->
         <tr>
            <td></td>
            <td>
                <ul>
                    <h5>我承诺</h5>
                    <li>...</li>
                    <li>...</li>
                    <li>...</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>

表格

#
关注我

最新文章

分类

×