2020/08/23
学习内容
-
基础知识了解
-
HTML是一种超文本标记语言，它不是编程语言。
-
HTML是结构，Css是表现用于装饰网页，而要实现相应的行为就需要用到JS了。
-
html文件基本骨架及相关名词标识
<!DOCTYPE html> <!-- 文本版本标记标签，告诉浏览器使用的是哪个html版本， 这里表示用的是html5规范 --> <html lang="en"> <!-- 这里的lang表示语言，en表示English中文用zh-CN --> <head> <meta charset="UTF-8"> <!-- 表示编码格式是UTF-8的形式 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 用titl表示打开文件后显示给用户的名称 --> </head> <!-- head是文档头部标签 --> <body> <!-- 文档主题标签，主要内容都放在body标签中 --> </body> </html>
-
2020/8/25
表格标签
-
<table>标签表示表格 -
<td>表示表格数据，它是table date的简写 -
<tr>表示行 -
<th>表头，表格中，他申明的对象会加粗居中。 -
表格属性，
这一栏后面通过css来设置
ailgn用来规定整个表格相对周围元素的对齐方式border用来规定单元格是否含有边框，默认“”，表示没有边框，1表示有边框cellpadding用来规定单元边沿与文字之间的间隔，默认为1像素width用来规定表格整体的宽度
-
表格结构标签—使得表格结构更加清晰
<thead>标签表示表格头部标签（虽然是表格头部标签，但是依旧不能省略<tr>标签）<thbody>用来表示表格的主体，用于存放数据主题
-
合并单元格
-
步骤
-
先打好完整表格
-
确定是跨行
clospan还是跨列rowspan合并 -
找到目标单元格，写上合并方式比如
<td> clospan= "2" ></td>,<td rowspan="2"></td>。 -
删除多余的单元格
-
-
列表标签
表格用来显示数据，列表用来布局
列表最大的优点就是整齐，作为布局会十分方便和自由
列表：有序无序自定义三类
- 无序列表（最为重要）
<ul>标签中只能放<li>- 但是
<li>标签中可以放任何属性的标签 - 无序列表中的小圆点可以用css自定义
- 有序列表
<ol>标签中只能放<li>标签- 其他与上一直
- 自定义标签（重点）
- 自定义列表标签为
<dl> - 第一栏标签为
<dt> - 解释
<dt>项的标签为为<dd>
- 自定义列表标签为
表单标签
-
用途：收集用户信息与用户交互
-
表单的组成
- 表单域
<form>标签 - 表单控件（表单元素）
- 提示信息
- 表单域
-
表单域
<form>表单域将其范围内的表单元素信息提交给服务器-
语法规范
<form action="xxx.php"> 学号：<input type="text"> <br> </form> -
常用属性
action定义接受数据的地址,method定义提交方式,name定义表单域的名称。
-
-
表单控件（表单元素）
-
input输入表单元素-
注意
<input />为单标签 -
type属性用来定义输入字段的各种形式 -
单选框和复选框记得要设置
name，否则单选框无法单选 -
name表示表单元素的名字，单选按钮和复选框都要有相同的name值 -
经常用的还有
checked元素，用于调整默选 -
name和value是每个表单元素都有的值，主要是用给后台人员使用 -
示例
<form action="xxx.php"> 学号：<input type="text"> <br> 性别: 男<input type="radio" name="sex">女<input type="radio" name="sex"> </form>
-
-
<label>标签主要作用就是为input元素定义标注（标签），扩大选中范围。
-
用于绑定表单元素，当点击文本标签时就会自动选中对应的表单元素。
-
代码示范
<form> <label for="number">学号<input type="text" id="nubmer"></label> <!-- 使用laba标签来绑定表单元素,点击学号后就能选中文本框，注意form里面的值与input的id对应 --> </form>
-
-
select下拉表单元素-
代码示例
<select name="" id=""> <option value="">计算机院</option> <option value="">管理学院</option> <option value="">能源学院</option> <option value="">人外学院</option> <option value="">能源学院</option> <option value="" selected="select">安全学院</option> <!-- selected="select"定义了默认选中的选项--> </select>
-
-
textarea文本域表单元素用于处理有大量输入输入文本的地点
-
注意，它必须包含在
<form>标签中 -
代码示例
<form action=""> <!-- 其中cols和rows适用于定义文本框大小的，但是不常用，直接css优化 --> 留言板：<textarea name="" id="" cols="30" rows="10"></textarea> </form>
-
-
开学考完试后两周比较清闲，个人比较喜欢前端，希冀着自己有一天能做一个自己喜欢的页面，于是就开始学习HTML，知识点都是从pink老师哪儿学的，做了点笔记，主要是为以后复习做准备，小白刚刚开始打怪，期间记录如果有误还请指正。