【前端三剑客之HTML】详解HTML

Vez'nan的幸福生活

已于 2024-05-27 21:16:12 修改

阅读量535

点赞数 17

文章标签： javaweb 前端 html

于 2024-05-23 21:10:27 首次发布

本文链接：https://blog.csdn.net/2301_80912559/article/details/139157816

版权

1. HTML(超文本标记语言)

HTML意为超文本标记语言，其可以通过标签把其他网页/图片/视频等资源引入到当前网页中，让网页最终呈现出来的效果超越了文本.
HTML是一种标记语言，其是由一系列标签组成的. 而且每个标签都有特定的含义和确定的页面显示效果.

2. 特点

(1). 双标签

标签是通过一组尖括号+标签名的方式来定义的.

<title>及你太美</title>
<!-->
<title>称为开始标签
</title>称为结束标签, 二者共同构成了完整的标签.
其之间的部分叫标签体
<-->

(2). 单标签

<meta charset="UTF-8"/>
<!-->
此标签为单标签, 只有一对尖括号
<-->

(3). 属性

<meta charset="UTF-8"/>
<!-->
属性 : charset="UTF-8"
属性名 : charset
属性值 : "UTF-8"
<-->

(4). 文本

双标签中间的文字，包含空格换行的结构.

(5). 元素

经过浏览器解析后，每个完整的标签可以称之为一个元素.

3. HTML基本结构

(1). 文档声明

HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息以及HTML文档遵循的语法规则.

<!DOCTYPE html>

(2). 根标签

<html></html>是整个文档的根标签，所有其他标签都必须放在根标签里面.

<html>

</html>

(3). 头部元素

<head></head>标签是<html></html>第一个一级子标签，用来定义文档的头部，其他头部元都放在head标签里，头部元素包括title，script，style，link，meta标签等.

很重要但不显示在网页页面的标签都定义在该标签内.

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width", initial-scale="1.0"/>
    <title>及你太美</title>
</head>

(4). 主体内容

<body></body>标签是<html></html>第二个一级子标签，用来标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内.

(5). 注释

<!-->
注释信息
<-->

4. 常见标签

(1). 标题标签

标题标签一般用于在页面上定义一些标题性内容，有h1到h6级标题.h1标题字体最大.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>一级大标题</h1>
    <h2>二级大标题</h2>
    <h6>六级大标题</h6>
</body>
</html>

(2). 段落标题与换行标题

如果只是简单的手动换行，浏览器解析时是不会有换行效果的.此时换行应用换行标签br.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 段落标签 -->
    <p>-------这是一个段落
        -------
    </p>
    <!-- 换行标签 -->
    <br/>
    <!-- 有分隔符的换行标签 -->
    <hr/>
</body>
</html>

(3). 列表标签

列表标签常用的有有序列表与无序列表. 列表标签内可嵌套列表标签.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 有序列表  orderlist -->
    <Ol>
        <li>JAVA</li>
        <li>C#</li>
        <li>C++</li>
        <li>Python</li>
    </Ol>

    <!-- 无序列表  unorderlist -->
    <ul>
        <li>JAVA</li>
        <li>C#</li>
        <li>C++</li>
        <li>Python</li>
    </ul>

</body>
</html>

(4). 超链接标签

点击后跳转链接标签.

href属性用于定义链接地址.链接地址可使用绝对路径. 也可以使用相对路径.相对路径以当前文件所在路径为出发点，./开头表示当前路径。 ../开头表示上一层路径.
target属性用于定义链接打开的方式.
_blank在新窗口打开目标资源.
_self在当前窗口打开目标资源.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <!-- 链接该html文件, 也可以链接其他网站 -->
    <a href="http://atguigu.com" target="_blank">是兄弟就来点我</a>

    <hr/>

    <a href="http://atguigu.com" target="_self">兄弟来砍我</a>
</body>
</html>

(5). 多媒体标签

img图片标签，用于在页面上引入图片.

src用于定义图片的链接.
title属性用于定义鼠标悬停时显示的文字.
alt属性用于定义图片加载失败时提示的文字.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="test01HTML\img\屏幕截图 2024-05-23 210305.png" title="海绵宝宝" alt="海绵宝宝死了" />
</body>
</html>

(6). 表格标签

table标签表示表格.
thead标签表示表头.可以省略不写.
tbody标签表示表体，可以省略不写.
tfoot标签表示表尾，可省略不写.
tr表示一行.
td标签代表行内一格.
th标签自带加粗和居中效果的td.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="4px" style="width: 400px; margin: 2px auto;">
        <tr>
            <th>名字</th>
            <th>年龄</th>
            <th>性别</th>
            <th>游戏</th>
        </tr>
        <tr>
            <th>红夫人</th>
            <th>23</th>
            <th>女</th>
            <th rowspan="3">第五人格</th>
        </tr>
        <tr>
            <th>杰克</th>
            <th>34</th>
            <th>男</th>
        </tr>
        <tr>
            <th>鹿头</th>
            <th>55</th>
            <th>男</th>
        </tr>
    </table>
</body>
</html>

还可以使用td的rowspan属性实现上下跨行.
可以使用td的colspan属性实现左右跨列.

(7). 表单标签

表单标签，可以让用户在界面上输入各种信息并提交的一种标签，是向服务器发送数据的主要方式之一.

form标签，表单标签，其内部用于定义可以让用户输入信息的表单项标签.
action属性 : 用于定义信息提交的服务器地址.
method属性 : 用于定义信息的提交方式.get方式提交，数据会缀到URL后，以?作为参数开始的标志.多个参数用&隔开.post方式提交.数据会通过请求体发送，不会缀到URL后.
input属性 : 主要的表单项标签. 用于定义提交的参数名.
type属性 : 用于定义表单项类型.text文本框.password密码框.submit提交框.reset重置框.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://www.atguigu.com" method="get">
        用户名<input type="text" name="usename"/>
        <br />
        密码<input type="password" name="password" />
        <br />
        <input type="submit" value="登录" />
        <input type="reset" value="重置" />
    </form>
</body>
</html>

(8). 常见表单项标签

单行文本框text.密码框password.

单选框radio.name属性相同的radio为一组，组内互斥.设置checked＝"checked"属性设置默认被选中的radio.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://www.atguigu.com" method="get">
        用户名<input type="text" name="usename"/>
        <br />
        密码<input type="password" name="password" />
        <br />
        <input type="submit" value="登录" />
        <input type="reset" value="重置" />
        您的性别是
        <!-- name属性相同. 为一组 -->
        <input type="radio" name="sex" value="boy"/>男
        <!-- checked属性则默认该选项 -->
        <input type="radio" name="sex" value="gril" checked="checked"/>女
        </form>
    
</body>
</html>

复选框checkbox略.

下拉框select.

select标签定义下拉列表.option标签设置选项.name属性在select标签设置. value属性在option标签设置. 设置selected＝"selected"属性实现默认选中.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="http://www.atguigu.com" method="get">
        用户名<input type="text" name="usename"/>
        <br />
        密码<input type="password" name="password" />
        <br />
        <input type="submit" value="登录" />
        <input type="reset" value="重置" />
        您的性别是
        <!-- name属性相同. 为一组 -->
        <input type="radio" name="sex" value="boy"/>男
        <!-- checked属性则默认该选项 -->
        <input type="radio" name="sex" value="gril" checked="checked"/>女
        <br />
        游戏
        <select name="youxi">
            <option value="diwu" selected="selected">
                第五人格
            </option>
            <option value="wangzhe">
                王者荣耀
            </option>
            <option value="chiji">
                吃鸡
            </option>

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

按钮button.

多行文本框textarea.