HTML 基础 & 常见标签

最新推荐文章于 2022-06-24 15:39:52 发布

zzzzls~

最新推荐文章于 2022-06-24 15:39:52 发布

阅读量708

点赞数

分类专栏： html & css 文章标签： html table a div li

本文链接：https://blog.csdn.net/qq_36078992/article/details/106064490

版权

html & css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

什么是 HTML
HTML 标签
HTML 属性
HTML 基本结构
常见的 HTML 标签

什么是 HTML

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

HTML 指的是超文本标记语言（Hyper Text Markup Language）
HTML 不是一种编程语言，而是一种标记语言（markup language）
标记语言是一套标记标签（markup tag）
HTML 使用标记标签来描述网页
HTML 对大小写不敏感，建议使用小写

HTML 标签

HTML 标记标签通常被称为 HTML 标签（HTML tag）

HTML 标签是由尖括号包围的关键词，如 <html>
HTML 标签通常是成对出现的，如 <b> <\b>
标签队中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML 属性

属性是 HTML 元素提供的附加信息

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述与开始标签
属性总是以名称/值对的形式出现，如 name=“value”

常见属性：

属性名	描述
class	为 html 元素定义一个或多个类名
id	定义元素的唯一id
style	规定元素的行内 CSS 样式
title	规定有关元素的额外信息
accesskey	规定激活元素的快捷键
hidden	元素是否显示
data-*	用于存储页面或应用程序的私有定制数据

HTML 基本结构

<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>
    </head>
    <body>
        hello Python!
    </body>
</html>

上述代码是 HTML 的基本结构，我们分别来看一下：

<!DOCTYPE>: 是 Document Type Declaration，用来声明文档，也就是告知 web 浏览器当前页面使用了哪种 HTML 版本编写代码，此处使用的是 HTML5 版本，声明文档必不可少，而且必须位于 HTML 文档第一行
<html>: 表示页面编写的代码都是 HTML 代码。它是成对出现的标签，所有代码都必须写在 <html><\html>之间
<head>: 表示页面的头部
<title>: 表示页面的标题
<body>: 表示页面的身体

常见的 HTML 标签

h1-h6

六个不同的 HTML 标题

标签	描述	示例
`<h1></h1>`	一级标题	一级标题
…
`<h6></h6>`	六级标题	六级标题

p

标签	描述	示例
`<p></p>`	段落标签	\

br、hr

标签	描述	示例
`<br/>`	换行标签	\
`<hr/>`	水平分割线	\

i、b、del、u

标签	描述	示例
`<i></i>`	倾斜	倾斜
`<b></b>`	加粗	加粗
`<del></del>`	删除线	~~删除线~~
`<u></u>`	下划线	下划线

div、span

标签	描述	示例
`<div></div>`	定义文档中的分区或节	\
`<span></span>`	组合文档中的行内元素	\

img

定义图像

<img src="" alt="" title="" width="" height="" \>

常用属性：

src : 图片地址，可以是网络地址或者本地地址
alt : 图片加载失败时，显示的提示文本
title : 鼠标悬浮在图片上时，显示的文本信息
width : 设置图片的宽度
height : 设置图片高度

单独设置图片的宽或高，图片会自适应变化

a

超链接跳转网络地址 | 跳转本地界面 | 锚点

<a href=""></a>

常用属性：

href : 链接指向的页面的URL
target : 规定在何处打开链接 _blank 在新窗口打开链接
download : 点击链接下载文件

ul、ol、dl

ul 无序列表

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

ol 有序列表

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

dl 自定义列表

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

table

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

rowspan 跨行，colspan 跨列