HTML5

最新推荐文章于 2023-03-16 17:01:16 发布

小丁_　

最新推荐文章于 2023-03-16 17:01:16 发布

阅读量423

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_68905946/article/details/124655255

版权

1 什么是HTML

HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

~HTML 指的是超文本标记语言: HyperText Markup Language
~HTML 不是一种编程语言，而是一种标记语言
~标记语言是一套标记标签 (markup tag)
~HTML 使用标记标签来描述网页
~HTML 文档包含了HTML 标签及文本内容
~HTML文档也叫做 web 页面

2 HTML编辑器

VS Code

VsCode的全称是Visual Studio Code，是微软于2015年发布的一款免费开源的现代化轻量级且跨平台的代码编辑器（IDE），支持Windows、 OSX和Linux。内置JavaScript、TypeScript和Node.js.拥有丰富的插件生态环境，安装简单方便，可以通过安装插件来支持C++、C#、Python等语言的编写，也就是其涵盖的范围特别广泛，这也满足了我们编写程序时需要嵌入或引入其他语言的需求。

VS Code 安装教程参考：VScode 教程 | 菜鸟教程

3 HTML的基本结构

<!DOCTYPE html>
<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>

示例：

<!DOCTYPE html>
<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>网页</title>
</head>
<body>
    你好，HTML。
</body>
</html>

结果：

HTML标题

标题标签 <h1>-<h5>

<!DOCTYPE html>
<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>标题</title>
</head>
<body>
  <h1>标题 1</h1>
  <h2>标题 2</h2>
  <h3>标题 3</h3>
  <h4>标题 4</h4>
  <h5>标题 5</h5>
</body>
</html>

结果：

段落标签<p>

<!DOCTYPE html>
<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>段落</title>
</head>
<body>
 <p>段落一</p>
 <p>段落二</p>
 <p>段落三</p>
</body>
</html>

结果：

换行标签 br

<!DOCTYPE html>
<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>换行</title>
</head>
<body>
 出淤泥而不染<br>濯清涟而不妖
</body>
</html>

结果：

链接<a>

<!DOCTYPE html>
<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>链接</title>
</head>
<body>
 <a href="https://www.baidu.com/"></a>
</body>
</html>

图像<img>

<!DOCTYPE html>
<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>图像</title>
</head>
<body>
	<img src="./img/1.png" alt="" height="300px" >
</body>
</html>

常用标签

