第一章，一 HTML 基础

最新推荐文章于 2024-11-07 13:56:28 发布

Chenche_

最新推荐文章于 2024-11-07 13:56:28 发布

阅读量69

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/Chenche_/article/details/127591492

版权

一

HTML定义

描述：

HTML超文本标记语言（Hyper Text Markup Language），可以理解为网页的源代码

浏览器能够识别和解析HTML代码（标签），将代码翻译（渲染）成视觉化的效果图

页面中主要有文本，图片，视频，音频等各种标签

作用：

-构建页面（PC端，移动端）

W3C标准

- World Wide Web Consortium（万维网联盟）

- 定义web技术标准，3个方面

结构标准：HTML、XML

样式标准：CSS

行为标签：ECMAScript，DOM

实例一

 <h1>HelloWorld</h1>

二 HTML基本结构

<!-- H5标准（声明文档类型） -->
<!DOCTYPE html>
<!-- 根元素，一个html只能有一个根元素 -->
<html lang="en">
<!-- 页面头 -->

<head>
    <!-- 描述信息（元信息） -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 页面标题 -->
    <title>HTML基本结构</title>
</head>
<!-- 页面主体 -->

<body>

</body>

</html>

三 HTML基本标签

标题标签

- 默认黑体，效果

- h1~h6字体大小依次变小

- 表示内容的标题，重要性依次降低，

- h1一般在一个页面中只写一个，也是页面中最终要的标签

- 颜色大小可以更改，但语法意义没有变化，重在语义。

段落标签

p表示一个段落，默认换行，占用整行

换行

<br/>

单闭合标签

横线

<hr/>

四

特殊符号：

语法：& + 实体 + ;

空格： 

大于：>

小于：<

版本：©

问题：页面中输出<abc>?

分析：“<”和“>"符号为页面中的特殊符号，需要使用特殊符号

结论：使用特殊符号

五文本标签

字体标签

strong/b：加粗

em/i：斜体

del:删除

六

标签规范

1、标签名称，属性名称小写

2、标签必须合理嵌套，且必须闭合，单个标签也需要闭合

3、属性必须使用引号

七

注释：

作用：解释说明代码用途，用于沟通和交流，必须写（重视）

html注释，不能嵌套

课堂练习一

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐排行榜</title>
</head>
<style>
    li{
        margin: auto;
    }
    img{
        display: inline;
        position: fixed;
        left:145px;
    }
</style>
<body>
    <h1>音乐排行榜</h1>
<ol>
    <li><a href="#">潇洒走一回</a><img src="./image/pic1.png" alt="" ></li>
    <li><a href="#">偏偏喜欢你</a><img src="./image/pic1.png" alt="" ></li>
    <li><a href="#">酒干倘卖无 </a><img src="./image/pic1.png" alt="" ></li>
    <li><a href="#">不说再见</a><img src="./image/pic1.png" alt="" ></li>
    <li><a href="#">舍不得你</a><img src="./image/pic1.png" alt="" ></li>
    <li><a href="#">请跟我来</a><img src="./image/pic1.png" alt="" ></li>
</ol>
</body>

</html>