HTML骨架&基本语法、标签(一)

HTML标签的基本语法与常见标签介绍

目录

骨架

关于HTML标签

基本语法和标签

快捷键

标签

标签格式

标签属性

常见标签

head标签

mata标签

字符集

视口标签

浏览器私有设置

关键字

title标签

h系列标签【headline】

p标签【paragraph】

img标签【image】

属性:

相对路径和绝对路径:

锚点标签【anchor】

属性:

页面锚点的使用:


骨架

DTD(Document Type Definition,文本类型定义),必须出现在第一行。让浏览器知道是什么格式的文件。

<!DOCTYPE html>

<!>表示警示标签。

DOCTYPE表示文档类型。

html就是HTML超文本标记语言。

整个网页必须被<html></html>包裹,它里面有<head></head>和<body></body>两部分。

关于HTML标签

<head></head> :网页的配置

<body></body> :网页的正式内容,浏览器可视区域

标签有一个属性lang,是英语language语言的意思,表示整个网页的主体语言。

en表示英语。

中文的表示法有三种。zh、cn、zh-CN。

需要注意的是,无论哪种语言,都使用英文开发。

<html **lang="en" > 
<html **lang="zh-CN">

.html不是纯文本文件吗,为什么又变成超文本标记语言了?

.html 文件既是纯文本文件,也是超文本标记语言文件,这两者并不矛盾。这主要取决于文件的用途和解析方式:

纯文本文件的角度 .html 文件本质上是由文本组成的,任何文本编辑器(如 Notepad、VS Code)都可以打开和编辑。 它以纯文本格式存储,不包含二进制数据。因此,从存储结构来看,它确实是一个纯文本文件。

超文本标记语言的角度 .html 文件遵循 HTML 标准,用于定义网页的结构和内容。 浏览器会将 .html 文件解析为超文本页面,并呈现为带有样式、链接、图片和交互功能的网页。 超文本 指的是文件中可以包含其他资源(如链接、脚本等)并通过标记语言实现复杂功能。

基本语法和标签

快捷键

HTML骨架 html:5 → tab
快速生成元素 元素名→tab
自动生成多个元素 div*5 → tab
生成h1-h6 h$*6 → tab
复制当前行文本 shift+alt+键盘上下箭头
删除当前行 ctrl+shift+k
选中多个光标

按住滚轮键不松手,向下拖动鼠标(不是滚动滚轮)

在任意位置换行 按住ctrl+enter
放大或缩小文字

Ctrl+键盘(+或者-)

标签

标签格式

<h1>存放内容的地方</h1>

标签名必须书写在一对尖括号<>内部

标签分为单标签和双标签,双标签必须成对出现,有开始标签和结束标签

结束标签必须有关闭符号/

根据标签内部存放的内容不同,将不同的标签划分为两个级别

容器级 文本级
div,ol,ul,li,dl,dt,dd,h1-h6 span,img,b,u,i

容器级:元素内部除了可以存放文本之外,还可以嵌套标签

文本级:元素内部只能存放文本或者文本级标签

标签属性

标签属性是标签身上的一些特殊性质,通俗讲,给标签加上某个属性就相当于给标签赋予了职能,前提是标签必须具备这些职能

书写位置:在开始标签或单标签的标签名后面,添加一个空格,空格后面书写属性

属性包含属性名(key)和属性值(value)两部分,根据英文表示,习惯将属性写法称为键值对写法,标签属性的键值对写法是:k=”v”

注意空格 (多个属性用空格隔开)

<a href="www.baidu.com"></a>

<a href="www.baidu.com" title="我是title"></a>

标签之间对空白、换行、缩进不敏感(仍会占用文件空间)

文字的位置不会根据书写标签位置决定,而是根据标签的种类决定

<p>文字</p><p>文字</p>

在上传代码过程中,为了提高传输速度,可以将代码进行压缩,删除多余的空白,目的就是问了压缩文件的大小

文本中的空格会被折叠

空格:代码中使用&nbsp;可以表示空格

换行: br单标

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值