HTML语法

Blue桃之夭夭

已于 2024-02-18 19:00:42 修改

阅读量1k

点赞数 17

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

于 2024-02-18 19:00:11 首次发布

本文链接：https://blog.csdn.net/qq_65966646/article/details/135960930

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.前端开发涉及到的三个语言

HTML：内容层——负责页面的内容

CSS：样式层——负责页面的样式

JaveScript：交互层——负责页面的行为/交互

2.定义

HTML超文本标记语言 Hyper Text Markup Language

超文本：文本图片链接视频音频 ....

标记：html的语法<标签名>

3.HTML的特点

.html或.htm为后缀的文件

页面中还可以嵌套JS脚本

4.HTML语法规则

1.HTML语法基础

标签：

<标签名>

标签的分类：

1）双标记标签,封闭类型标签

<开始标签>内容区域</结束标签> <html></html>

2）单标签标签，非封闭类型标签

<标签名/>现在H5语法规定可以不加斜杠<标签名> <br/> <br>

2.HTML网页结构

<!DOCTYPE>用于告诉浏览器当前的html使用h的语法编写，请用h5的规范解析

DOC --Document 文档

Type--类型

head--头部

body--身体、主体

title--标题

注释:

快捷键：ctrl+/

格式

3.标签样式

转义符号

小于号 <

大于号 >

4.段落标签

P：自己单独成行，上下方向有垂直的行间距

lorem是用于生成假文的，先输入Lorem出现提示回车或者Tab补全即可

5.标题字标签

h：加粗，有行间距

6.分割线标签(单标签)

<hr>

<hr>分割线后面的内容

5. 分区元素 15：44(双)

1）块分区 div标签

专用于页面标签，独占一行，没有样式

是最简单的块级元素，也是最为基本的分区标签

最重要的功能：作为标签的外包裹，以分块的形式将页面区分

可以包裹body中的任何标签，也可以独立使用

2）行分区 span

span 称为行内标签，用于包裹在一行中需要单独特殊处理的文本内容

不换行，最简单的行内元素，没有特殊样式

6.图片与超链接

1）图片

常见的图片格式

jpg/jpeg 普通图片

png 透明图

gif 动图

webp（谷歌推出，清晰度高且体积小，有版权）

2)标签的属性

属性：也称为特征，描述当前标签某一方面的特点

写法：<开始标签属性名1 =“属性值 1”属性名2 =“属性值 2”></结束标签>

属性声明必须写在开始标签内
属性名和属性值用等号连接
属性值要写在双引号中间

3）<img> 单标记标签

属性：

src=“图片资源的路径/url”
width=“图片的宽度单位（%或px）”
height=“图片的高度单位（%或px）”
alt=“资源加载失败时显示替换的文字”

URL 统一资源定位符

绝对路径—可以用网页文件

相对路径

4)超链接(双标签)

属性：

href=“路径” ## 锚点加上#号+id

target=" "

_self 默认值，在本页面中打开新连接

_blank 在新的选项卡页面中打开链接

锚点

1.加上id

2.快速跳转到页面顶部 <a href="#">快速跳转顶部</a>

<h3 id="C1">第一章节

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque rem sit mollitia veniam error velit laborum, sequi fugiat ipsum voluptates distinctio nam eveniet! Dolor qui blanditiis dolorum commodi quisquam distinctio.</h3>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus porro vero rem nihil pariatur dolor quod possimus placeat sint accusantium ipsum quia deserunt, vel nesciunt neque rerum, odit quae voluptas.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis numquam architecto ab hic esse molestias corrupti odio libero assumenda sapiente quos porro voluptatum debitis optio tempore, reprehenderit repudiandae accusantium! Ut.

==============

<a href="#">快速跳转顶部</a>

超链接去掉下划线：text-decoration：none

用于CSS中