Collection
Collection
首先要说明一下HTML是什么鬼。
HTML 是用来描述网页的一种语言-超文本标记语言（Hyper Text Markup Language），它不是编程语言，而是一种标记语言（markup language）。
下面我们就来详细的介绍一下HTML常用的几个标签。
一、标题与段落（div，h1~h6，大多只用到h1~h3，p等）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>标题与段落</title> </head> <body> <div> <!-- 标题标签共有6级: h1 ~ h6, 大多只用到h1~h3 --> <h1>我的博客1</h1> <h2>我的博客2</h2> <h3>我的博客3</h3> <p>就是这么丰富多彩</p> <!-- 段落可以有多个 --> <p>你说是不是啊</p> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
二、 文本修饰（strong，em等）
<!-- strong: 文本加粗 --> <p>你满头的<strong style="background: black;color:white">白发</strong>, 是不是没有用过<span style="color:green">霸王</span></p> <!-- em: 文本斜体 --> <p><em style="color:red">洗发水</em></p>
点击 "运行实例" 按钮查看在线实例
三、列表（ 将一组有共同特征的内容归纳在一起 ul，li，ol，dt，dd）
<div> <!-- 无序列表: 每个列表项之间无特定顺序,默认前面有一个小圆点,可嵌套 --> <h3>购物清单</h3> <ul> <li>1. 买了佛冷</li> <li>2. 买了个表</li> <li>3. 买了个锤子</li> </ul> <!-- 其实这个购物清单更适合有序列表,列表项前自动添加数值序号(从1开始) --> <ol> <li>买了佛冷</li> <li>买了个表</li> <li>买了个锤子</li> </ol> <!-- 定义列表,类似于名称解释,常用用来做友情链接 --> <dl> <dt>老王</dt> <dd>隔壁邻居</dd> <dt>范冰冰</dt> <dd>基本歇菜的演员</dd> </dl> </div>
点击 "运行实例" 按钮查看在线实例
四、 表格（表格是最重要的格式化数据的工具。完整表格,涉及标签: table,caption, thead,tbody,tfoot,tr,th,td。表格至少涉及三个标签: table(表格), tr(行), th/td(单元格) ）
<table border="1" cellpadding="0" cellspacing="0" width="500" height="150"> <caption>购物车</caption> <!-- 表头 --> <thead> <tr bgcolor="lightblue"> <th>序号</th> <th>名称</th> <th>价格</th> <th>数量</th> <th>用途</th> </tr> </thead> <tr> <td align="center">1</td> <td align="center">佛冷</td> <td align="center">30</td> <td align="center">1</td> <td align="center">why</td> </tr> <!-- align="center"可以用到tr上再加方便 --> <tr align="center"> <td>2</td> <td>表</td> <td>5000</td> <td>1</td> <td>去年买的</td> </tr> <tr align="center"> <td>3</td> <td>锤子</td> <td>30</td> <td>1</td> <td>山丘之锤</td> </tr> </table>
点击 "运行实例" 按钮查看在线实例
五、 表单
(1) 表单是最重要的交互工具,用户可以通过表单,将数据提交到后端服务器上进行处理
(2) 表单涉及:form,label,input,select,textarea,button标签
(3) 表单form标签中的元素,又称为表单控件,每个控件除了部分公共属性外,还有一些特殊属性
<!-- 下面以用户注册表单为例进行演示 --> <h2>用户注册</h2> <form action="" method="GET"> <div> <!-- (1)控件的提示文本应该放在独立的label标签中,label的for属性与控件的id绑定 (2)一旦绑定成功, 点击标签文本,焦点会自动落到对应的控件上 --> <!-- 用户名: --> <label for="username">用户名:</label> <!-- name和value属性应该成对出现,将用户数据以名值对的形式提交到服务器上指定脚本处理 --> <!-- placeholder: 用户于设置文本框的提示文本 --> <input type="text" id="username" name="username" value="" placeholder="不少于6位"> </div> <div> <!-- 再介绍一种语法,可以少写二个属性for,id,将控件元素写在label标签内 --> <label> <!-- password类型,输入的内容以*号占位符代替 --> 密码: <input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30"> </label> </div> <div> <label> 确认密码: <input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30"> </label> </div> <div> <!-- 单选按钮,每一组的name属性值必须相同,才会只返回唯一值,并自动设置它的checked属性 --> <!-- 可以事先用checked属性设置默认选中值, 标签文本与value值不必相同,value才是提交到后端的数据 --> <input type="radio" name="gender" id="male" value="male" checked><label for="male">男</label> <input type="radio" name="gender" id="female" value="female"><label for="female">女</label> </div> <div> <!-- 复选框 --> <!-- 将提示文本全部放在label标签中,确保点击标签文本,也可以选中对应的复选框 --> <!-- 一组复选框的name属性必须是相同的, 应该使用数组的语法,因为可以同时选择多个 --> <input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">打游戏</label> <input type="checkbox" name="hobby[]" value="smoke" id="smoke"><label for="smoke">抽烟</label> <!-- 同样也是使用checked设置默认值,可同时设置多个 --> <input type="checkbox" name="hobby[]" value="programme" id="programme" checked><label for="programme">撸代码</label> </div> <div> <!-- 下拉列表,name固定,但value是动态的,select中的value根据内部的option选中状态变化 --> <label for="edu">您的学历:</label> <select name="" id="edu" value=""> <option value="1">幼儿园算吗?</option> <!-- selected设置默认项 --> <option value="2" selected>小学没毕业</option> <option value="3">不好意思,博士后</option> </select> </div> <!-- 文本域,其实就是多行文本框 --> <div> <label for="common">请留言:</label> <textarea name="" id="common" cols="30" rows="10" placeholder="不超过100字" value=""></textarea> </div> <!-- 按钮 --> <input type="submit" value="提交"> <!-- 重置功能极少用到,推荐不要再使用,而是通过其它方式 --> <input type="reset" value="重置"> <!-- 推荐使用语义化的button标签 --> <!-- button默认类型为提交submit,通常是修改为button类型,最后通过ajax异步提交表单 --> <button type="button">注册</button> </form>
点击 "运行实例" 按钮查看在线实例
六、图片与媒体（img，video）
<!-- 图片标签是单标签,引入的是外部的资源 src="图片地址", 支持本地和网络url地址 alt="提示文本", 当图片不能显示或被用户禁用时显示它,seo优化也会用到它 --> <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=1778723544,1852733979&fm=173&app=25&f=JPEG?w=218&h=146&s=E296708C68578FC61E8C3C850300508C" alt="《Genesis》五大优势：做主机MOBA领域的开拓者" width="200"> <!-- 播放视频:controls显示播放控件, 支持宽度设置 --> <video src="http://119.84.52.91/6571F3CC44C4C71EBF2644AA3/03000801005886CA06891C0000000174B829E7-52AF-7C2A-3959-2C3CAC86DE5B.mp4?ccode=050F&duration=144&expire=18000&psid=26c9a3969badaae453511cb33a6dc14d&ups_client_netip=7153485d&ups_ts=1547530956&ups_userid=&utid=ON5lFBQhjQECAduDDO7vsiFr&vid=XMjAxNTk5NzEyOA%3D%3D&vkey=A82cbeb9e28a09bfef7995336a089e0d4&sp=&ali_redirect_domain=ykugc.cp31.ott.cibntv.net&ali_redirect_ex_ftag=19aab0979f301c7d69d250eb65ecb882507b0e8d3362687f&ali_redirect_ex_tmining_ts=1547530955&ali_redirect_ex_tmining_expire=3600&ali_redirect_ex_hot=0" controls width="400"></video>
点击 "运行实例" 按钮查看在线实例
当然还有很多标签和属性都没有一一举例，但以上的标签都是常用的。
CSS：层叠样式表, 是用来定义页面上的html元素如何显示的一组规则或声明
基本语法: 选择器 {样式声明}
1. 选择器: 最基本的有标签,类class, id 。这三个常用选择器的优先级是: 标签 < 类class < id
2. 样式声明: 包括属性和值二部分
3. 样式规则 = 选择器 + 样式声明
CSS盒子模型
1. 盒模型是布局的基础,页面上的一切可见元素皆可看做盒子
2. 盒子默认都是块级元素: 独占一行,支持宽度设置
3. 盒子模型分为三个层级:
a. 内容级: 宽高和背景三个属性
(1): width
(2): height
(3): background-color (默认透明)
b. 元素级(可视范围)
(1): 包括内容级(width + height + background)
(2): 内边距: padding
(3): 边框: border
c. 位置级:margin, 决定当前盒子与其它盒子之间的位置与关系
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
