2021-05-07

最新推荐文章于 2024-09-12 19:13:21 发布

m0_46523037

最新推荐文章于 2024-09-12 19:13:21 发布

阅读量112

点赞数

文章标签： html

本文链接：https://blog.csdn.net/m0_46523037/article/details/116505100

版权

一、HTML

1.基本框架

<!DOCTYPE html>			<!--文档声明，声明当前网页的版本-->
<html lang="en">		<!--html根标签，一个页面中有且只有一个根标签，网页中所有的内容都要写到根标签中-->
						<!-- lang用来定义当前文档显示的语言。告诉浏览器或搜索引擎这是一个中文(...)网站。en定义语言为英语。zh-CN定义语言为中文。fr定义语言为法语。 -->
<head>					<!--head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页-->
    <meta charset="UTF-8">	<!--meta标签用来设置网页的元数据(与生俱来，一般不变)，这里meta用来设置网页的字符集，避免乱码问题	 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>基本框架</title>		  <!--title中的内容会显示在浏览器的标题栏，搜索引擎主要根据title中的内容来判断网页的主要内容-->
</head>							 <!-- title标签中的内容也会作为搜索结果在超链接上以文字显示 -->
<body>					 <!--body是html的子元素，表示网页的主体，网页中所有可见的内容都应该写在body里-->
                                                 
</body>
</html>

2.实体(特殊符号)

在网页中编写的多个空格默认情况下会自动被浏览器解析为一个空格

在HTML中有些时候，我们不能直接书写一些特殊符号，

如：多个连续的空格，大于号，小于号等等

如果我们需要在网页中书写这些特殊符号，则需要使用HTML中的实体(即转义字符)

实体语法：&实体的名字;

如：空格  大于号> 小于号< 版权符号©

查找实体：W3school网站

3.meta标签(自结束标签)

meta标签主要用于设置网页中的一些元数据，元数据不是给用户看的

charset 指定网页的字符集

name 指定数据的名称

content 指定数据的内容

keywords 表示网站的关键字

可以同时指定多个关键字，关键字间用,(英文的)隔开

description用于指定网站的描述

网站的描述会显示在搜索引擎的搜索结果中

重定向：<meta http-equiv="refresh" content="等待时间;url=网址">

<!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">

	<meta name="keywords" content="HTML5,前端,CSS3">
	<meta name="description" content="这是一个不错的网站">
	<meta http-equiv="refresh" content="3;url=http://www.baidu.com">
	<title>meta标签</title>
</head>
<body>
	<h1>meta标签</h1>
</body>
</html>

4.语义化标签(1)

在网页中HTML专门负责网页的结构

所以在使用HTML标签时，应该注意的是标签的语义，而不是它的样式

标题标签

h1-h6 一共有六级标题

从h1-h6重要性递减，h1最重要，h6最不重要

h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1标签

一般情况下标题标签只会使用h1-h3，h4-h6很少使用

标题标签是一个块元素

hgroup标签

hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup中

段落标签

p标签表示页面中的一个段落

p标签是一个块元素

其他标签

strong标签和 b 标签用于 加粗字体

em标签和 i 标签用于 倾斜字体

del标签和 s 标签用于 增加删除线

ins标签和 u 标签用于 增加下划线

q标签短引用，会自动添加双引号

blockquote 长引用，会换行

br标签

br标签用于换行

br标签是一个自结束标签

    <strong></strong>
    <b></b>
	<em></em>
	<<i></i>
	<del></del>
	<s></s>
	<ins></ins>
	<u></u>

5.语义化标签(2)

块元素(block element)

在网页中一般通过块元素来对页面进行布局

行内元素(inline element)

行内元素主要用来包裹文字

一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素

p元素中不能放任何的块元素

浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正

如：

标签写在了根元素的外部

p元素中嵌套了块元素

根元素中出现了除head和body以外的子元素

6.语义化标签(3)

布局标签

header 表示网页的头部；

main 表示网页的主体部分(一个页面中只会有一个main)；

footer 表示网页的底部；

nav 表示网页中的导航；

aside 和主体相关的其他内容(侧边栏)；

article 表示一个独立的文章；

section 表示一个独立的区块,上边的标签不能表示时使用section；

div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素；

span 行内元素，没有任何语义，一般用于在网页中选中文字；

    <header></header>
	<main></main>
	<footer></footer>
	
	<nav></nav>
	<aside></aside>
	<article></article>

	<section></section>

	<div></div>
	<span></span>