前端之客户端学习1
- 第一次写博客，想与大家一起学习前端，有什么不足的地方，希望大家查漏补缺，一起学习进步。本节主要讲一些常见的标签。
学习小目标
1、页面重构师（像素级还原,无限接近100%的还原度）(html\css)(pc端\移动端页面)
2、初级前端工程师(javascript的基本语法)(要能够做页面上JS的所有效果)
3、中级前端工程师(node.js可以做后台前端，模块化)
4、高级前端工程师（各种前端框架，reacy\Vue\移动端\小程序）
HTML(以及常用标签)
DOCTYPE（标准模式）(IE6、7浏览器的淘汰)：指定一个标准在浏览器上运行，不写的话不同的浏览器运行的结果不一样。
1、结构、样式和行为分别指什么？
结构：指的是html
样式：指的是CSS
行为：指的是javascript
2、HTML4、XHTML和HTML5的区别？
HTML4：格式语法等规范不明确，可以随意使用
XHTML：制定了规范，但是没有增加新的内容，不被程序员认可和使用
HTML5：由几个浏览器公司先研发出来，后由W3C收回去管理，里面新行了内容并制定了规范，新的内容包含html.css.javascript方面。
3、节点树
- 节点树(DOM tree)(各种标签树有根节点、父节点、字节点等关系其中name属性一般是按钮标签用于交互)
- 一个标签由标签元素，属性元素，文本元素组成
4、描述一个HTML网页基本组成部分以及每个标签的作用。
- html：根元素包含所有的元素
- head：编写网页标题
- meta：标识页面的其他元素（页面相关的附加信息），这是一个空元素
- title：标识文档标题，该标题会显示在浏览器的标题栏或者标签页上
- body：编写网页内容
- h1-h6标签：添加各种级别标题
- p标签：用于添加并加工文本文字
- a标签：用于添加文本文字，可以添加超链接
- image标签：用于添加图片
- head：编写网页标题
5、什么是行内元素和块级元素？
块级元素：每一个元素独占一行，会自动换行。
行内元素：元素不独占一行，会在一排显示。
6、什么是相对路径和绝对路径？
绝对路径：是外部的引入，由/或者http开头的为绝对路径。
相对路径：是代码所在整个文件夹内部的一个引入，由./和.//或者省略./开头的路径。
7、常用的HTML标签由哪些？
h1~h6：标题标签，数字从1-6标题从大到小
a ：超链接，用来跳转到其它页面，或者跳转到整个页面的指定位置
p ：段落标签，通常用于一段文字，写两个p标签会自动换行，并有html默认的一个间距
strong：用于强调某个内容的标签，被强调的元素会加粗加黑
span：仅用于给一小段文本添加样式，可以跨越字符，不会换行
ul ：无序列表
ol：有序列表
li：列表项
div：表示页面中的一块区域
img：用于引入图片的标签
br：空元素，强制换行的标签
pre：预格式化元素，保留文本在源代码中的格式
特殊标签
1、语义化的标签
header：用于表示页面或某个区域的头部
nav：用于表示导航栏
aside：用于表示跟主题周围相关的附加信息
article：表示文章或其他可独立页面存在的内容
section：用于表示一个整体的一部分主题
footer：用于表示一个整体的一部分主题用于表示页面或某个区域的底部
2、为什么要语义化？
- 为了使网页结构清晰
- 方便搜索引擎优化
- 利于特殊设备的读取
3、表格标签
table：表格的标签，代表整个表格
caption：表格的标题
thead：表头，表格每列的内容名称
tbody：表格主体，表格的主要内容
tfoot：表尾，一般很少用，表格的结尾
tr：代表表格的每一行
th：用于表头的单元格，字体会加粗
td：表格的单元格，用于分列
rowspan：跨行，相当于上下单元格合并
colspan：跨列，相当于左右单元格合并
4、表单标签
form：常用于定义一个表单的范围
* 属性:action 提交到地址，默认提交到当前页面
* method 表单的提交方式:
* 常用的有两种：get和post，默认是get请求:
* get请求栏会携带提交的数据，而post不会；
* get请求安全性低，post较高;
* get请求有数据大小的限制，而post没有限制;
input : 可以输入内容或选择内容的部分
select:下拉输入项
5、什么是表单？表单的作用是什么？
- 包含标签，表单域，表单按钮则为表单
- 表单的作用是数据采集，用户交互和提交信息至服务器
6、input标签type属性不同作用不同。
-
常见type属性10种：
-
具有交互性表单：
- text：单行文本
- password：密码
- radio：单项选择
- checkbax：多项选择
- file：文件上传
-
按钮表单：
- submit：提交到服务器
- image：图片提交
- reset：重载
- button：普通按钮
-
特殊表单:
- hidden：隐藏表单，用于传递数据
-
-
特殊属性：
- readonly：只读，数据可以提交服务器，只能用于输入框
- disable：禁用，数据不可以提交服务器，可以用于所有表单元素
- multple：下拉列表变多选列表
以下是一些示例代码
1、一般表格的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格示例</title>
</head>
<body>
<table border="1">
<caption>前端基础考试成绩</caption>
<thead>
<tr>
<th>班级</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>得分</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">3年1班</td>
<td>喜羊羊</td>
<td>男</td>
<td>4</td>
<td>80</td>
</tr>
<tr>
<td>美洋洋</td>
<td>女</td>
<td>3</td>
<td>70</td>
</tr>
<tr>
<td>3年2班</td>
<td>灰太狼</td>
<td>男</td>
<td>6</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">总分</td>
<td>235</td>
</tr>
<tr>
<td colspan="4">平均分</td>
<td>78</td>
</tr>
</tfoot>
</table>
</body>
</html>
2、简单的表单实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<form action="#" method="POST">
<fieldset>
<legend>注册</legend>
<div>
<label for="username">用户名：</label>
<!--加readonly变只读，还可以提交服务器，只能用在输入框-->
<!--disabled禁用，不能提交服务器-->
<input id="username" type="text" placeholder="请输入用户名">
</div>
<div>
<label for="pwd">密码：</label>
<input id="pwd" type="password">
</div>
<div>
<label for="phone">手机号：</label>
<input id="phone" type="number">
</div>
<div>
<label for="email">邮箱：</label>
<input id="email" type="email">
</div>
<!--单选-->
<div>
<label>性别：</label>
<input id="male" name="gender" type="radio"><label for="male">男</label>
<input id="female" name="gender" type="radio"><label for="female">女</label>
</div>
<!--多选-->
<div>
<label>选择使用的编辑器：</label>
<input id="#1" type="checkbox"><label for="#1">vscode</label>
<input id="#2" type="checkbox"><label for="#2">webstorm</label>
<input id="#3" type="checkbox"><label for="#3">pycharm</label>
<input id="#4" type="checkbox"><label for="#4">sublime</label>
</div>
<!--选择文件-->
<div>
<label for="">上传头像：</label>
<input type="file">
</div>
<div>
<label>所在的城市：</label>
<select><!--加multiple，为多选-->
<option>成都</option>
<option>北京</option>
<option>上海</option>
</select>
</div>
<!--带有选择的输入框-->
<div>
<label>选择会的语言：</label>
<input list="language" type="text">
<datalist id="language">
<option>HTML</option>
<option>CSS</option>
<option>Java</option>
</datalist>
</div>
<div>
<label for="mark">备注：</label>
<textarea id="mark" cols="30" rows="10"></textarea>
</div>
<!--按钮-->
<div>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="没有功能的普通按钮">
<img src="../buttonSure.jpg" alt="">
<input type="image" src="../buttonSure.jpg">
<!--隐藏表单，传递数据-->
</div>
</fieldset>
</form>
</body>
</html>
总结
- 以上简单简绍了一些html标签以及用法，以后会给大家讲前端的CSS样式的知识，标签的学习在于多多的练习，在学习css过程中还会教大家如何使用标签布局，所以标签就先讲到这里了。希望大家多多指教。