前端-HTML5学习笔记三

日期：2021/12/25

所看视频链接：B站尚硅谷

内容：

P15_meta标签

<meta />

1.作用：
        设置网页中的一些元数据，元数据不是给用户看的
2.属性：
        charset        网页的字符集
                <meta charset="UTF-8"/>
        name        指定数据的名称
                author
                description        用于指定网站的描述，网站的描述会显示在搜索引擎的搜索结果中
                keywords         表示网站的关键字，可以同时指定多个关键字，关键字之间使用，隔开
                generator
                revised
                others
        content        指定的数据的内容
3.name+content:

	<meta name="keywords" content="HTML5,CSS3,前端"/>

                网页的关键字，在搜索引擎上输入前端，有这个关键字的网站全部弹出。

	<meta name="description" content="xxxxxxxxxxx"/>

	<meta http-equiv="refresh" content="数字；url=https://www.xxx.com"/>

                将页面重定向到另一个网站
        例子：

		<meta http-equiv="refresh" content="3；url=https://www.baidu.com"/>

                        3秒后跳转到百度页面
补充：title标签的内容会作为搜索结果的超链接上的文字显示

P16_语义化标签（1）

1.标题标签（块元素——在页面中独占一行的元素）

	<h1></h1>

        h1 ~ h6 一共六级标题
        h1最重要，h6最不重要
        h1在网页中的重要性仅次于title标签，一般情况下一个页面只有一个h1
        一般只使用h1 ~ h3，h4 ~ h6很少用
2.p标签（块元素）

	<p>段落内容</p>

        页面中的一个段落
3.hgroup标签

	<hgroup>
			<h1>一级标题</h1>
			<h2>二级标题</h2>
	</hgroup>

        用来为标题分组，可以将一组相关的标题同时放入到hgroup
4.em标签（行内元素——在页面内不会独占一行的元素）

	<em>语音强调内容</em>

        表示语音语调的元素
5.strong标签

	<strong>强调内容</strong>

        表示强调，重要内容
6.blockquote标签（块元素）

	<blockquote>
		引用文字
	</blockquote>

        表示一个长引用
7.q标签（行内元素）

	<q>引用文字</q>

        表示一个短引用
8.br标签

	<br />

        表示页面中的换行

P17_块元素和行内元素

1.块元素（block element）
        在网页中一般通过块元素来对页面进行布局
2.行内元素（inline element）
        行内元素主要用来包裹文字
3.块与行内
        一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
        块元素中基本上什么都能放
        p元素中不能放任何块元素

P18_语义化标签（2）

1.布局标签（结构化语义标签）
        1.header        表示网页的头部

		<header></header>

        2.main           表示网页的主体部分（一个网页中只有一个main）

		<main></main>

        3.footer          表示网页的底部

		<footer></footer>

        4.nav              表示网页中的导航

		<nav></nav>

        5.aside           和主题相关的其他内容（侧边栏）

		<aside></aside>

        6.article          表示一个独立的文章

		<article></article>

        7.section         表示一个独立的区块，上边的标签都不能表示时使用section

		<section></section>

        注：目前最常用的元素
                div没有语义，用来表示一个区块，目前来说div是主要的布局元素

			<div></div>

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

			<span></span>

P19_列表

1.列表（list）
        1.有序列表（Ordered list）
                使用ol标签创建有序列表
                使用li表示列表项

		<ol>
			<li>结构</li>
			<li>表现</li>
			<li>行为</li>
		</ol>

        2.无序列表（Unordered list）（使用最多）
                使用ul标签创建有序列表
                使用li表示列表项

		<ul>
			<li>结构</li>
			<li>表现</li>
			<li>行为</li>
		</ul>

        3.定义列表（Definition list）
                使用dl标签来创建一个定义列表
                使用dt来表示定义的内容
                使用dd来对内容进行解释说明

		<dl>
			<dt>结构</dt>
			<dd>结构表示网页的结构</dd>
		</dl>

        4.列表之间可以互相嵌套

		<ul>
			<li>
				组成：
				<ul>
					<li>
						分类一
							<ul>
								<li>天</li>
								<li>地</li>
								<li>人</li>
							</ul>
					</li>
					<li>
						分类二
					</li>
					<li>
						分类三
					</li>
				</ul>
			</li>
		</ul>

P20_超链接简介

<a>超链接</a>

        行内元素
1.作用：
        从一个页面跳转到其他页面或当前页面的其他位置
2.属性：
        href         指定跳转的目的路径（内部页面或外部网站的地址）
3.超链接是一个行内元素，在a标签中可以嵌套除它自身外的任何元素
4.链接访问过呈紫色，未访问呈蓝色

P21_相对路径

        跳转一个服务器的页时，一般使用相对路径
        ./表示当前文件的目录
        …/表示当前文件所在目录的上一级目录

P22_超链接的其他用法

<a>超链接</a>

1.属性：
        href         指定跳转的目的路径（内部页面或外部网站的地址）
        self          默认值，在当前页面中打开超链接
        blank       在一个新的页面中打开超链接
2.功能
        1.回到顶部

		<a href="#">回到顶部</a>

        2.去底部

		<a href="#bottom">去底部</a>

                底部：<a id="bottom" href="#">回到顶部</a>
        3.在开发中可以将#作为超链接的路径占位符（但是点击仍会回到顶部）

		<a href="#">这是一个未定的超链接</a>

                可以使用JavaScript:;来作为href的属性，此时点击这个超链接什么也不会发生

			<a href="javascript:;">这是一个未定的超链接</a>

注：
        id属性（唯一不重复的）
                字母开头
                每一个标签都可以添加一个id属性
                id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性