HTML简介及常用标签实例初学前端适用

Sᴀғᴇᴛʏ 007

已于 2022-10-08 14:08:47 修改

阅读量269

点赞数

分类专栏： html标签文章标签： html

于 2020-08-02 23:51:28 首次发布

本文链接：https://blog.csdn.net/weixin_44437620/article/details/107753500

版权

html标签专栏收录该内容

2 篇文章 0 订阅

订阅专栏

什么是HTML？

HTML使用来描述网页的一种语言

1.是一种超文本标记语言

2.HTML用来描述网页

超文本：就是指页面可以包含图片，链接，甚至音乐，程序等非文字元素。

超文本标记语言的结构包括“头”部分(head) 和“主体”部分(body)。头部提供关于网页的信息，主体部分网页的具体内容。

基本格式：
<!DOCTYPE html> // 声明引用DTD
<html> //html标签，根标签，定义了整个HTML文档
 <head> //文档的头部，head标签
  <meta charset="utf-8">
  <title></title> //文档的标题
 </head>
 <body> //文档的主体
 </body>
</html>

其中html，head和body标签是结构化标签

<head>
  <meta charset="utf-8">
  <title></title>
 </head>

charset是编码字符集
(1) utf-8最常用
(2) gbk国家标本扩展版本
(3) unicode 万国码

HTML元素

HTML文档是由HTML元素定义的！

大多数的HTML元素可以嵌套（元素内包含其他HTML元素）

HTML文档由嵌套的HTML元素构成

HTML中的元素大体被分为三种不同的类型：块状元素，内联元素和内联块级元素。

将元素展示为块级元素：display：block

将元素展示为行内元素：display：inline

将元素展示为内联块状元素：display：inline-block

常见的块状元素有：
在这里插入图片描述
常见的内联元素有：

常见的内联块级元素有：
在这里插入图片描述
块状元素
div元素
p元素
h1~h6元素

列表元素：
HTML中的列表共有三种：有序列表，无序列表和自定义列表

有序列表
是用一列数字进行标记的项目，它使用 li 包含于 ol 标签内。
属性：type，start

	<ol>
			<li>第一部分</li>
			<li>第二部分</li>
			<li>第三部分</li>
		</ol>

type属性：
在这里插入图片描述
无序列表

是一个项目列表，此列表项使用粗体黑点进行标记。无序列表始于 ul 标签。每个列表项始于 li 。

<ul>
			<li>第一部分</li>
			<li>第二部分</li>
			<li>第三部分</li>
		</ul>

属性值：
disc：实心圆点（默认）
circle：空心圆
square：正方形

自定义列表

自定义列表中每个元素的标题使用 dt 定义，后面跟随 dd 用于描述列表中元素的内容。

<dl>
			<dt>hello</dt>
			<dd>world！</dd>
		</dl>

在这里插入图片描述

HTML块元素特点

每个块级元素都从新的一行开始，并且其后的元素也另起一行。

元素的高度，宽度，行高以及顶和底边距都可以设置。

元素宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度。

常用标签

文本标签:
  <p></p>  <!-- 段落标签 -->
  <a href="超链接的路径"></a>  <!-- 超链接标签 -->
  <h1>从1-6,字体依次变小</h1>  <!-- 标题字大小标签 -->
  <br> <!-- 换行标签 -->
  <hr>  <!-- 定义水平线标签 -->
  <b>...</b>  <!-- 定义文本加粗 -->
  <em></em>  <!-- 定义文本斜体 -->
  <i></i>  <!-- 定义文本斜体 -->
  <strong></strong>  <!-- 定义文本加粗 -->
  <ul></ul>  <!-- 无序数列 -->
  <ol></ol>  <!-- 有序数列 -->
  <li></li>  <!-- 列表项目 -->
  <font>  <!-- 定义文字的字体，大小，颜色 -->

图形标签:
  <img src="图片路径"> <!-- 定义图片 -->
  <del>  <!-- 加删除线 -->

表格标签:
  <table></table>  <!-- 定义表格 -->
  <th></th>  <!-- 定义表格中的表头单元格 -->
  <tr></tr>  <!-- 定义表格中的行 -->
  <td></td>  <!-- 定义表格中的单元 -->

实例

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>块状元素练习</title>
 </head>
 <body>
  <div>这是第一块内容</div>
  <div>这是第二块内容</div>
  <hr color="#00FFFF" size="5">
  <p>这是一块内容</p>
  <p>这是另一块内容</p>
  <hr color="#00FFFF" size="5">
  <h1>第一个标题</h1>
  <h2>第二个标题</h2>
  <h3>第三个标题</h3>
  <h4>第四个标题</h4>
  <h5>第五个标题</h5>
  <h6>第六个标题</h6>
  <hr color="#00FFFF" size="5">
  <div style="color:brown">
   <ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
   </ol>
   <ol reversed>
    <li>有序列表1</li>
    <li>有序列表2</li>
   </ol>
  </div>
  <hr color="#00FFFF" size="5">
  <div>
   <ul style="list-style: url(img/QQ图片220200716193751.png);">
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表2</li>
   </ul>
  </div>
  <hr color="#00FFFF" size="5">
   <div>
    <dl>
     <dd>自定义列表1</dd>
     <dt>自定义列表2</dt>
    </dl>
   </div>
   <a href=""></a>
   <hr color="#00FFFF" size="5">
   <a href="day07162.html">作业2</a>
   <a href="day07163.html">作业3</a>
 </body>
</html>

Sᴀғᴇᴛʏ 007

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
HTML简介及常用标签实例初学前端适用

什么是HTML？HTML使用来描述网页的一种语言1.是一种超文本标记语言2.HTML用来描述网页基本格式：<!DOCTYPE html> // 声明引用DTD<html> //html标签，根标签，定义了整个HTML文档 <head> //文档的头部，head标签 <meta charset="utf-8"> <title></title> //文档的标题 </head> <body>
复制链接

扫一扫