HTML基本语法学习笔记

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来设置
1. ailgn用来规定整个表格相对周围元素的对齐方式
2. border用来规定单元格是否含有边框，默认“”，表示没有边框，1表示有边框
3. cellpadding用来规定单元边沿与文字之间的间隔，默认为1像素
4. width用来规定表格整体的宽度
表格结构标签—使得表格结构更加清晰
1. <thead>标签表示表格头部标签（虽然是表格头部标签，但是依旧不能省略<tr>标签）
2. <thbody>用来表示表格的主体，用于存放数据主题
合并单元格
1. 步骤
  - 先打好完整表格
  - 确定是跨行clospan还是跨列rowspan合并
  - 找到目标单元格，写上合并方式比如<td> clospan= "2" ></td>,<td rowspan="2"></td>。
  - 删除多余的单元格

列表标签

表格用来显示数据，列表用来布局

列表最大的优点就是整齐，作为布局会十分方便和自由

列表：有序无序自定义三类

无序列表（最为重要）
1. <ul>标签中只能放<li>
2. 但是<li>标签中可以放任何属性的标签
3. 无序列表中的小圆点可以用css自定义
有序列表
1. <ol>标签中只能放<li>标签
2. 其他与上一直
自定义标签（重点）
1. 自定义列表标签为<dl>
2. 第一栏标签为<dt>
3. 解释<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老师哪儿学的，做了点笔记，主要是为以后复习做准备，小白刚刚开始打怪，期间记录如果有误还请指正。