HTML

YMHH12

已于 2024-03-18 17:57:58 修改

阅读量541

点赞数 8

文章标签： html 前端

于 2024-03-16 21:45:52 首次发布

本文链接：https://blog.csdn.net/YMHH12/article/details/136768421

版权

本文介绍了HTML（超文本标记语言）的概念，其在网页构建中的作用以及基本标签如标题、字体样式、链接、图片、音频视频、表格、布局和表单的使用。详述了HTML结构（如标题标签）、表现（如字体和颜色）、行为（如链接和多媒体）的核心概念，并展示了如何创建简单的HTML文档结构。

摘要由CSDN通过智能技术生成

什么是HTML？

HTML是一门语言，所有的网页都是用HTML这门语言编写出来的

HTML（HyperText Markup Language）：超文本标记语言

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片，音频，视频等内容
标记语言：由标签构成的语言

HTML运行在浏览器上，HTML标签由浏览器解析

HTML标签都是预定好的。例如：使用<img>展示图片

W3C标准：网页主要由三部分组成：

结构：HTML
表现：CSS
行为：JavaScrip

步骤：

1.新建文本文件，后缀名改为.html

2.编写HTML结构标签

3.在<body>中定义文字

HTML标签不区分大小写

<html>
<head>
	<title>html 快速入门</title>

</head>

<body>

<font color="red">乾坤未定，你我皆是黑马~ </font>
	
</body>

</html>

基础标签

标签	描述
<h1>-<h6>	定义标题，h1最大，h6最小
<font>	定义文本的字体，字体尺寸，字体颜色
<b>	定义粗体文本
<i>	定义斜体文本
<u>	定义文本下划线
<center>	定义文本居中
<p>	定义段落
<br>	定义拆行
<hr>	定义水平线

<body>

<h1>陋室铭</h1>
<h2>陋室铭</h2>
<h3>陋室铭</h3>
<h4>陋室铭</h4>
<h5>陋室铭</h5>
<h6>陋室铭</h6>

<hr>

<!--
html 表示颜色
     1.英文单词：red,pink,blue
     2.rgb（值1，值2，值3）：值的取值范围：0~255   rgb(255,0,0)是个红色
     3.#值1值2值3：值的取值范围：00~FF
-->
<font face="宋体" size="4" color="#ff1493">河南科技学院</font>

<hr>

能源是国民经济和社会发展的重要基础。富煤、缺油、少气的资源禀赋决定了我国以煤为主体的能源结构短期内难以改变。<br>
利用我国相对丰富的煤炭资源发展煤制油产业，对解决我国石油资源短缺、降低对外依存度、托底石油供给，提升国家能源安全保障能力具有重大战略意义。

<hr>
<p>
能源是国民经济和社会发展的重要基础。富煤、缺油、少气的资源禀赋决定了我国以煤为主体的能源结构短期内难以改变。
</p>
<p>
利用我国相对丰富的煤炭资源发展煤制油产业，对解决我国石油资源短缺、降低对外依存度、托底石油供给，提升国家能源安全保障能力具有重大战略意义。
</p>
<hr>
我国石油资源短缺<br>
<b>我国石油资源短缺</b><br>
<i>我国石油资源短缺</i><br>
<u>我国石油资源短缺</u><br>

</body>

图片，音频，视频标签

标签	描述
<img>	定义图片
<audio>	定义音频
<video>	定义视频

img：定义图片

src：规定显示图像的URL（统一资源定位符）
height：定图像的高度
width：定义图像的宽度

audio：定义音频。支持的音频格式：MP3，WAV，OGG

src：规定的音频 URL
controls：显示播放控件

video：定义视频。支持的音频格式：MP4,WebM,OGG

src:规定视频的URL
controls：显示播放控件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
   资源路径：1.绝对路径：完整路径
           2.相对路径：相对位置关系
           xxx/html/02-图片音频视频.html
           xxx/html/a.jpg
           ./a.jpg     ==  a.jpg

            xxx/html/a.jpg
            xxx/html/img/a.jpg

   尺寸单位：
        1.px:像素
        2.百分比：
-->
<img src="a.jpg" width="300" height="400">
<audio src="b.mp3" controls></audio>
<video src="c.mp4" controls width="300" height="500"></video>


</body>
</html>

超链接标签

标签	描述
<a>	定义超链接，用于链接另一个资源

href：指定访问资源的URL

target：指定打开资源的方式

*_self：默认值，在当前页面打开

*_blank：在空白页面打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<a href="https://www.bilibili.com/" target="_blank">点我进入BIBILI哦</a>

</body>
</html>

列表标签

有序标签（order list）

1.咖啡

2.茶

3.牛奶

无序列表（unorder list）

咖啡
茶
牛奶

type：设置项目符号

<ol>
    <li>牛奶</li>
    <li>抹茶冰激凌</li>
    <li>茶</li>
</ol>

<ul>
    <li>牛奶</li>
    <li>巧克力牛奶</li>
    <li>草莓牛奶</li>

表格标签

标签	描述
<table>	定义表格
<tr>	定义行
<td>	定义单元格
<th>	定义表头单元格

table：定义表格

* border;规定表格边框的宽度

*width：规定表格的宽度

*cellspacing：规定单元格之间的空白

tr：定义行

* align：定义表格行的内容对齐方式

td:定义单元格

* rowspan：规定单元格可横跨的行数

* colspan：规定单元格可横跨的列数

<table border="1" cellspacing="0" width="700">
    <tr align="center">
        <th>序号</th>
        <th>品牌logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>
    </tr>

    <tr align="center">
        <td>010</td>
        <td><img src="../img/三只松鼠.png" width="50" height="60"></td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
    </tr>

    <tr align="center">
        <td>009</td>
        <td><img src="../img/优衣库.png" width="50" height="60"></td>
        <td>优衣库</td>
        <td>优衣库</td>
    </tr>

    <tr align="center">
        <td>008</td>
        <td><img src="../img/小米.png" width="50" height="60"></td>
        <td>小米</td>
        <td>小米科技有限公司</td>
    </tr>
</table>

布局标签

标签	描述
<div>	定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局网页
<span>	用于组合行内元素

表单标签

表单：在网页中主要负责数据采集功能，使用<form>标签定义表单

表单项（元素）：不同类型的input元素，下拉列表，文本域等

标签	描述
<form>	定义表单
<input>	定义表单项，通过type属性控制输入形式
<label>	为表单项定义标注
<select>	定义下拉列表
<option>	定义下拉列表的列表项
<textarea>	定义文本域

form：定义表单

# action：规定当提交表单时向何处发送表单数据，URL

# method：规定用于发送表单数据的方式

* get：浏览器会将数据直接附在表单的action URL之后。大小有限制

* post：浏览器会将数据放到http请求消息中。大小无限制

表单项标签

<input>：表单项，通过type属性控制输入形式

<select>：定义下拉列表，<option>定义列表项

<textarea>：文本域

type取值	描述
text	默认值，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
hidden	定义隐藏的输入字段
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
reset	定义重置按钮，重置按钮会清除表单中的所有数据
button	定义可点击按钮