学习HTML第一天

2401_83588067

已于 2024-09-10 13:48:39 修改

阅读量699

点赞数 8

文章标签：学习 html 前端

于 2024-09-10 11:28:16 首次发布

本文链接：https://blog.csdn.net/2401_83588067/article/details/142094135

版权

准备工作

安装编辑软件和Chrome浏览器

2、创建指定目录存放代码文件

一、概述

是什么：HTML 是超文本标记语言，是网页开发的标准语言。
为什么：浏览器展示图文信息需要容器 / 骨架承载，HTML 用于搭建网页结构、划分页面结构。

二、HTML 基础模板及使用要点

基础模板

<!DOCTYPE html> <!-- 声明文档类型 -->
<html lang="zh"> <!-- 根元素 -->
<head> <!-- 网页头部标签 (不可视化部分) -->
    <meta charset="UTF-8"> <!-- 字符编码设置为 UTF - 8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端视口信息设置 -->
    <title>网页标题</title><!-- 浏览器 topbar 显示标题 -->
</head>
<body>
    <!-- 网页主体（可视化部分） -->
     <h1>hello world!</h1>
     <div class="text5">5</div>
</body>
</html>

使用标签要点
- 标签开闭原则：双标签符合开闭原则<开始标签> </结束标签>，单标签<单标签>。
- 标签字母：标签字母小写。
- 标签属性：<标签标签属性 = “值”> </标签>。
- 类名和 ID 命名
  - 字母开头，不能用数字或特殊字符开头。
  - 不能用特殊符号（如 @!#%&*）命名。
  - 可以数字结尾，如 text1、box1。
  - 类名属性可驼峰命名（如 loginButton、indexHeader、indexList）或用短横线（如 login - button、index - header、index - list）。
  - ID 名称建议驼峰命名。
  - 不推荐但可以使用中文命名。
注释：

三、元素分类

无语义标签
- div：块标签。
- span：行内标签。
含语义标签
- h1 - h6：标题标签，默认字体加粗，一个网页通常一个 h1 标签，属于块标签。
- p：段落标签，形容一段文本或字符，可嵌套文本、行内元素，不能直接嵌套块元素，是块标签。
- ul li：无序列表标签。
- ol li：有序列表标签。
- dl dt dd：自定义列表。
- img：图片标签，单标签，行内块标签，可在同一行显示且能直接设宽度高度。
- table thead tr th tbody td：表格标签。
- a：链接标签。
- u：带下划线标签。
- i：斜体字标签。
- del：带删除线标签。
- b：加粗标签。
- strong：字体加粗标签。
- form：表单标签。
- input：输入框标签等多种作用。
- button：按钮标签。
- select option：下拉标签。

四、元素显示特点

块级元素：默认display: block，独占一行显示，可直接设宽度高度。
行内元素：默认display: inline，在同一行显示，不能直接设宽度高度，用于修饰页面细节。
行内块元素：默认display: inline - block，可在同一行显示且能直接设宽度高度，用于布局页面细节、小的区块，但可能出现文本空白，可通过嵌套标签并设font - size为 0 解决。

五、常见标签详解

标题标签
- 从h1到h6，字体默认加粗，一个网页通常一个h1标签，且都是块标签。
段落标签
- 用于表示一段文本，不能嵌套块元素，可嵌套文本和行内元素，是块标签。
列表标签
- 无序列表ul与li、有序列表ol与li、自定义列表dl与dt和dd，都可独占一行且直接设宽度高度，视为块级元素。
图片标签
- img是单标签，行内块标签，通过src属性填写图片路径，alt属性描述图片，title可添加标题。
- 路径问题
  - 本地相对路径（推荐）：./表示当前路径，../表示上一级目录路径，../../表示上上一级目录路径。
  - http 环境下相对路径。
  - 绝对路径（客户端不推荐使用）：带电脑盘符，如E:\...，需在文件传输协议file:///下访问。

六、作业练习

文本素材：

新华全媒+│辞旧迎新活力勃发

2024-01-01 22:16 来源: 新华社发布于：北京市

原标题：新华全媒+｜辞旧迎新活力勃发

辞别旧岁，万象更新。

时光叩开2024年的大门，与我们相拥。

在神州大地上，人们正以不同的方式，书写崭新的2024。

新的一年，奋斗不息，前进不止。

2024，继续出发！

记者：张智敏、黄国保、邓瑞璇、陈思汗、丁怡全、丁汀、贾远琨、狄春、杨静、熊轩昂、王怿文、李涛、范培珅、马莎、张睿、马希平、冯媛媛、王松、鞠焕宗、王修楠、田晨旭

摄制：姚巍

报道员：吴菲、陈思瑾、许津铭、杨坤明、叶刘琦、王扬、李春雷、孙文然、杨代迎、安丽、李申圣、王钊