一、HTML简介和基本结构、标签和表单

2022-03-10 18:33:10

前端：即网站前台部分，运行在PC端、移动端等浏览器上展现给用户浏览的网页和界面

HTML：页面结构，可以把它看成一个文档，定义展示页面的内容结构

CSS：页面表现，元素大小、颜色、位置、隐藏或显示，部分动画效果

JavaScript：页面行为，部分动画效果、页面与用户的交互、页面功能

一、HTML

超文本标记语言，是网页制作必备的编成语言。超文本就是页面包括图片、链接、音乐、程序等非文字原色

1.HTML页面结构

头部分：提供关于网页的信息

主体部分：提供网页的具体内容

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--头部信息，不会在页面显示-->
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <!--主体部分，页面中显示内容-->
    <h1>第一个网页</h1>
</body>
</html>

1）文档声明：

DOCTYPE声明该html文件使用的html版本

HTML5：

<!DOCTYPE html>

HTML4.01版本：

<!DOCTYPE html PUBLIC “-//w3c//DTD HTMK 4.01//EN”

"http://www.w3.org/TR/html4/strict.dtd">

2）页面头部

第二行<html>标签和最后一行</html>定义html文档的整体，<html>标签中的lang定义页面语言（en为英文，zh-CN为中文），<head>标签和<body>标签是它的第一层子元素。

<head>标签里面负责对页面进行一个设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和JavaScript文件等。设置的内容不会显示在网页上，标题的内容会显示在标题栏。

3）页面内容

<body>:元素定义文档的主题，也就是页面显示的内容

body元素包括文档的所有内容（如文本、超链接、图片、表格等）

2.常见的HTML标签

1.注释

注释不会显示在浏览器中

格式：

<p>注释的内容，一个段落</p>

2.标题标签

<h1>-<h6>可定义标题，其中<h6>定义最小标题

格式：<h1>这是标题 h1</h1>

3.换行标签

格式：只加一个<br>

4.水平分割线

格式：只加一个<hr>

6.段落标签

格式：<p>这是一个段落，可换行</p>

7.块标签

表示一块内容，div标签可以把文档分割为独立的、不同的部分。

格式：<div>这是一个分块</div>

8.span标签

行内块元素，表示行中小段内容，没有具体的语义。

格式：<span style="color:red">我在span标签里</span>

9.含样式和语义的行内标签

<i> : 行内元素，字体斜体