颜色值设置
1、直接使用英文的单词
2、使用十六进制 000000~FFFFFF
3、使用函数rgb(十进制,十进制,十进制) 0~255、rgba(十进制,十进制,十进制,十进制) 0~255 0~1
rgb(红,绿,蓝) rgba(红,绿,蓝,rgb(红,绿,蓝,不透明度)

实体字符转义字符
< <
> >
© ©
  空格

列表
有序列表 ol
无序列表 ul
列表项 li

<!DOCTYPE html>
<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>常用标签</title>
</head>

<body>
    <p>段落1.1<br>段落1.2</p>
    <p>段落2.1<br>段落2.2</p>
    <ol>
        <li>列表项01</li>
        <li>列表项02</li>
        <li>列表项03</li>
        <li>列表项04</li>
        <li>列表项05</li>
    </ol>
    <ol type="A">
        <li>列表项01</li>
        <li>列表项02</li>
        <li>列表项03</li>
        <li>列表项04</li>
        <li>列表项05</li>
    </ol>
    <ol type="a">
        <li>列表项01</li>
        <li>列表项02</li>
        <li>列表项03</li>
        <li>列表项04</li>
        <li>列表项05</li>
    </ol>
    <ol type="I">
        <li>列表项01</li>
        <li>列表项02</li>
        <li>列表项03</li>
        <li>列表项04</li>
        <li>列表项05</li>
        <li>列表项06</li>
        <li>列表项07</li>
        <li>列表项08</li>
        <li>列表项09</li>
        <li>列表项10</li>
    </ol>
    <ol type="i">
        <li>列表项01</li>
        <li>列表项02</li>
        <li>列表项03</li>
        <li>列表项04</li>
        <li>列表项05</li>
        <li>列表项06</li>
        <li>列表项07</li>
        <li>列表项08</li>
        <li>列表项09</li>
        <li>列表项10</li>
    </ol>
    <ol type="1" start="5">
        <li>列表项01</li>
        <li>列表项02</li>
        <li>列表项03</li>
        <li>列表项04</li>
        <li>列表项05</li>
    </ol>
    <ul>
        <li>导航01</li>
        <li>导航02</li>
        <li>导航03</li>
        <li>导航04</li>
        <li>导航05</li>
    </ul>
    <dl>
        <dt>Coffee</dt>
        <dd>Black hot drink</dd>
        <dd>Black hot drink</dd>
        <dt>Milk</dt>
        <dd>White cold drink</dd>
        <dd>White cold drink</dd>
    </dl>
</body>

</html>

表格

<!DOCTYPE html>
<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>表格</title>
</head>
<body>
    <table border="1px" align="center">
        <thead>
            <caption>大标题</caption>
            <tr>
                <th>标题一</th>
                <th>标题二</th>
                <th>标题三</th>
                <th>标题四</th>
                <th>标题五</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td>1-1</td>
                <td>1-2</td>
                <td>1-3</td>
                <td>1-4</td>
                <td>1-5</td>
            </tr>
            <tr>
                <td>2-1</td>
                <td>2-2</td>
                <td>2-3</td>
                <td>2-4</td>
                <td>2-5</td>
            </tr>
            <tr>
                <td>3-1</td>
                <td>3-2</td>
                <td>3-3</td>
                <td>3-4</td>
                <td>3-5</td>
            </tr>
            <tr>
                <td>4-1</td>
                <td>4-2</td>
                <td>4-3</td>
                <td>4-4</td>
                <td>4-5</td>
            </tr>
            <tr>
                <td>5-1</td>
                <td>5-2</td>
                <td>5-3</td>
                <td>5-4</td>
                <td>5-5</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

结果：

表单

<!DOCTYPE html>
<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>表单</title>
</head>

<body>
    <fieldset>
        <legend>常用表单</legend>
        <form action="" method="get" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
            性别：&nbsp;&nbsp;
            <label for="male">男</label>
            <input type="radio" name="gender" value="1" id="male" checked>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <label for="female">女</label>
            <input type="radio" name="gender" value="0" id="female">
            <br>
            爱好：&nbsp;&nbsp;
            <label for="swimming">游泳</label>
            <input type="checkbox" name="hobby" value="swimming" id="swimming" checked>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <label for="running">跑步</label>
            <input type="checkbox" name="hobby" value="running" id="running">
            &nbsp;&nbsp;&nbsp;&nbsp;
            <label for="skiing">滑雪</label>
            <input type="checkbox" name="hobby" value="skiing" id="skiing">
            <br>
            籍贯：&nbsp;&nbsp;
            <select name="hometown" id="hometown">
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="jilin" selected>黑龙江</option>
            </select>
            <br>
            水果：&nbsp;&nbsp;
            <select name="fruits" id="fruits" multiple>
                <option value="banana">香蕉</option>
                <option value="apple">苹果</option>
                <option value="pear" selected>梨</option>
            </select>
            <br>
            slogan
            <br>
            <textarea name="slogan" id="slogan" cols="30" rows="10"></textarea>
            <br>
            年龄：&nbsp;&nbsp;
            <input type="number" name="age" id="age">
            <br>
            时间：&nbsp;&nbsp;
            <input type="time" name="time" id="time">
            <br>
            周：&nbsp;&nbsp;
            <input type="week" name="week" id="week">
            <br>
            日期：&nbsp;&nbsp;
            <input type="date" name="date" id="date">
            <br>
            datetime-local：&nbsp;&nbsp;
            <input type="datetime-local" name="datetime-local" id="datetime-local">
            <br>
            URL：&nbsp;&nbsp;
            <input type="url" name="url" id="url">
            <br>
            电话：&nbsp;&nbsp;
            <input type="tel" name="tel" id="tel">
            <br>
            邮箱：&nbsp;&nbsp;
            <input type="email" name="email" id="email">
            <br>
            文件：&nbsp;&nbsp;
            <input type="file" name="file" id="file">
            <br>
            预定义控件：<input list="browsers" name="browser">
            <datalist id="browsers">
                <option value="Internet Explorer">
                <option value="Firefox">
                <option value="Chrome">
                <option value="Opera">
                <option value="Safari">
            </datalist>
            <br>
            0<input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output>
            <br>
            <input type="submit" value="提交">
        </form>
    </fieldset>
</body>

</html>

结果：

小丁_　

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5

1 什么是HTMLHTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。~HTML 指的是超文本标记语言: HyperText Markup Language~HTML 不是一种编程语言，而是一种标记语言~标记语言是一套标记标签 (markup tag)~HTML 使用标记标签来描述网页~HTML 文档包含了HTML 标签及文本内容~HTML
复制链接

扫一扫