HTML 是什么：即 HyperText Markup language 超文本标记语言，咱们熟知的网页就是用它编写的，HTML 的作用是定义网页的内容和结构。
<标签> 的方式赋予内容不同的功能和含义CSS 是什么：即 Cascading Style Sheets 级联（层叠）样式表，它描述了网页的表现与展示效果
JS脚本: javascript,页面元素的交互
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试页面title>
head>
<body>
<p id="p1">Hello, world!p>
<img src="1.png">
body>
html>
html 元素囊括了页面中所有其它元素，整个页面只需一个，称为根元素head 元素包含的是那些不用于展现内容的元素，如 title，link，meta 等body 元素包含了对用户展现内容的元素，例如后面会学到的用于展示文本、图片、视频、音频的各种元素HTML 由一系列元素 elements 组成，例如
<p>Hello, world!p>
整体称之为元素
和
标签包围起来的 Hello, world 称之为内容
p 是预先定义好的 html 标签，作用是将内容作为一个单独的段落
元素还可以有属性，如
<p id="p1">Hello, world!p>
元素之间可以嵌套，如
<p>HTML 是一门非常<b>强大b>的语言p>
错误嵌套写法：
<p>HTML 是一门非常<b>强大的语言p>b>
不包含内容的元素称之为空元素，如
<img src="1.png">
<img src="1.png"/>
标签的属性分为:通用属性, 预置属性, 事件属性, 自定义属性
DOCTYPE html>
<html lang="zh-CN">
<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>
<style>
.active {
background-color:green;
}
style>
<div class="active">hellodiv>
<div class="active" style="background-color: red;">worlddiv>
<a href="www.baidu.com" id="" class="" style="">百度a>
<img src="" alt="这是一张图片我也不知是啥" id="" class="" style="">
<button onclick="alert('提交成功')">提交button>
<div data-user-email="1111111@qq.com">我的邮箱是:div>
<button onclick="this.nextElementSibling.textContent = this.previousElementSibling.dataset.userEmail">获取邮箱button>
<p>p>
body>
html>
<h1>1号标题h1>
<h2>2号标题h2>
<h3>3号标题h3>
<h4>4号标题h4>
<h5>5号标题h5>
<h6>6号标题h6>
<p>段落p>
无序列表 unordered list
<ul>
<li>列表项1li>
<li>列表项2li>
<li>列表项3li>
ul>
有序列表
<ol>
<li>列表项1li>
<li>列表项2li>
<li>列表项3li>
ol>
多级列表
<ul>
<li>
北京市
<ul>
<li>海淀区li>
<li>朝阳区li>
<li>昌平区li>
ul>
li>
<li>
河北省
<ul>
<li>石家庄li>
<li>保定li>
ul>
li>
ul>
锚，超链接
<a href="网页地址">超链接文本a>
<img src="文件路径">
src 格式有 3 种
文件地址
data URL，格式如下
data:媒体类型;base64,数据
object URL，需要配合 javascript 使用
<video src="文件路径">video>
<audio src="文件路径">audio>
表单的作用：收集用户填入的数据，并将这些数据提交给服务器
表单的语法
<form action="服务器地址" method="请求方式" enctype="数据格式">
<input type="submit" value="提交按钮">
form>
文本框
<input type="text" name="uesrname">
密码框
<input type="password" name="password">
隐藏框
<input type="hidden" name="id">
日期框
<input type="date" name="birthday">
单选
<input type="radio" name="sex" value="男" checked>
<input type="radio" name="sex" value="女">
多选
<input type="checkbox" name="fav" value="唱歌">
<input type="checkbox" name="fav" value="逛街">
<input type="checkbox" name="fav" value="游戏">
文件上传
<input type="file" name="avatar">
在vscode中有快速生成代码的语法,采用的就是emmet语法
1 html:5 或 ! : 创建 html文档结构
2 id, class
#->id, . -> class
#->id{id1}, . -> class{class1}
3 层级: 父子, 兄弟
ul>li>a{xxxx}
兄弟 : +
.title{站点名称}+.url{百度}
4序号
ul.menu>li.item*4>a{item}
ul.menu>li.item*4>a{item$} --$默认从1开始递增,升序
ul.menu>li.item*4>a{item@} --@: 指定起始索引
快速创建一个5行8列的表格
table>caption{信息表}+(thead>tr>th{title}*8)+(tbody>tr*5>td{item}*8)
html5之后增加了语义化布局元素,产生语义化标签的原因是,很多页面的布局,程序员会默认把该模块的属性值设置成一样的名称,所以诞生了语义化元素
比如
<div id="header">headerdiv>
<div id="main">maindiv>
<div id="footer">footerdiv>
html5: 语义化布局元素
<header>headerheader>
<main>mainmain>
<footer>footerfooter>
出现语义化标签后,还是有大量的开发都, 喜欢用 div + class 模式, 不用语义化布局标签,这是因为什么?
注意:html是一个结构化的文本, 所以引入的外部元素, 必须使用标签进行包装
所以html文档: 是由上到下顺序解析 ,写css的style标签,对位置不敏感,写js的script标签,如果涉及到html-dom元素操作,则对位置非常敏感,所以一般在html文档节点加载完之后在加载js的代码,否定会出异常