<em>:行内元素，语义为强调内容，表示非常重要(倾斜效果）

<b>:行内元素，字体加粗

<stong>:行内元素，语义为强调内容，表示非常重要(效果加粗）

10.图片标签

img标签：向网页中嵌入一幅图像

img标签有两个必须的属性：src属性、alt属性

格式：<img src="F:\桌面\桌面壁纸\愿望瓶1366x768.jpg" alt=‘许愿瓶‘>

alt:规定图像的代替文本（必须）
src:规定图像的URL（必须）
heigth:规定图像的高度
width:规定图像的宽度

11.链接音乐文件

格式：<audio src="" controls="controls"></audio>

12.链接视频

格式：<video src="F:\视频\其他\VID_20200524_091803.mp4" width="500px" height="400px" controls="controls"></video>

13.超链接标签

作用：用于从一张页面链接到另一张页面

最重要的元素属性是href属性，它指示链接的目标

格式：<a href="http://www.baidu.com">点击链接跳转到百度</a>

14.link标签

放在头部，链接到一个外部样式，即链接外部的CSS文件

15.列表

有序列表：在网页上定义一个有编号的内容列表可以用<ol>/<li>配合使用

<ol>
      <li>列表文字11</li>
      <li>列表文字22</li>
      <li>列表文字33</li>
</ol>

再网页上生成列表，每条项目上会按1、2、3编号（实际开发中比较少用）

无序列表：在网页上定义一个有编号的内容列表可以用<ul> <li>配合使用

<ul>
      <li>列表文字11</li>
      <li>列表文字22</li>
      <li>列表文字33</li>
</ul>

16.表格

table标签定义html表格

简单的html表格由table元素及一个或多个tr th td元素组成

tr：定义表格行

th：定义表头

td：定义表格单元

标签实例代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>测试标题标签</title>
 6 </head>
 7 
 8 <body>
 9     <!--2.标题标签-->
10     <h1>这是标题 h1</h1>
11     <h2>这是标题 h2</h2>
12     <h3>这是标题 h3</h3>
13     <h4>这是标题 h4</h4>
14     <h5>这是标题 h5</h5>
15     <h6>这是标题 h6</h6>
16 
17     <!--3.换行标签：br-->
18     <p>这是第一行<br>这是第二行</p>
19 
20     <!--4.水平分割线：hr-->
21     <h1>关于防控疫情的通知</h1>
22     <hr>
23     <p>众志成城，打好防疫攻坚战</p>
24 
25     <!--7.分块标签-->
26     <div style="height:50px; width:200px; background:red">
27         这是一个div标签</div>
28 
29     <!--8.span标签-->
30     <p>
31         这是一段包含了span标签的话<br>
32         <span style="color:red">我在span标签里</span>
33     </p>
34 
35     <!--9.含样式和语义的行内标签-->
36     <i>这是字体倾斜,i标签</i><br>
37     <em>这是强调内容,em标签，</em><br>
38     <b>这是字体加粗，b标签</b><br>
39     <strong>这是强调内容，strong标签</strong><br>
40 
41     <!--10.img标签-->
42     <img src="F:\桌面\桌面壁纸\愿望瓶1366x768.jpg" alt=‘许愿瓶‘>
43 
44     <!--11.音乐标签-->
45     <audio src="" controls="controls"></audio><br>
46 
47     <!--12.视频标签-->
48     <video src=".\VID_20200524_091803.mp4" width="300px" height="200px" controls="controls"></video><br>
49 
50     <!--13.超链接标签-->
51     <a href="http://www.baidu.com">点击链接跳转到百度</a>
52 
53     <!--14.列表-有序列表-->
54     <ol>
55         <li>列表文字11</li>
56         <li>列表文字22</li>
57         <li>列表文字33</li>
58     </ol>
59     <!--14.列表-无序列表-->
60     <ul>
61         <li>列表文字AA</li>
62         <li>列表文字BB</li>
63         <li>列表文字CC</li>
64     </ul>
65 
66     <!--15.表格-->
67     <table border="1">
68         <tr>
69             <th>姓名</th>
70             <th>年龄</th>
71             <th>性别</th>
72         </tr>
73         <tr>
74             <td>小样儿</td>
75             <td>18</td>
76             <td>女</td>
77         </tr>
78         <tr>
79             <td>张伟</td>
80             <td>20</td>
81             <td>男</td>
82         </tr>
83         <tr>
84             <td>王明</td>
85             <td>33</td>
86             <td>男</td>
87         </tr>
88     </table>
89 
90 </body>
91 </html>

标签实例代码

3.html表单

1.form标签

form标签用于为用户输入创建HTML表单，表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等。

form标签属性：

action:定义表单中数据提交地址
method:定义表单提交的方式（常见有get和post）

form表单包含的元素：

<label>标签：为表单元素定义文字标注
<input>标签：定义通用的表单元素
<textarea>标签：定义多行文本输入框
<select>标签：定义下拉表单元素
<option>标签：与select标签配合使用，定义下拉表单元素中的选项

2.input标签

value属性：定义表单元素的值

name属性：定义表单元素的名称，此名称是提交数据时的键名

<form>
    账号：<input type="text" name="username" id="user">
    密码：<input type="password" name="password" id="pw">
</form>

type属性：

text：单行文本输入框
password：密码输入框
radio：单选框
checkbox：复选框
file：上传文件
submit：提交按钮
button：普通按钮
reset：重置按钮
image：图片作为提交按钮，用src属性定义图片地址
hidden：定义一个隐藏的表单域，用来存储值

3.label标签

label标签，在点击账号文本时，光标会自动定位到后面的输入框

4.textarea标签

文本域标签，格式：<textarea name="desc" id="" cols="20" rows="10"></textarea>

5.select标签

下拉框标签，和option标签同时使用

格式：

<select name="" id="2">
       <option value="HB">长沙</option>
       <option value="SD">武汉</option>
       <option value="SX">西安</option>
       <option value="HuB">太原</option>
</select><br>

6.option标签

定义下拉框列表中的一个选项（一个条目）

浏览器将option标签中内容作select标签的菜单或是滚动列表中的一个元素显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单实例代码</title>
</head>
<body>
    <form action="" method="get">
        账号：<input type="text" name="username">
        <br>
        密码：<input type="password" name="pwd">
        <br>
        <input type="submit">
    </form>
    <h1>注册表单</h1>
    <form action="">
        <!--label标签，在点击账号文本时，光标会自动定位到后面的输入框-->
        <label for="user">账号：</label>
        <input type="text" id="user" name="username" placeholder="请输入账号"><br>
        密码：<input type="password" name="pwd" placeholder="请输入密码"><br>
        确认密码：<input type="password" name="pwd"><br>
        选择性别：
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <br>
        选择技能：
        <input type="checkbox"  name=‘skill‘>Python
        <input type="checkbox"  name=‘skill‘>Java
        <input type="checkbox"  name=‘skill‘>C++
        <input type="checkbox"  name=‘skill‘>PHP
        <br>
        省份：
        <select name="" id="1">
            <option value="HB">河北省</option>
            <option value="SD">山东省</option>
            <option value="SX">山西省</option>
            <option value="HuB">湖北省</option>
        </select>
        城市：
        <select name="" id="2">
            <option value="HB">长沙</option>
            <option value="SD">武汉</option>
            <option value="SX">西安</option>
            <option value="HuB">太原</option>
        </select><br>
        个人介绍：
        <textarea name="desc" id="" cols="20" rows="10"></textarea>
        上传头像：
        <input type="file"><br>
        <!--提交按钮，提交表单-->
        <input type="submit">
        <!--普通按钮，触发其他点击事件-->
        <input type="button" value="普通按钮">
        <!--重置按钮-->
        <input type="reset" value="重置按钮">

    </form>
</body>
</html>

html表单框架示例代码

4.内联框架iframe

iframe元素会创建包含另外一个文档的内联框架

如：将百度页面的内容链接到当前页面

前端开源框架：

https://element.eleme.cn/#/zh-CN/component

https://www.layui.com/doc/

一、HTML简介和基本结构、标签和表单

码农公寓

相关文章