HTML+CSS

HTML-标准结构

2025-08-18  本文已影响0人  大炮打小鸟

标准结构
输入!第一个就是html标准结构,但是结构里lang="en"是en,需要使用emmet修改成zh-CN步骤:
1、点击设置,搜索emmet,
2、然后找到Emmet: Trigger Expansion On Tab点击启用,
3、在Emment:Variables里设置lang为```zh-CN``。

设置网站logo
1、文件名和后缀名必须为:favicon.ico
2、文件必须放入文件夹第一层

排版标签
标题标签:其中h1最重要,推荐一个页面只有一个h1,一般使用h1-h3,h4-h6用的最少,且不允许互相嵌套

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

段落标签:p标签,不加粗,自带换行,p标签里不允许出现h1-h6、p、div标签

块标签:div标签

<div>
     <p>我是段落</p>
</div>

p标签比较长时,可以用Ctrl+Enter换行

语义化标签
用特定的标签,表达特定的含义;
1、代码可读性清晰;
2、有利于SEO(搜索引擎优化),比如:百度内置爬虫机器人
3、方便设备解析,比如屏幕阅读器,盲人阅读器等

块级元素和行内元素
块级元素独占一行,行内元素不独占一行
规则1:块级元素内能写,行内元素、块级元素;
规则2:行内元素可以写行元素,但是不能写块级元素;
特殊规则:h1-h6不能互相嵌套,p标签中不能写块级元素;

快捷键:Shift+Alt + ↑或↓可以复制一行

文本标签

常用的标签 描述 效果 单/双标签 重要性
em 着重要阅读的内容 斜体效果 双标签 效果不重要语义很重要
strong 十分重要的内容 加粗效果 双标签 效果不重要语义很重要
span 没有语义,用于包裹短语的通用容器 没有效果 双标签 很常用
不常用的标签
cite 作品标题(书籍、歌曲、电影、电视节目、绘画、雕塑) 斜体效果 双标签
din 特殊术语或专属名词 斜体效果 双标签
del与ins 删除文本【与】插入文本 del删除效果、ins下标线效果 双标签
sub与sup 下标文字【与】上标文字 双标签
code 一段代码 代码效果 双标签
samp 从正常的上下文中,将某些内容提取出来,例如:标识设备输出 双标签
kbd 键盘文本,表示文本是通过键盘输入的,经常用在计算机相关的手册中 双标签
addr 缩写,最好配合上title属性,title就是缩写的说明 双标签
bdo 更改文本方向,要配合dir属性,可选值;ltr(默认值):从左到右、rtl:从右到左 双标签
var 标记变量,可以与code标签一起使用 双标签
small 附属细则,例如:包括版权、法律文本 双标签 很少使用
b 摘要中的关键字、评论中的产品名称 加粗效果 双标签 很少使用
i 本意是:人物的思想活动、所说的话等等。现在多用于:呈现字体图标 斜体效果 双标签
u 与正常内容有反差文本,例如:错的单词、不合适的描述等等 下面标线 双标签 很少使用
q 短引用 加双引号 双标签 很少使用
blockquote 长引用 属于块元素 双标签 很少使用
address 地址信息 斜体效果,属于块元素 双标签
上一篇 下一篇

猜你喜欢

热点阅读