HTML--基础标签、样式标签、图像标签、链接标签、列表标签、表单标签、表格标签、样式(节)

最新推荐文章于 2022-08-13 17:05:23 发布

Mikowoo007

最新推荐文章于 2022-08-13 17:05:23 发布

阅读量445

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/Mikowoo007/article/details/91352254

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

基础标签

`<!DOCTYPE>` 定义文档类型

<!DOCTYPE>声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

<!DOCTYPE html>

`<html>`定义HTML文档

声明一个html文档，所有的标签都写在它内部

<html lang="en">
...
</html>

`<title>` 定义文档的标题

浏览器显示的标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览器显示的标题!</title>
</head>

<body>
网易内容
</body>
</html>

在这里插入图片描述

`<h1>` 到 `<h6>` 定义标题

<head>
    <meta charset="UTF-8">
    <h1>我是h1标题</h1>
    <h2>我是h2标题</h2>
    <h3>我是h3标题</h3>
    <h4>我是h4标题</h4>
    <h5>我是h5标题</h5>
    <h6>我是h6标题</h6>
</head>

在这里插入图片描述

`<p>` 定义段落

<body>
	<p>我是段落1....</p>
    <p>我是段落2....</p>
    <p>我是段落3....</p>
</body>

在这里插入图片描述

`<hr>` 定义水平线

单标签

<body>
	<p>我是段落1....</p>
	<hr>
    <p>我是段落2....</p>
    <hr>
    <p>我是段落3....</p>
</body>

在这里插入图片描述

`<br>` 定义简单的换行

<body>
    <p>我是段落1....</p>
    <hr>
    <p>我是<br>段落2....</p>
    <hr>
    <p>我是段落3....</p>
</body>

在这里插入图片描述

`` 添加注释

Ctrl+Shift+/ 快捷键

<!--我是一个注释-->

格式标签

`<em>` 斜体–强调文本

`<small>` 小号文本

`<b>` 加粗文本

<body>
	<p>我是一个正常文本</p>
    <em>我是一个em显示出来的文本</em> <br>
    <small>我是一个small显示出来的文本</small> <br>
    <b>我是 b 加粗显示的文本</b> <br>
</body>

在这里插入图片描述

图像标签

`<img>` 单标签

alt 参数 图像加载不成功显示的内容

<body>
	<img src="01test_image.png" alt="">
    <img src="images/test_image.png" alt="图片不见了">
</body>

在这里插入图片描述

链接标签

`<a>` 定义锚

<a href="test.html" target="_blank">跳转到</a>

href 跟跳转后的地址
target 以什么方式跳转 _blank 以新建标签页的形式跳转
跳转到 为显示的内容
在这里插入图片描述

列表标签

`<ul>` 定义无序列表 `<li>` 定义列表的项目

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ul>
</body>

在这里插入图片描述

`<ol>` 定义有序列表 `<li>` 定义列表的项目

<body>
<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ol>
</body>

在这里插入图片描述

`<di>` 自定义列表 `<dt>` 定义列表的标题 `<dd>` 定义列表项目描述

<dl>
    <dt>我是dt1</dt>
        <dd>我是dd1</dd>
        <dd>我是dd2</dd>
        <dd>我是dd3</dd>
    <dt>我是dt2</dt>
        <dd>我是dd1</dd>
        <dd>我是dd2</dd>
        <dd>我是dd3</dd>
</dl>
</body>

在这里插入图片描述

列表快速生成

在这里插入图片描述

同时输入列表内容

表单标签

<from> 定义供用户输入的HTML表单
<input> 定义输入组件
<textarea> 定义多行的文本输入控件
<select> 定义选择列表(下拉列表)
<option> 定义选择列表中的选项
<label> 定义input元素的标注

<body>
<form action="test.html">   <!--提交后的跳转地址-->
    <label>请输入用户名</label><input type="text" placeholder="请输入内容..."> <br>   <!--placeholder 中的内容是提示-->
    <label>请输入密码</label><input type="password" placeholder="请输入密码...."> <br>
    <label>个人简介</label><textarea name="" id="" cols="30" rows="10"></textarea> <br><!--多行文本输入框--> <br>

    <select name="" id="">
        <option value="">男</option>
        <option value="">女</option>
    </select>

    <br>
    <input type="submit" value="提交"> <br>           <!--此组件默认有跳转功能，跳转到action内的地址-->
    <input type="button" value="我是一个按钮"> <br>   <!--没有跳转功能-->
</form>
</body>

在这里插入图片描述

表格标签

<table> 定义表格
<caption> 定义表格的标题
<tr> 定义表格中的行
<td> 定义表格中的单元

<body>
<table border="1">		<!--表格是否有边框-->
    <caption>表格的标题</caption>  
    <tr>
        <td>码111</td>
        <td>码222</td>
        <td>码333</td>
    </tr>
    <tr>
        <td>码111</td>
        <td>码222</td>
        <td>码333</td>
    </tr>
    <tr>
        <td>码111</td>
        <td>码222</td>
        <td>码333</td>
    </tr>
</table>
</body>

在这里插入图片描述

样式/节

<style> 定义文档的样式信息，写在<head> </head>里面

<head>
	<style>
        p{
            color:red;
            fond-size:20px;
        }
    </style>
</head>

在这里插入图片描述
<div> 定义文档中的节(大区域)
<span> 定义文档中的节(小区域)

Mikowoo007

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML--基础标签、样式标签、图像标签、链接标签、列表标签、表单标签、表格标签、样式(节)

基础标签<!DOCTYPE> 定义文档类型<!DOCTYPE>声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。<!DOCTYPE html><html>定义HTML文档声明一个html文档，所有的标签都写在它内部<html lang="en"&...
复制链接

扫一扫