HTML基础部分

HTML基础部分

所有HTML文档必须以<!DOCTYPE html>开始。

所有HTML文档本身以<html>开始,以</html>结尾。

HTML文档中看见部分以<body>开始,以</body>结尾。

标题:由<h1><h6>定义,<h1>定义最重要的标题,<h6>定义最不重要的标题。

段落:使用<p>定义,<p> </p>

链接:使用<a>定义,<a href=""></a>

图片:使用<img>标签定义

scr(图片源路径) alt(附加信息) 宽度width和高度height也可以添加。

html 复制代码
<img src="" alt="">

<body>元素定义了文档,该元素又含两个其他HTML元素<h1><p>
<h1>定义了一个标题
<p>定义了一个段落

html 复制代码
 <body>
    <h1>标题</h1>
    <p>段落</p>
 </body>

结束标签是非常重要的,忘记添加结束标签是不被允许的。

HTML元素没有内容被称为 空元素。
<br>是一个空元素,它没有结束标签
<br/>表示换行

HTML标签不区分大小写:<P><p>意义相同,HTML标准不需要小写标签,但W3C推荐标签小写,并且像HTML中小写是严格文档类型。

lang属性

文档的语言声明在<html>标签里

语言用lang属性声明

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

title属性

<p>中添加一个title属性,当鼠标结果段落时,标题属性将作为一个提示显示出来。

html 复制代码
<h2>这是一个标题属性</h2>
<p title="鼠标放在该位置上出现的提示"></p>

href属性

HTML使用<a>来定义链接,链接地址通过href设置

html 复制代码
<a href="htttp://www.baidu.com"></a>

size属性

HTML使用<img>来定义图片

使用src属性定义文件名称,使用widthheight定义图片的尺寸

html 复制代码
<img src="photo.png" width="300" height="333">

alt属性

当图片不能显示时,alt属性指定备选文本。这些值能被屏幕阅读器读取,例如一些盲人可以听见。

html 复制代码
<img src="photo.png" alt="图片"width="300" height="333">

单引号和双引号

在HTML中一般使用双引号包围属性值,但是也可以使用单引号

有些情况下,当属性值本身里面有双引号,可以外部使用单引号

html 复制代码
<p title="name is 'zhangsan'"></p>

<p title='name is "zhangsan"'></p>

另外 HTML5标准不要求必须括住属性值

例如href属性可以写成如下

html 复制代码
<a href=htttp://www.baidu.com>百度</a>

W3C推荐括住属性值,并且一些严格的文档类型是要求必须括住属性值的,例如XHTML有时候必须括住属性值,这样如果一个标题属性里面有空格,属性值不会出现错误

html 复制代码
<p title=关于 百度></p>
相关推荐
AC赳赳老秦3 小时前
公开图片 OCR 数据提取:OpenClaw 合规采集公开信息图,识别文字与表格并转化为结构化数据
java·大数据·前端·数据库·python·php·openclaw
谢慧琼3 小时前
2026零基础做企业网站,低成本搭建官方网站
服务器·前端·javascript
weixin_431600444 小时前
前端数据埋点(1):一次点击如何变成一条埋点
前端·js·数据埋点
IT_陈寒4 小时前
Python线程池吞了异常还不告诉我,这谁顶得住啊
前端·人工智能·后端
计算机魔术师5 小时前
同样是AI辅助建造,为什么有的游戏三个月就烂尾了?
前端
用户921080262865 小时前
0. 做 Agent 产品,前端 AI 组件框架怎么选?
前端
拾年2756 小时前
React Hooks 进阶篇:useMemo / useCallback / useReducer / useImperativeHandle,用「算账 +
前端·javascript·react.js
Jackson__6 小时前
面试官:如何在老项目中使用新框架,并实现通信?
前端·javascript·面试
拾年2756 小时前
React Hooks 保姆级教程:把组件想象成失忆的打工人,4 个 Hook 带你原地起飞
前端·javascript·react.js
mmsx6 小时前
一个 Bug 修了 12 轮,根因只有一句话:AI 编程时代,日志才是唯一的真相
前端