零基础入门学习HTML(下)

最新推荐文章于 2024-05-31 09:42:54 发布

白的夜gxw

最新推荐文章于 2024-05-31 09:42:54 发布

阅读量63

点赞数

分类专栏： HTML 文章标签：学习 html 前端

本文链接：https://blog.csdn.net/weixin_63228975/article/details/126839531

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

上篇我们讲解了零基础入门学习HTML()上，那么本文就对HTML所需要学到的标签做一个详细点的介绍。

网页基础

SEO

搜索引擎优化(Search engine Optimization)，对网站进行SEO优化是为了让搜索引擎尽快的将网页收录到索引数据库

TDK

<title.> 网页的主题 </title.>
<.meta name=“description” content=“此处填写网页的内容”.>
<.meta name=“keywords” content=”“此处填写为搜索引擎提供的网页关键词”

常用标签

base

《base href=“https://www.itheima.com target=”_blank”》

点击网页中所有的链接都会跳转到这个链接

q

q元素定义内r容较短的引用，浏览器通常会在引用的内容的俩侧加上引号

blockquote

一般引用一大段文本使用的是blockquote元素，浏览器会通过缩进的方式显示内容

cite

cite元素用于定义作品，歌曲，电影，喜剧等的标题

address

adress 元素用于定义文档或文章的信息、拥有者的联系信息

ruby

<.ruby>魑魅魍魉chi mei wang liang</ruby.>

del 和 s

del:用于表示从文档中删除的内容
s:表示不正确的内容

strong 和 b

strong:表示强调文本中重要的部分
b:仅仅代表加粗

em 和 i

em:表示强调的内容并且是斜体
i:仅仅表示斜体

mark

起到文本标记的作用

sup/sub

E=mc<.sup>2<./sup>
H_{2_O}

small

作用是使指定的文本变小

列表

ul

无序列表，可以设置li样式

ol

属性说明
reversed 指定有序列表顺序为降序
start 指定有序列表的起始值
type 指定在有序列表中使用的标记类型

属性	说明
reversed	指定有序列表顺序为降序
start	指定有序列表的起始值
type	指定在有序列表中使用的标记类型

li

list-style-type:square :实心方块
list-style-type:disc ：实心圆
list-style-type:circle ：空心圆
list-style-type:none ：无
list-style-img:url():将图片设置为图标

dl

dt：定义列表中条目部分的内容
dd:定义描述部分的内容

表格

<table>
<tr>
	<th><th>
<tr>
<tr>
	<td>
<tr>
</table>

合并表格内外边距

border-collapse:collapse
caption:给表格设置标题（注意：caption:需要紧挨着table标签）
分割表格：thead tbody tfoot
跨行显示：rowspan 跨列显示：colspan : 2

表单

自动填充：autocomplete 属性值：on/off
自动聚焦：autofocus
禁用元素：disabled
禁止用户修改：readonly
label元素：显示关联隐式关联
表单分组：fieldset
表单分组系小标题：legend
下拉菜单：select option
input :属性值：text passwords radio checkbox button time date month week datetime-local search image file
placeholder:表单内的默认值
required：不可以提交空的表单值
maxlength:限定输入的字符数量
textarea:文本域

H5语义化布局

header:定义简介形式的内容
nav:定义页面主导航功能
main:定义主内容，主内容可以包含各种字内容区段（article section div)
article:定义独立的文章内容，与页面的其他部分无关
section:定义文档中的节
aside:定义侧边栏
footer:定义页脚部分
details：定义额外的细节
summary:定义details元素的标题

嵌入

嵌入照片：map和area

图片分区响应

<img src="pic.jpg" alt="分区响应" usemap="#book">
<map name="book">
	<area shape="circle" coords="125,100,30" alt="" herf="" target="">
    <area shape="poly" coords="125,250,100,200,236,569" alt="" herf="" target="">
    <area shape="rect" coords="125,102" alt="" herf="" target="">
</map>