HTML5基础

最新推荐文章于 2022-11-14 21:10:46 发布

独孤醉人

最新推荐文章于 2022-11-14 21:10:46 发布

阅读量87

点赞数 1

分类专栏： web前端 & 微信小程序文章标签： html 前端

本文链接：https://blog.csdn.net/qq_46126537/article/details/117946345

版权

web前端 & 微信小程序专栏收录该内容

10 篇文章 1 订阅

订阅专栏

HTML5基本结构

<!DOCTYPE html>
<!--为文档类型声明，网页声明标准基于HTML5，浏览器会为此页面定义为标准兼容模式-->
<html>

  <head>
    <title>网页标题</title>
    <!--标题，网页收藏夹，在搜索引擎中搜索-->
  </head>
  
  <body>
    主体内容
  </body>
  
</html>

base标签

<!DOCTYPE HTML>
<html> 
<head>
    <base href="http://localhost/images/" />
</head>
<body>
    <img src="sunflower.jpg" />
</body>  
</html>

为页面上所有的链接设置默认URL地址或目标target
当网页中使用相对路径时，浏览器会东用base标签进行补全

<base target="_blank" />
<!--为该网页上所有超链接统一设置打开方式，在新标签中打开-->

meta标签

<meta charset="utf-8"> <!--声明字符集-->

<meta name="keywords" content="HTML5, CSS3, jQuery" /> <!--定义网页关键词-->

<meta name="description" content="This is a tutorial about HTML5, CSS3, jQuery" />
<!--定义网页描述-->

换行和水平线

<br/> <!--换行-->
<hr/> <!--水平线-->

实体字符

&实体名称;
&#实体数字;

&nbsp 空格

HTML4.0.1转化为HTML5

1、简化DOCTYPE
2、简化字符集
3、简化外部引用

HTML5保留的常用标签

p标签

<p>
	形成一个新的段落
</p>

标题标签

<h1> - <h6>

文本格式标签

<i>我是斜体字</i>

<b>我是粗体字（使用了标签b）</b>
<strong>我是粗体字（使用了标签strong）</strong>

<sup>我是上标</sup>
<sub>我是下标</sub>

<del>删除线</del>
<ins>下划线</ins>

<pre>
预格式化标签，保留文本原有的换行空格等
    望天门山
   【唐】李白
  
  天门中断楚江开，
  碧水东流至此回。
  两岸青山相对出，
  孤帆一片日边来。
    </pre>

列表标签

<ol type=”类型值”> <!--有序列表，默认阿拉伯数字-->
<li>第一项
<li>第二项
<li>第三项
.......
</ol>

在这里插入图片描述

<ul type=”类型值”> <!--无序列表，默认圆点-->
<li>第一项
<li>第二项
<li>第三项
.......
</ul>

在这里插入图片描述

<dl> <!--定义列表-->
<dt>第一个词条
<dd>第一个词条的定义
<dt>第二个词条
<dd>第二个词条的定义
.......
</dl>

图像标签

<img src="地址" alt="图片不能显示时显示的文字" />

在这里插入图片描述

超链接

默认状态下，未被访问的链接文本显示为带有下划线的蓝色字体，鼠标悬浮在上面会变成手形，点击访问后链接文本会变成带有下划线的紫色字体。

<a href=”URL地址” target=“打开方式”>链接文本或图片</a>

在这里插入图片描述

<a href="#指定区域名">链接文本或图像</a>
<a name="区域名">目标内容</a>

表格标签

1. 表格标签<table>
2. 表格行标签<tr>
3. 单元格标签<td>
4. 表头标签<th>
5. 表格标题标签<caption>

框架标签

<iframe src="news.html"></iframe>
<!--引入外源网页-->

容器标签

<div>
<!--块级元素，前后自动放置一个换行符-->
<span>
<!--不会自动在前后自动放置换行符-->

HTML5新增的常用标签

在这里插入图片描述

<mark>加黄底色文字</mark>
<progress value="80" max="100"></progress> <!--显示进度状态-->
<meter min="0" max="1000" value="200" low="300" high="900" optimum="1000"></meter>300/1000 GB</p>