HTML5+CSS3笔记01（标签）
文章目录
- 初识web
- 第一章初识HTML5
- 1 标签
- 1.1标签概述
- 1.2标签的关系
- 1.3标签属性
- 1.4HTML5 文档头部相关标签
- 2 文本控制标签
- 2.1段落标签
- 2.2水平线标签
- 2.3换行标签
- 3 文本样式标签
- 3.1文本格式化标签
- 4代码总结
- 5 图片标签
- 6路径的介绍
- 7 音频标签
- 8 视频标签
- 9 链接标签
- 10 列表标签
vscode下载地址
初识web
WEB标准的构成：
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 页面元素与内容 |
| 表现 | CSS | 网页元素的外观和位置等（页面元素） |
| 行为 | JavaScript | 网页模型的定义与页面交互 |
第一章初识HTML5
1 标签
<!DOCTYPE html> <!-- 文档类型声明：用于向浏览器说明当前文件使用哪一种HTML或xhtml标准规范 -->
<html lang="en"><!-- 根标签：用于告知浏览器其自身是一个HTML文档 -->
<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>Document</title>
</head><!-- 头标签的结束 -->
</body><!--主体标签：浏览器中显示的内容都必须位于body标签内 -->开速写出结构：shift+! 按 enter注释快捷键：CTRL+/
</body><!-- 主体的结束 -->
</html><!-- 文档的结束 -->
1.1标签概述
所谓标签就是放在“<>”符号中表示某个功能的编译命令，也称为HTML标记或HTML元素
标签的分类：
双标签：由开始标签+结束标签 如 < html >,< /html >
语法格式：
<标签名>内容</标签名>
单表签：一个标签完成整个功能的描述的标签
快捷键为：CTRL+/
语法格式：
<标签名/>
注释标签是一种具有特殊功能的单表签
1.2标签的关系
父子关系（嵌套关系）：在标签的嵌套的过程中，必须先结束最靠近内容的标签，再按照由内到外的顺序依次关闭标签。
兄弟关系（并列关系）：两个标签处于同一级别并且没有包含关系。
1.3标签属性
语法格式：
<标签名 属性1="属性值" 属性2="属性值" ···></标签名>
<p align="center">我是居中显示的文字</p>
1.4HTML5 文档头部相关标签
1 < title >
< title >用于定义HTML页面的标签（网页的名字），位于head标签的内部且只有一对
2 定义页面元素信息标签<meta / >
< meta / >是一个单表签，本身不包含任何内容，仅仅表示网页的相关信息。通过标签的两组属性，可以定义页面的相关参数。
<meta name="名称" content="值"/>
http-equiv属性提供参数类型，content属性提供对应的参数值 在HTML5中简化了字符集的写法，代码如下： ```html ``` ## 2 文本控制标签 ### 标题标签
<hn align="对齐方式（left【默认】,rifht,center）">标题文本</hn>
n的取值为：1~6，代表1~6级标题
<h1>一级标题(默认对齐方式，左对齐)</h1><hr><h2 align="left">二级标题（左对齐）</h2><hr><h3 align ="right">三级标题（右对齐）</h3><hr><h4 align="center">四级标题（中间对齐）</h4>
2 文本控制标签
2.1段落标签
<p align="对齐方式">段落文本</p>
2.2水平线标签
<hr>
2.3换行标签
<br>
3 文本样式标签
3.1文本格式化标签
<strong>加粗的文字</strong><ins>下划线</ins><br><em>斜线</em><br><del>删除线</del><br><cite>引用</cite>  —— 空格符
4代码总结
<!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>
<body><!-- 注释：ctrl + / --><h1>一级标题(默认对齐方式，左对齐)</h1><hr><h2 align="left">二级标题（左对齐）</h2><hr><h3 align ="right">三级标题（右对齐）</h3><hr><h4 align="center">四级标题（中间对齐）</h4><strong>加粗的文字</strong><ins>下划线</ins><br><em>斜线</em><br><del>删除线</del><br><p>Swiss Army knife 可以说是本周的关键词了，多个项目采用该词来描述它的特性：像是能全方位解决浏览器“网络”操作的 CyberChef <br> 方便你进行数据加密、解编码，还有帮你处理 JSON 数据的 DevToys、方便在查询数据文件的 dsq，都是很实用的开发小工具，符合“瑞士军刀”的特性。<br>当然还有一些好用的大厂新鲜开源的工具，比如用在王者荣耀“身上”的动画工具 libpag，还有纯、标准卷积神经网络实现的 ConvNeXt，方便你做桌面窗口开发的 Windows.js…以下内容摘录自微博@HelloGitHub 的 GitHub Trending 及 Hacker News 热帖（简称 HN 热帖）,<br>选项标准：新发布 | 实用 | 有趣，根据项目 release 时间分类，发布时间不超过 14 day 的项目会标注 New，无该标志则说明项目 release 超过半月。由于本文篇幅有限，还有部分项目未能在本文展示，望周知
HTML5+CSS3笔记01（标签）相关推荐
- 最最详细的黑马前端HTML5+CSS3笔记，给大家整理好了
基于黑马前端视频学习的CSS3笔记,每一天的知识点都放在一起,方便学习查阅 ==CSS第一天== 一.css简介 二.css语法规范 三.css代码风格 四.css选择器的作用 五.css基础选择器 ...
- html5学习笔记---01.HTML5介绍,02.HTML5的新特性
2013/6/10 01.HTML5介绍 a.创梦技术qq交流群:CreDream:251572072 -------------------- a.创梦技术qq交流群:CreDream:251572 ...
- html5+css3笔记整理
目录 day1 01-标题 02-段落标签 03-文本格式 04-图片标签 05-音频标签 06-视频标签 07-链接标签 day2 01-列表-无序 02-列表-有序 03-列表-自定义 04-列表 ...
- HTML5+CSS3笔记
文章目录 HTML5新增特性: CSS3新增特性: **属性选择器** **结构伪类选择器** 伪元素选择器 2.盒子模型: CSS3 弹性盒子(flex box) **flex-direction: ...
- HTML5+CSS3笔记(二)
一.css基础 派生选择器 ul li <ul> <li></li> </ul> id选择器 #main <div id="main&q ...
- html5 css 笔记,HTML5+CSS3笔记
8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? emmet语法? IE 9 + H5新增的语义化标签 除了ie,这些标签默认是块元素header :定义页面头部 nav ...
- HTML5/CSS3笔记
前言: 前端无非就是围绕标签.属性.属性值这三个词展开的. (标签也可以叫做元素, 元素的内容是开始标签与结束标签之间的内容) *常规标签 <标签 属性1="属性值1" 属性 ...
- 尚硅谷web前端HTML5+CSS3笔记
目录 1尚硅谷-课程简介 2尚硅谷-网页简史 3尚硅谷-HTML简史 4尚硅谷-编写你的第一个网页 5尚硅谷-安装notepad++ 6尚硅谷-自结束标签和注释 7尚硅谷-标签中的属性 8尚硅谷-文档 ...
- 2022最新html5+css3笔记
VsCode快捷键 Chrome调试工具 思维导图 Html 渲染引擎 渲染引擎:浏览器中,专门用来对代码进行解析渲染的部分. Can I use 注意:渲染引擎不同,导致解析相同的代码,速度,效果也 ...
最新文章
- python gui选择_Python之GUI的最终选择(Tkinter)
- 恢复SAP IDES中SPFLI SFLIGHT SBOOK表数据
- django models索引_Django（生命周期、每部分详解、路由层）
- linux服务器运行matlab文件报错
- 大理三塔，及崇圣寺里的假深沉
- leetcode56. 合并区间
- 关于neo4j初入门（2）
- 河南城建计算机网络试卷,河南城建计算机网络技术学习心得体会.docx
- 【11】 Express安装入门与模版引擎ejs
- 产品，是解决问题的载体
- opencv3.2.0 Cmake 3.8.0 + tdm-gcc-5.1.0-3 OpenThread
- secure CRT连接华三、华为模拟器
- ug侧铣头编程_基于UG建模和仿真的拖拉机箱体零件数控加工研究
- 通过ramdump 分析匿名页导致的TASK_UNINTERRUPTIBLE
- 芯片后端设计的DRC是什么
- 如何阅读一本好书：APUE
- sql 大于 小于 大于等于 小于等于 符号
- 【技能】Chrome扩展程序的使用
- goland 注释模板_论文写作标准格式模板
- Android-如何自定义crash处理器
热门文章