HTML基础

本文详细介绍了HTML标签的语义、元数据设置(如charset、name、description、title和链接标签),以及如何使用结构化语义标签进行网页布局和SEO优化,重点讲解了标题标签、列表和链接的使用。
摘要由CSDN通过智能技术生成

实体(转义字符)的语法:

 空格

>大于号

<小于号

©版权符号

Meta主要用于设置网页中的一些元数据,不是给用户看的。

charset指定网页的字符集

<meta charset="UTF-8">

name指定网页的名称

content指定网页的内容

Keywords网站的关键字,可以同时指定多个关键字(关键字之间使用用逗号隔开)

<meta name="keywords" content=" HTML,css, JavaScript"></meta>

description用于网站的描述(网站的描述会显示在搜索引擎的搜索结果中)

<meta name="description" content="这是一个不错的网站"></meta>

title标签的内容会作为搜索结果超链接上的文字显示

<title>下载</title>

超链接,3代表延迟几秒

<meta http–equiv=" refresh" content="3;http:// www.baidu.com"></meta>

HTML是专门负责网页的结构

所以使用HTML标签时应关注标签的语义,而不是它的样式

标题标签:h1~h6(一共六级标题)

从h1~h6重要性递减,h1最重要,h6最不重要;h1的重要性仅次于标题title标签,一般情况下一个页面只有一个h1元素

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

(常用标题)(Ctrl+回车:光标换行)

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

<hgroup>

<h1>我爱你</h1>

<h2>你爱我</h2>

</hgroup>

p标签表示页面中的一个段落,也是一个块元素

<p>独占一行,表示段落<p>

em(行内标签)标签表示语音语调的加重

<p>今天天气<em>真<em>好</p >

strong表示强调,重要内容

<p>今天你必须<strong>完成作业<strong>!</p >

blockquote表示长引用

鲁迅说:<blockquote>这句话我没说过</blockquote>

q表示短引用

子曰:<q>学而时习之,不亦说乎</q>

br表示换行

<br*2>换两行</br>

块元素:在页面中独占一行的元素

行内元素:在页面中不会独占一行

标题标签是块元素

块元素(block element):

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

行内元素(inline element):

行内元素用来包裹文字

一般情况下,会在块元素中放行内元素,不会在行内元素放块元素。块元素中一般什么都能放。

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

浏览器解析网页时,会自动对网页中不符合规范的内容自动修改

比如:标签写在根元素外面,p元素中嵌套了块元素;根元素中出现了除head和body以外的子元素

布局标签(结构化语义标签)

hearder:网页的头部

main:网页的主体部分(一个网页中只有一个main)

footer:网页的底部

nav:网页中的导航

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

article:一个独立的文章

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

div:没有语义,就用来表示一个区块,目前来讲div还是我们主要的布局元素span:行内元素,没有任何的语义,一般用于网页中选中文字

列表的分类

1有序列表2无序列表3定义列表

有序列表,使用ol标签来创建有序列表,使用li表示列表项

无序列表,使用ul标签来创建无序列表,使用li表示列表项

定义列表,使用dl标签来创建一个定义列表,使用dt来表示定义的内容,使用dd来对内容进行解释说明

列表之间可以相互嵌套

<ul>

<li>结构</li>

<li>表现</li>

<li>行为</li>

</ul>

<ol>

<li>结构</li>

<li>表现</li>

</ol>

<dl>

<dt>结构</dt>

     <dd>对结构解释说明</dd>

</dl>

超链接(行内元素):可以使我们从一个页面跳转到其他页面,或者是当前页面的其他位置

使用a标签来定义超链接,在a标签中可以嵌套除它自身外的任何元素

属性:href指定跳转的目标路径(值可以是一个外部网站的地址,也可以是内部页面的地址)

<a href=" ">超链接</a>
<a href="07.列表.html">超链接2</a>

target的属性:用来指定超链接打开的位置

可选值:

      _self(默认值)在当前页面中打开超链接

     _blank在一个新的页面中打开超链接

<a href="07.列表.html" target="_black">超链接</a>

可以直接将超链接的href属性设置为#,代表点这个超链接不会发生跳转而是转到当前页面的顶部位置

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

可以跳转到页面指定位置,只需将href属性设置 #目标元素的id属性值

id属性(唯一不重复):

每一个标签都可以添加一个id属性

id属性就是元素的唯一标识,同一个页面中不能出现重复的id属性值

<a href="#p3">去p3</a>

<p id="p3">p3</p>

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

<p id="bottom">回到底部</p>

在开发中可以将#作为超链接的路径的展位符使用

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

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

<a href="JavaScript:;">空链接</a>

当我们需要跳转到一个服务器页面时,一般我们都会使用相对路径,相对路径都会使用.或..开头(./或../)

./可以省略不写,如果不写就代表写了./

./表示当前文件所在的目录

.//表示当前文件所在目录的上一级目录

图片标签用于向当前页面中引入一个外部图片,使用img标签引入外部图片,img是一个自结束标签,img元素属于替换元素(块和行内元素之间,具有两种元素的特点)

属性:src :属性指定的是外部图片的路径(路径规则和超链接一样)

alt :图片的描述,这个描述默认情况下不会显示,有些浏览器图片无法加载是会显示;搜索引擎会根据alt的内容来识别图片,如果不写alt属性则图片不会被搜索引擎找到

width:图片的宽度(单位是像素)

height:图片的高度

宽度和高度任意一个修改,另一个也会等比例修改

注意:一般情况在PC端,不建议修改图片大小,需要多大就裁剪多大;但是在移动端经常对图片进行缩放

图片的格式:

jpeg(JPG):支持的颜色丰富,不支持透明效果,不支持动图,一般用来显示照片

gif:支持的颜色较少,支持简单透明,支持动图,用来支持颜色单一的图片、动图

png:支持的颜色丰富,支持复杂透明,不支持动图,用来表示颜色丰富、复杂透明的图片(专为网页而生)

webp:这种格式是谷歌新推出的专门用来表示网页中的图片一种格式

优点,具备其他图片格式所有优点,而且文件特小;缺点,兼容性不好

用图方式:效果一样,用小的;效果不一样,用好的

<img width="200" scr="./img/1.gif" alt="松鼠">

内联框架:用于向当前页面中引入一个其他页面;src 指定要引入的网页路径;frameborder 指定内联框架的边框

<iframe src="https:// www.baidu.com" width="500" height="600" frame=0>

audio 标签用来向页面中引入一个外部的音频文件,音视频文件引入时,默认情况不允许用户自己控制播放停止

属性:

controls是否允许用户控制播放

autoplay 音频文件是否自动播放

(如果设置了autoplay,则音乐在打开页面时会自动播放,但是目前来讲大部分浏览器都不会自动对音乐进行播放)

loop 音乐是否循环播放

<audio src="./source/audio.mp3" controls antoplay loop></audio>

除了src来指定外部文件的路径以外,还可以通过source来指定文件

<audio controls>

1对不起,您的浏览器不支持,请升级

<source src="./source/audio.mp3">

2<embed src="./source/audio.mp3" type="audio/mp3" width="300">

</audio>

使用video标签来向网页中引入一个视频,使用方法和audio基本是一样的

<video controls>

<source src="./source/flower.webm"></video>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玉解

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值