2022-08-22 第二小组 张鑫 学习笔记

实训四十四天 HTML复习

学习内容

HTML基本框架

• head：头，标签处。包含了所有的头部信息元素
• title：适配搜索引擎 meta charset=utf-8 定义了浏览器工具栏的标题,当网页被收藏到收藏夹，显示的默认标题；显示在搜索引擎结果页面的标题
• base 描述了基本的链接地址/链接目录，作为HTML文档中所有的标签链接的默认链接
• link：链接css，引用css层叠样式表（单独出现）
• style： 定义css层叠样式表
• script： 既可以定义script脚本，也可以引用script文件（不建议写在head里，写在body最下方）
• meta：元数据 指定网页的描述，关键词，文件最后修改的时间，作者...（可以定义搜索引擎的关键词）

---

基本标签

• h1—h6：标题标签，字体变大，上下空一行

<h1>我是标题h1</h1>
<h2>我是标题h2</h2>
<h3>我是标题h3</h3>
<h4>我是标题h4</h4>
<h5>我是标题h5</h5>
<h6>我是标题h6</h6>

• p：段落，上下空一行

<p>我是段落</p>

• 其他标签

<b>粗体文本</b>

<code>计算机代码</code>

<em>强调文本</em>

<i>斜体文本</i>

<kbd>键盘输入</kbd>

<pre>预处理（换行识别）</pre>

<small>更小的文本</small>

<strong>重要的文本</strong>

<del>删除线</del>

log<sub>下标文本</sub>

2<sup>上标文本</sup>

<font color="green">我是font</font>（被淘汰）

---

超链接

href:要去的地方
target：目标-怎么打开目标地址
_blank:在新窗口打开
_self：在当前窗口打开
_parent、top:在父容器（顶级父容器）中打开
title:标题-当鼠标悬停在标签上出现的提示文

 普通链接：
 <a href="http://www.baidu.com" target="_self">百度一下</a>
 
 图片链接：
 <a href="http://www.baidu.com"><img src="img/libai.jpg" alt="这是刺客李白" title="青莲剑仙" width="150"></a>
 
 邮箱链接：
 <a href="mailto:123456@qq.com">站长信箱</a>
 
 锚记链接
 <a id="tips">提示部分</a>
 <a href="#tips">跳到提示部分</a>

图片

img：图片
src:路径
height、width：宽高（尽量指定一个属性，等比缩放）
align:对齐方式
alt:异常情况的文字显示
marquee：弹幕

<img src="img/libai.jpg" alt="这是刺客李白" title="青莲剑仙" width="100" alt="" align="bottom">

---

块

div：块，立方体，可以有宽高
span：行，没有宽和高，尺寸根据内容确定

    块级元素：自占一行，自带换行功能
                div,h,p,form,ul,ol...
    行级元素：自己没有换行功能
                a,span,del,sup,sub,em,b,strong....

<div> 文档中的块级元素</div>

<span> 文档中的行级元素</span>

---

列表 表格

ul：无序列表
ol：有序列表

无序列表
<ul type="disc">
    <li>项目1</li>
    <li>项目2</li>
</ul>

有序列表
<ol type="I">
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
    <li>项目4</li>
</ol>
    
自定义列表
<dl>
    <dt>项目1</dt>
    <dd>描述项目1</dd>
    <dt>项目2</dt>
    <dd>描述项目2</dd>
</dl>

table>tr>td 创建表格

rowspan：跨行合并

colspan：跨列合并

<table border="1" cellpadding="10" cellspacing="0">
    <thead >
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>联系方式</th>
            <th>毕业院校</th>
            <th>国籍</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1001</td>
            <td>罗永浩</td>
            <td>13789456245</td>
            <td>延边第二中学</td>
            <td rowspan="4">中国</td>
        </tr>
        <tr>
            <td>1002</td>
            <td>罗翔</td>
            <td>15784561234</td>
            <td>北京大学</td>
        </tr>
        <tr>
            <td>1003</td>
            <td>樊登</td>
            <td>13336956541</td>
            <td>西安交大</td>
        </tr>
        <tr>
            <td>1004</td>
            <td>雷军</td>
            <td>15625899685</td>
            <td>武汉大学</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5">
                他们都是有钱人
            </td>
        </tr>
    </tfoot>
</table>

iframe：框架

<iframe src="https://www.sina.com.cn" height="600" width="400"
    frameborder="0"></iframe>
<iframe src="https://www.sohu.com" height="600" width="400"
    frameborder="0"></iframe>

---

表单

form ：表单
action:数据的提交地址
id：每个HTML元素的唯一标识（不能重复）
input type :text:文本框；password：密码；radio:单选框；checkbox:多选框 ...
select option:下拉框
textarea:文本区
button:按钮

