20220709 第二小组 罗大禹 学习笔记

HTML

1、重点：

1. 超级链接
2. 表格
3. 表单
4. 浏览器开发工具

学习心得：

1. 今天学习的东西开始掌握的还有些不熟练，在晚上将作业做完后，熟练了很多
2. 晚上做作业时没有思路时，多亏同学们给了我思路，能让我将知识点更好的掌握

学习内容：

1. HTML:HTML是用来描述网页的一种语言

超文本标记语言、动画、音频、视频、特效、超链接
用标签来定义网页

2. 基本组成

1. html:文档的根标签
2. head：头，标签处

点击查看代码

  ①title：适配搜索引擎（网页标题）。
  ②link：链接css的，引入样式<details>
​  ③style：定义css样式
  ④script：定义js，也可以引入js

3. body：身体，目前来说，网页上所有能看见的东西都是body里的

3. 基本标签（理解）:

点击查看代码

h1—h6：大字标题，加粗，变大,从一到六，由大至小(成对)
<b>加粗效果</b>
<strong>加粗效果</strong>
<em>强调文本，字体倾斜</em>
<i>斜体（一种字体）</i>
<kbd>键盘输入</kbd>
<pre>预输入</pre>
<code>计算机代码</code>:
<sub>下角标</sub>
<sup>上角标</sup>
<ins>下划线</ins>
<del>删除文本</del>

可分为两大类

1.行级元素：不能自己换行

点击查看代码

<em>字体倾斜</em>
<i>斜体</i>
<b>加粗</b>
<strong>加粗</strong>
h1-h6
<kbd>键盘输入</kbd>
<small>更小的字体</small>
<abbr>缩写</abbr>
<pre>预输入</pre>
<code>计算机代码</code>
行
<span></span>

2.块级元素：可以自己换行

点击查看代码

1.<br>回车
2.<p></p>上下各空一行
3.无序列表
<ol>
    <li>无序列表</li>
</ol>
4.有序列表
<ul>
    <li>有序列表</li>
</ul>
5.自定义列表
<dl>
    <dt>自定义列表</dt>
    <dd></dd>
</dl>
块
<div></div>

4. 重点 超级链接（理解）

点击查看代码

<a href="#tips"></a>
href=""：要去得地方，当前页面下的
href="../"：返回上一级目录
锚记链接：跳转到当前页面的某个位置<a href="#tips"></a>  
                                <a id="tip"></a>

5. 重点 表格（理解）

table>tr(行)>td

点击查看代码

<table border="1 加框" cellspacing="0 框之间的距离" cellpadding="字和框之间的距离，以左边和上边为准">
    <tr>
        <td colspan="合并列"  rowspan="合并行"></td>  
    </tr>
</table>

6.列表（理解）

点击查看代码

无序列表
<ul>
      <li><li>
</ul>

有序列表
<ol>
      <li><li>
</ol>

自定义列表
<dl>
    <dt>123</dt>
    <dd>111</dd>
    <dd>123</dd>
    <dt>456</dt>
    <dd>222</dd>
</dl>

7. 重点 表单（理解）

点击查看代码

<form>
文本类：
<input type="text" maxlength="12"name="用户名" placeholder="用户名必须小于12位" required>
mexlength最大位数  placeholder文本框中浅字（输入文字后消失）  required必须输入
</form>
密码类：
<input type="password">
多选类：
<input type="checkbox">
单选类：
<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女
checked默认选择
下拉框：
<select>
    <option>123</option>
</select>
邮箱：
<input type="email">
日期类：
<input type="date">
数字类：
<inout type="number" min="" max="">
min最少为多少 max最多为多少
上传文件：
<input type="file">
提交和重置按钮只能控制和它在同一个form表单标签里的元素：
<input type="submit" value="注册">
<input type="reset" value="重置">
<input type="button" value="自定义">
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">自定义</button>