1.认识HTML：
html不是一种编程语言，是一种标记语言。标记语言是由一套标识标签组成的。html使用标签来描述网页。
<!-- 设置文档类型为:html -->
<!DOCTYPE html>
<!-- html是根标签,有且仅有一个,代表整个文档,lang设置页面默认语言为english -->
<html lang="en">
<!-- head是头标签,它的内容供浏览器读取,除title外, 其它内容用户并不关心 -->
<head>
<!-- 设置当前页面中的文本采用的默认编码字符集为utf8 -->
<meta charset="UTF-8">
<!-- 设置页面标题文本内容,显示在游览器窗口的标签页 -->
<title>Document</title>
</head>
<!--浏览器显示的内容-->
<body>
</body>
</html>
2.HTML标签
<h1>—-<h6>用于标题文本，会使字体变大,h1>h2>h3>h4>h5>h6>h7
<p>标签 段落标签
<strong>文字产生加粗效果
<span>对被用来组合文档中的行内元素
<em>文字斜体
<a>超链接，他有一个必不可少的属性 href（超链接地址）
href*属性：设置跳转的网页地址
target属性：设置跳转的目标
创建锚点和锚链接
锚点也是一种超链接，是页面内进行跳转的超链接
第一步：创建锚点 <a name="锚点名称"></a>
第二步：使用创建好的锚点名称 <a href="#锚点名称">内容</a
<hr />在页面中添加一条水平分隔线
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a name="md">创建锚点</a>
<h1>用于标题文本，会使字体变大</h1>
<h2>用于标题文本，会使字体变大</h2>
<h3>用于标题文本，会使字体变大</h3>
<h4>用于标题文本，会使字体变大</h4>
<h5>用于标题文本，会使字体变大</h5>
<h6>用于标题文本，会使字体变大</h6>
<hr />
<p>段落标签</p>
<hr />
<strong>文字加粗</strong>
<hr />
<em>文字斜体</em>
<hr />
<a href="https://www.baidu.com/">超链接</a>
<a href="#md">锚点</a>
</body>
</html>
点击 "运行实例" 按钮查看在线实例
3.列表
<ul>无序列表
无序列表是一个没有顺序项目的列表，默认粗体圆点进行标识
无序列表-列表符号:type="circle" 空心圆 type=“disc” 实心圆 默认值 type="square" 方块符
<ul >
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
无序列表-嵌套
<ul>
<li>柚子
<ul>
<li>沙田柚</li>
<li>蜜柚</li>
</ul>
</li>
<li>荔枝</li>
<li>苹果</li>
</ul>
<ol>有序列表
有序列表也是一列项目，只是列表项目使用的是数字进行标记
有序列表-列表符号
type="A" A B C D
type="a" a b c d
type="1" 1 2 3 4
type=”I” I II III
type=”i” i ii iii
<ol>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ol>
有序列表-嵌套
<ol>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>果汁</li>
<li>牛奶</li>
</ol>
<dt>定义列表
定义列表不仅仅是一列项目，而是项目及其注释的组合.定义列表,类似于名称解释,常用用来做友情链接
<dl>
<dt>php中文网</dt>
<dd>学习网页前后端</dd>
</dl>
dd是对dt的解释
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<p>无序列表</p>
<ul >
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
<ul type="circle">
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
<ul type=“disc>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
<p>无序列表嵌套</p>
<ul >
<li>中国</li>
<ul >
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
<li>美国</li>
<ul >
<li>华盛顿</li>
<li>纽约</li>
<li>夏威夷</li>
</ul>
</ul>
<p>有序列表</p>
<ol>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ol>
<ol type="1">
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ol>
<ol type="A">
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ol>
<ol type="a">
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ol>
<p>有序列表嵌套</p>
<ol>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>果汁</li>
<ul>
<li>苹果汁</li>
<li>橙汁</li>
</ul>
</ol>
<P>定义列表</P>
<dl>
<dt>php中文网</dt>
<dd>学习网页前后端</dd>
</dl>
</body>
</html>
点击 "运行实例" 按钮查看在线实例
4.表单和表格
<table>表格标签
用它定义一个表格
<caption>表格标题
<th>表头（加粗，居中）
<tr>行标签：
<tr>可以定义表格中的一行，一个<tr></tr>表示一行。
<td>单元格标签:
<td>可以定义表格中的一个单元格，<td></td>表示一个单元格
rowspan合并行 colspan和并列
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="500" height="150">
<caption>档案</caption>
<tr>
<th >姓名</th>
<th>性别</th>
<th>爱好</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>旅游</td>
</tr>
</table>
</body>
</html>
点击 "运行实例" 按钮查看在线实例
border 规定表格边框的宽度。
cellpadding 规定单元边沿与其内容之间的空白。
cellspacing 规定单元格之间的空白。
<form>表单标签
表单是一个包含表单元素的区域，包括起来的都是表单的内容
(1) 表单是最重要的交互工具,用户可以通过表单,将数据提交到后端服务器上进行处理
(2) 表单涉及:form,label,input,select,textarea,button标签
(3) 表单form标签中的元素,又称为表单控件,每个控件除了部分公共属性外,还有一些特殊属性
Action和input确认按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。
<input>标签的掌握
常用type类型：
<input type="" name="" value="" />
type="text" 单行文本输入框
type="password" 密码（maxlength=""）
type="radio" 单项选择（checked="checked"）
type="checkbox" 多项选择
type="button" 按钮
type="submit" 提交 type="image"图片提交
type="file" 上传文件
type="reset"重置
type="hidden" 隐藏
<input type="text" name="" value="今天心情不错" />
<input type="radio" name="" value="" checked="checked">
<input type="checkbox" name="" value="" checked="checked">
<label>标签的使用
<label></label>
label 元素不会向用户呈现任何特殊效果。
不过，它为鼠标用户改进了可用性。
如果您在 label 元素内点击文本，就会触发此控件。
就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的for 属性应当与相关元素的 id属性相同。
<button type="button">提交按钮
<form action="html.do" method="get">
用户名: <input type="text" name="user" />
<input type="submit" value="提交" />
</form>
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>表单</p>
<form action="" method="get">
<p>单行文本输入框</p>
<input type="text" name="" value="单行文本输入框" />
<p>密码</p>
密码<input type="password" name="" value="密码" >
<p>单项选择</p>
<input type="radio" name="a" value="语文" >语文
<input type="radio" name="a" value="数学" >数学
<input type="radio" name="a" value="英语" >英语
<p></p>
<input type="checkbox" name="b" value="吃饭" >吃饭
<input type="checkbox" name="b" value="睡觉" >睡觉
<input type="checkbox" name="b" value="打豆豆" >打豆豆
<p>提交</p>
<input type="submit" name="" value="提交" >
<p>上传文件</p>
<input type="file" name="" value="上传文件" >
<p>重置</p>
<input type="reset" name="" value="重置" >
</form>
</body>
</html>
点击 "运行实例" 按钮查看在线实例
5.图片和媒体
<img/>图片标签
写法：<img src="" alt="" width="" height="" />
src="" 图片路径
alt="" 图片含义
width="" 图片宽度 和图片大小保持一致
height="" 图片高度 和图片大小保持一致
<img src="" alt="" width="" height=""/>
video
src*属性用来设置视频的url数据
controls播放按钮
<video src="" controls="controls" width="400"></video>
6.CSS的使用方式
内联样式:直接在标记内部通过style属性来写相应的样式
内部样式：在文档的<head>..</head>通过<style>样式...</style>
<style type='text/css'>
</style>
链接外部文件:在<head></head>之间通过<link />引入
外部的css文件，css文件扩展名为.css结尾
<link href='目标文档的URL' rel='stylesheet' type='text/css' charset='utf-8' />
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#test1{/*ID选择器*/
color:pink;
}
.test{/*类选择器*/
color:green;
}
p{/*类选择器*/
color:red;
}
</style>
</head>
<body>
<h2>选择器的优先级例子</h2>
<p >this is a test</p>
<p class='test' >this is a test</p>
<p class='test' id='test1'>this is a test</p>
<p class='test' id='test1' style='color:yellow;'>this is a test</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
