前端web之HTML基础(1)

最新推荐文章于 2024-07-09 19:16:57 发布

达西布鲁斯

最新推荐文章于 2024-07-09 19:16:57 发布

阅读量313

点赞数

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

本文链接：https://blog.csdn.net/biheyu828/article/details/103710814

版权

介绍

web网页通常由三个部分构成，即HTML、CSS、JavaScript，合称网页三剑客。其中，
HTML：控制页面的结构，即页面的布局。如文档段落、表单、图片。
CSS：控制页面的表现，也就是使页面变得好看。如字体、颜色、图片大小。
JS：控制页面的行为，和用户产生交互。如用户点击button后刷新页面，显示更新后的信息。

HTML基础

页面结构

HTML是一种标记语言（markup language），使用标签来描述网页。
HTML文档结构树如下：
在这里插入图片描述
HTML基本结构：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"> 
        <title>网页标题</title>
    </head>
 
    <body>
          网页显示内容
    </body>
</html>

HTML标签

标签格式

HTML标签是由尖括号包围的关键字，如 <html>, <div>等
HTML标签通常是成对出现的，比如：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。
也有一部分标签是单独呈现的，比如： 、<hr/>、<img src=“1.jpg” />等。
标签里面可以有若干属性，也可以不带属性。

标签的语法：

<标签名属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名属性1=“属性值1” 属性2=“属性值2”…… />

几个很重要的属性：

id：定义标签的唯一ID，HTML文档树中唯一
class：为html元素定义一个或多个类名（classname）(CSS样式类名)
style：规定元素的行内样式（CSS样式）

段落：
段落 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
文本控制：
加粗
加粗
斜体
<strike>: 为文字加上一条中线.
下划线
<s>删除</s>
 文字变成斜体.
和 上角标和下角表.
 换行
<hr> 水平线
图片：<img src=“图片地址” alt=“图片描述”>
超链接：<a href=“url地址”>内容
列表：
- 无序列表：
 <ul type=“disc”>
 <li>第一项</li>
 <li>第二项</li>
 </ul>

type属性	说明
disc	实心圆点，默认值
circle	空心圆圈
square	实心方块
none	无样式

最低0.47元/天解锁文章

达西布鲁斯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端web之HTML基础(1)

介绍web网页通常由三个部分构成，即HTML、CSS、JavaScript，合称网页三剑客。其中，HTML：控制页面的结构，即页面的布局。如文档段落、表单、图片。CSS：控制页面的表现，也就是使页面变得好看。如字体、颜色、图片大小。JS：控制页面的行为，和用户产生交互。如用户点击button后刷新页面，显示更新后的信息。HTML基础页面结构HTML是一种标记语言（markup lan...
复制链接

扫一扫