<form action="" method="post">
    <p>
        账号：<input type="text">
    </p>
    <p>
        密码：<input type="password">
    </p>
    <p>
        性别：
        <input type="radio" name="gender">男
        <input type="radio" name="gender" checked>女
    </p>
    <p>
        地址：
        <select>
            <option value="">请选择省</option>
            <option value="">吉林省</option>
            <option value="">北京市</option>
        </select>
        <select>
            <option value="">请选择市</option>
            <option value="">长春市</option>
            <option value="">北京市</option>
        </select>
        <select>
            <option value="">请选择区</option>
            <option value="">南关区</option>
            <option value="">西城区</option>
        </select>
    </p>
    <p>
        爱好：
        <input type="checkbox" checked>读书
        <input type="checkbox">游泳
        <input type="checkbox" checked>跑步
    </p>
    <p>
        <textarea cols="30" rows="10"></textarea>
    </p>
    <p>
        邮箱：<input type="email">
    </p>
    <p>
        薪水：<input type="number">
    </p>
    <p>
        头像：<input type="file">
    </p>
    <p>
        颜色：<input type="color">
    </p>
    <p>
        电话：<input type="tel">
    </p>
    <p>
        隐藏：<input type="hidden">
    </p>
    <p>
        //<input type="submit">
        //<input type="reset">
        //<input type="button" value="自定义按钮">
     
        <button type="submit">注册</button>
        <button type="reset">重写</button>
        <button type="button">自定义</button>
        <!-- 
            我们项目的要求：
            如果有form，用input
            如果没有form，用button
         -->
    </p>
</form>

action：数据的提交后台地址
method：数据的提交方式

get：默认值，会把所有要提交的数据拼接在地址栏，不安全，地址栏长度有限
post：封装一个请求体，把数据提交给后台，不会拼接在地址栏，长度没有限制
    
readonly和disabled区别：
readonly可以提交到后台的
disabled是不可以提交到后台的

---

转义字符

  空格
& and符号
< 小于号
> 大于号
© 版权号

---

H5新增

画布，多媒体，重力感应，地图，websocket

<!-- 定义音频内容 -->
<audio src="123.mp3" autoplay controls></audio>
<!-- 定义视频内容 -->
<video src="123.mp4" autoplay controls></video>
---

css

什么是css？
html提供了布料，css上色。
CSS层叠样式表
定义如何显示HTML元素--样式
样式通常存储在样式表中
把样式表添加到HTML中，内容与表现分离（样式和结构分离）
外部样式表可以极大提高工作效率。
外部样式表通常存储在css文件中

定义css样式

• 行内样式

如果当前的样式不需要复用，可以使用行内样式

<p style="background-color: red;">我是P标签</p>
<h1>我是h1标签</h1>
<span>我是span标签</span>
<a href="#">我是超级链接</a>

• 内页样式（嵌入样式）

类选择器
    .fontStyle {
        color: red;
        font-size: 20px;
    }
    .backgroudStyle {
        background-color: yellow;
    }
    
id选择器，每个标签元素的id是唯一不能重复
    #fontStyle2 {
        color: blue;
        font-size: 30px;
    }
    
标签选择器
    p {
        font-family: "仿宋";
    }
    
通配符，全部选择器，页面初始化
    * {
        margin:0;
        padding: 0;
    }
    
组合选择器
    h1,div {
        font-size: 50px;
    }
    
后代选择器
    div p {
        background-color: red;
    }
    
子选择器
    div>p {
        color: blueviolet;
    }
    
紧跟着div的p元素
    div + p{
        background-color: pink;
    }

属性选择器
    input[name]{
        height: 100px;
        font-size: 50px;
    }
    input[name=username] {
        color: red;
    }

• 外部样式（推荐）

<link rel="stylesheet" href="css/style.css">

---

css层叠样式表

层叠性
1.如果样式冲突，遵循就近原则，哪个样式距离就执行哪个样式
2.如果样式不冲突，就不层叠

继承性：子标签会继承父标签的某些样式：文本颜色，字号，背景颜色...
优先级：类>标签>id

权重
1.继承的样式权重最低
2.行内样式权重最高
3.如果权重相同，就近原则
4.！important 无限大

---

css常用单位

1.px像素：绝对单位，一个像素代表一个点
2.em:相对单位，参考父级元素。父级元素的字体是10px，要设置元素的字体大小为2em，当前元素的字体就是32px
3.rem：相对单位，参考页面。当我们改变了浏览器的字号设置，页面的字号也会随之发生改变。应用老人版
4.百分比：相对于父级元素的比例

---

伪类选择器

link:默认样式
hover:悬停样式
active：激活样式
visited:点过的元素

<style>
初始状态
    a:link {
        color: red;
    }
    
鼠标悬停
    a:hover {
        color: green;
    }
    
激活状态
    a:active{
        color: black;
    }
    
访问过的
    a:visited {
        color: yellow;
    }
    
获得焦点
    input:focus {
        height: 100px;
        font-size: 50px;
    }
</style>

---

基本标签

nth-child()：选中第几个对应元素

font-size：字体大小

background:背景

list-style-type:列表类型

list-style-position:列表位置

border:边框

radius:半径；collapse：折叠；

display：区块

inline：行级；block:块级；inline-block：内联块