HTML基础

最新推荐文章于 2023-03-16 15:42:52 发布

赤蓝紫

最新推荐文章于 2023-03-16 15:42:52 发布

阅读量162

点赞数

分类专栏：学习笔记文章标签： html 前端 css

本文链接：https://blog.csdn.net/chilanzi/article/details/122943566

版权

学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文档介绍了HTML的基础知识，包括HTML的结构、元素、属性，以及常见的块级、行内和行内块级元素。此外，还详细讲解了HTML的语义化标签，如

、

摘要由CSDN通过智能技术生成

HTML基础

个人博客：HTML基础
HTML小复习(主要是自己不常用的知识点，语义化标签)

网页三大元素：

HTML：网页的基本结构

CSS:网页的展示效果

JS：网页的功能与行为

HTML简介

HTML(HyperText Markup Language, 超文本标记语言)，用于构建网页基本结构及其内容的标记语言

超文本：文本中包含指向其他文本的链接

标记语言：将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。如HTML、XML、KML、Markdown等。

HTML结构

HTML文档包含多个HTML元素,元素具备不同的特性
HTML元素 = 开始标签 + 结束标签 + 元素内容

test

部分元素是单标签元素。如img、input、br

<img src="images/angel.gif" alt="小天使">

HTML元素标签不区分大小写,即  和等价,但是建议小写
元素可以嵌套在其他元素中间
元素可以拥有属性，属性包含有元素的额外信息，如img标签的alt属性可以用于指定图片的替换文字，即当无法正常显示图片时会显示出来的文字。

HTML固定结构

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    
    <body>
    	<div>
    		<p class="test">123</p>
    		<img src="images/angel.gif" alt="小天使">
    	</div>
    </body>
    
    </html>

    1. <!DOCTYPE html>:HTML文档最前面的位置，加上后会按W3C的HTML5标准来解析渲染页面
    2. <html>:根元素，包含整个页面的内容
    3. <head>:对用户不可见，包含面向搜索引擎的关键字、页面描述、字符编码声明、CSS样式等。
    4. <body>：包含能够被用户访问到的内容，包含文本、图像、视频等。

HTML页面结构

1. <meta charset="UTF-8">:定义文档字符编码
2. <meta name="keywords" content="HTML">：关键字，即用搜索引擎搜索时可凭借关键字搜索到
3. <meta name="description" content = "HTML基础">：页面描述

4. <meta name="viewport" content="width=device-width, initial-scale=1.0">:视口标签，主要用于移动端
5. <title>Document</title>:页面的标题，显示在浏览器标签页上
6. <style>:CSS样式
7. <meta "http-equiv="expires" content="31 Dec 2021">：http头部，可以向浏览器发送一些信息，如网页到期时间
8. <link rel="shortcut icon" href="favicon.ico" />：标签页上的图标

9. <link rel="stylesheet" href="css/menu.css">链接到样式表
10. <script src="js/index.js"></script>可执行脚本，链接到js文件，也可直接在标签里写

常用元素

块级元素

占据父元素的整行，块级元素独占一行
能容纳其他块级元素和行内元素（内联元素）
可以控制宽高、行高、边距、边框等改变尺寸
常见块级元素：div、p、h1-h6、ul、ol、dl、table、form、blockquote、address

行内元素（内联元素）

只占据对应标签边框所占据的空间，不独占一行
只能容纳文本或其他内联元素
只能通过修改水平边距、边框或行高来改变尺寸
常见行内元素有：a、span、br(br会让后面的元素从另一行开始，但它还是属于上一行)、i、em、strong、label、code、cite

行内块级元素

元素在行内排列，不会独占一行
可以控制宽高、垂直边距、边框来改变尺寸
常见行内块级元素有：img、input、td

语义化标签

根据内容的结构，选择合适的标签构建出便于开发者阅读的可维护性更高的代码结构，同时能够让机器更好地解析。

样例展示：

图片出处：html语义化标签例子,HTML5语义化

header标签

展示介绍性信息
通常包含一组介绍性或辅助导航的元素，如标题、Logo、搜索框、作者名称等
不能放在footer标签、address标签和另一个header标签内部

例子：

    <header>
    	<h1>HTML</h1>
    	<p> <time datetime="2021-08-15"></time> </p>
    </header>

nav标签

在当前文档中提供导航链接，如菜单、目录、索引等
用来放一些热门的链接，不常用的链接一般放在footer标签里，而footer标签放在底部

	<nav>
		<ol>
			<li><a href="#">HTML</a></li>
			<li><a href="#">CSS</a></li>
			<li><a href="#">JS</a></li>
		</ol>
	</nav>

article标签

定义独立的内容
内容本身必须是有意义的且必须是独立于文档的其余部分，如论坛帖子、新闻文章、博客、用户提交的评论、交互式组件等

    <article>
      <h1>Internet Explorer 9</h1>
      <p> Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
    </article>

section标签

按主题将内容
分组，通常会有标题
section标签通常出现在文档的大纲中
不要把section作为普通容器使用，例如，用来梅花片段样式时，用div更合适
如果元素里面是独立的内容，可以单独存在，更适合用article

如果只是针对一个块内容做样式化，article和section二者并无区别。

section元素用于对网站或应用程序中页面上的内容进行分块，section元素的作用是对页面上的内容进行分块，或者说对文章进行分段；一个section元素通常由内容及其标题组成，通常不推荐为那些没有标题的内容使用section元素。引用自下面的链接

H5中section和article和div的区别

aside标签

主要有两种用法

包含在article元素中作为主要内容的附属部分，其中的内容可以是与文章有关的相关资料、名词解释等。


	<article>
		<h1>...</h1>
		<p>...</p>
		<aside>...</aside>
	</article>

在article元素之外作为页面或站点的附属信息部分。如侧边栏，其中的内容可以是友情链接、博客中的其他文章列表、广告等。

footer标签

描述了文档的底部区域
通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

例子：

    <footer>
      <p>Posted by: Hege Refsnes</p>
      <p><time pubdate datetime="2012-03-01"></time></p>
    </footer>

picture元素

picture元素允许我们在不同设备上显示不同的图片，一般用于响应式

picture元素有多个source元素和一个img元素，每个 source元素匹配不同的设备并引用不同的图像源，如果没有匹配的，就选择img元素中的图像。

img是放在最后一个source元素之后的

    <picture>
      <source media="(min-width: 650px)" srcset="demo1.jpg">
      <source media="(min-width: 465px)" srcset="demo2.jpg">
      <img src="img_girl.jpg">
    </picture>

赤蓝紫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

HTML基础个人博客：HTML基础HTML小复习(主要是自己不常用的知识点，语义化标签)网页三大元素：HTML：网页的基本结构CSS:网页的展示效果JS：网页的功能与行为HTML简介HTML(HyperText Markup Language, 超文本标记语言)，用于构建网页基本结构及其内容的标记语言超文本：文本中包含指向其他文本的链接标记语言：将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。如HTML、XML、KML、Markdown等。HTML
复制链接

扫一扫