html&css学习笔记——html4基础

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>我是一个标题</title>
    </head>
    <body>
    </body>
</html>

2.html排版标签

h1~h6：标题

p：段落

div：无含义，用于整体布局

注意：①h1最好只写一个；②h1~h6不能互相嵌套③p标签里面不能嵌套h1~h6、p、div

3.html语义化标签（语义最重要）

优势：①代码结构清晰可读性强②有利于SEO（搜索引擎优化）③方便设备解析（如盲人阅读器）

4.块级元素（独占一行）与行内元素（不独占一行）

规则：①块级元素中能写行内元素和块级元素（几乎什么都能写）②行内元素能写行内元素但不能写块级元素

特殊规则：①h1~h6不能互相嵌套②p中不要写块级元素

4.文本标签

（用于包裹短语、词汇，通常卸载排版标签里）

em：要着重阅读的内容

strong：十分重要的内容（语气比em要强）

span：没有语义

（以下为不常用的）

cite ：作品标题（书籍、歌曲、电影、电视节目、绘画、雕塑）

dfn ：特殊术语，或专属名词

del 与 ins ：删除的文本【与】插入的文本

sub 与 sup ：下标文字【与】上标文字

code ：一段代码

samp ：从正常的上下文中，将某些内容提取出来，例如：标识设备输出

kbd :键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中

abbr :缩写，最好配合上 title 属性

bdo :更改文本方向，要配合 dir 属性，可选值: ltr （默认值）、 rtl

var :标记变量，可以与 code 标签一起使用

small :附属细则，例如：包括版权、法律文本。—— 很少使用

b :摘要中的关键字、评论中的产品名称。—— 很少使用

i ：本意是：人物的思想活动、所说的话等等。现在多用于：呈现字体图标（后面要讲的内容）。

u ：与正常内容有反差文本，例如：错的单词、不合适的描述等。—— 很少使用

q ：短引用 —— 很少使用

blockquote ：长引用 —— 很少使用

address ：地址信息

5.图片标签

img 图片

属性：①src ：图片路径（又称：图片地址）—— 图片的具体位置

②alt ：图片描述

③width ：图片宽度，单位是像素，例如： 200px 或 200

④height ：图片高度，单位是像素，例如： 200px 或 200

6.绝对路径和相对路径

相对路径：以当前位置作为参考点建立路径。

./ 同级 / 下一级 ../ 上一级

绝对路径：以根位置作为参考点建立路径。 ①本地绝对路径(很少用）② 网络绝对路径（防盗链）

7.超链接

标签名

标签语义

属性

超链接

href ：指定要跳转到的具体目标。

target ：控制跳转时如何打开页面，常用值如下:

_self ：在本窗口打开。

_blank ：在新窗口打开。

id ：元素的唯一标识，可用于设置锚点。

name ：元素的名字，写在 a 标签中，也能设置锚点。

7.1页面跳转

<!-- 跳转其他网页 -->
<a href="https://www.jd.com/" target="_blank">去京东</a>
<!-- 跳转本地网页 -->
<a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>

注意：①代码中的多个空格、多个回车，都会被浏览器解析成一个空格！

②虽然 a 是行内元素，但 a 元素可以包裹除它自身外的任何元素

7.2文件跳转

①若浏览器无法打开文件，则会引导用户下载。

②若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称。

7.3锚点跳转

第一步：设置锚点

<!-- 第一种方式：a标签配合name属性 -->
<a name="test1"></a>

<!-- 第二种方式：其他标签配合id属性 -->
<h2 id="test2">我是一个位置</h2>

注意点：

1. 具有 href 属性的 a 标签是超链接，具有 name 属性的 a 标签是锚点。

2. name 和 id 都是区分大小写的，且 id 最好别是数字开头。

第二步：跳转锚点

<!-- 跳转到test1锚点-->
<a href="#test1">去test1锚点</a>

<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>

<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>

<!-- 刷新本页面 -->
<a href="">刷新本页面</a>

<!-- 执行一段js -->
<a href="javascript:alert(1);">点我弹窗</a>

7.4唤起指定应用

<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>

8.列表

8.1有序列表：有顺序或侧重顺序的列表

<h2>要把大象放冰箱总共分几步</h2>
<ol>
    <li>把冰箱门打开</li>
    <li>把大象放进去</li>
    <li>把冰箱门关上</li>
</ol>

8.2无序列表：无顺序或不侧重顺序的列表

<h2>我想去的几个城市</h2>
<ul>
    <li>成都</li>
    <li>上海</li>
    <li>西安</li>
</ul>

8.3自定义列表：所谓自定义列表，就是一个包含术语名称以及术语描述的列表

一个 dl 就是一个自定义列表，一个 dt 就是一个术语名称，一个 dd 就是术语描述（可以有多

个）

<h2>如何高效的学习？</h2>
<dl>
    <dt>做好笔记</dt>
    <dd>笔记是我们以后复习的一个抓手</dd>
    <dd>笔记可以是电子版，也可以是纸质版</dd>
    <dt>多加练习</dt>
    <dd>只有敲出来的代码，才是自己的</dd>
</dl>

注意：①列表嵌套：列表中的某项内容，又包含一个列表（注意：嵌套时，请务必把解构写完整）

② li 标签最好写在 ul 或 ol 中，不要单独使用

<h2>我想去的几个城市</h2>
<ul>
    <li>成都</li>
    <li>
        <span>上海</span>
        <ul>
            <li>外滩</li>
            <li>杜莎夫人蜡像馆</li>
            <li>
                <a href="https://www.opg.cn/">东方明珠</a>
            </li>
        </ul>
    </li>
</ul>

9.表格

9.1基本结构

table ：表格

caption ：表格标题

thead ：表格头部

tbody ：表格主体

tfoot ：表格注脚

tr ：每一行

th 、 td ：每一个单元格（备注：表格头部中用 th ，表格主体、表格脚注中用： td ）

<table border="1">
    <!-- 表格标题 -->
    <caption>学生信息</caption>
    <!-- 表格头部 -->
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>民族</th>
            <th>政治面貌</th>
        </tr>
    </thead>
    <!-- 表格主体 -->
    <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
            <td>汉族</td>
            <td>团员</td>
        </tr>
    </tbody>
    <!-- 表格脚注 -->
    <tfoot>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>共计：1人</td>
    </tr>
    </tfoot>
</table>

9.2属性

标签名	语义	属性
table	表格	width ：设置表格宽度。 height ：设置表格最小高度，表格最终高度可能比设置的值大。 border ：设置表格边框宽度。 cellspacing ：设置单元格之间的间距。
thead	表格头部	height ：设置表格头部高度。 align ：设置单元格的水平对齐方式，可选值如下： left ：左对；center ：中间；right ：右 valign ：设置单元格的垂直对齐方式，可选值如下： top ：顶部；middle ：中间； bottom ：底部
tbody	表格主体	常用属性与 thead 相同。
tr	行	常用属性与 thead 相同。
tfoot	表格脚注	常用属性与 thead 相同。
td	普通单元格	width ：设置单元格的宽度，同列所有单元格全受影响 heigth ：设置单元格的高度，同行所有单元格全受影响 align ：设置单元格的水平对齐方式。 valign ：设置单元格的垂直对齐方式。 rowspan ：指定要跨的行数。 colspan ：指定要跨的列数
th	表头单元格	常用属性与 td 相同。

注意：① <table> 元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格

边框的宽度②默认情况下，每列的宽度，得看这一列单元格最长的那个文字

9.3跨行跨列（td/th的属性）

rowspan ：指定要跨的行数

colspan ：指定要跨的列数

思路：1.先写原始的表格有几行几列 2.调整属性，删掉溢出/被占用的单元格

10.常用标签补充

标签名	含义	单/双标签
br	换行	单
hr	分隔	单
pre	按原文显示（保留空格和回车，一般用于在页面中嵌入大段代码）	双

11.表单

11.1基本结构

标签	语义	属性	单/双标签
form	表单	action ：用于指定表单的提交地址（需要与后端人员沟通后确定）。 target ：用于控制表单提交后，如何打开页面常用值如下： _self ：在本窗口打开；_blank ：在新窗口打开。 method ：用于控制表单的提交方式	双
input	多种形式的表单控件	type ：设置输入框的类型， text ：表示普通文本。 name ：用于指定提交数据的名字，（需要与后端人员沟通后确定）。	单
button	按钮		双

<form action="https://www.baidu.com/s" target="_blank" method="get">
    <input type="text" name="wd">
    <button>去百度搜索</button>
</form>

11.2常用表单控件

11.2.1文本输入框

属性：

name ：数据的名称。

value ：输入框的默认输入值。

maxlength ：输入框最大可输入长度

11.2.2密码输入框

属性：

name ：数据的名称。

value ：输入框的默认输入值。（一般不用，无意义）

maxlength ：输入框最大可输入长度

11.2.3单选框

<input type="radio" name="sex" value="female" checked>女
<input type="radio" name="sex" value="male">男

属性：

name ：数据的名称。想要单选效果，多个 radio 的 name 属性值要保持一致。

value ：提交的数据值（必须写）

checked ：让该单选按钮默认选中

11.2.4复选框

<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头

属性：

name ：数据的名称。

value ：提交的数据值（必须写）

checked ：让该单选按钮默认选中

11.2.5隐藏域

用户不可见的一个输入区域，作用是：提交表单的时候，携带一些固定的数据。

name 属性：指定数据的名称。

value 属性：指定的是真正提交的数据。

11.2.6按钮

注意：

1. button 标签 type 属性的默认值是 submit 。

2. button 不要指定 name 属性

3. input 标签编写的按钮，使用 value 属性指定按钮文字。

①提交按钮

<button>点我提交表单</button>

②重置按钮

③普通按钮

普通按钮的 type 值为 button ，若不写 type 值是 submit 会引起表单的提交。

11.2.7文本域

<textarea name="msg" rows="22" cols="3">我是文本域</textarea>

属性：

1. rows 属性：指定默认显示的行数，会影响文本域的高度。

2. cols 属性：指定默认显示的列数，会影响文本域的宽度。

3. 不能编写 type 属性，其他属性，与普通文本输入框一致。

11.2.8下拉框

<select name="from">
    <option value="黑">黑龙江</option>
    <option value="辽">辽宁</option>
    <option value="吉">吉林</option>
    <option value="粤" selected>广东</option>
</select>

属性及注意事项：

1. name 属性：指定数据的名称。

2. option 标签设置 value 属性，如果没有 value 属性，提交的数据是 option 中间的文

字；如果设置了 value 属性，提交的数据就是 value 的值（建议设置 value 属性）

3. option 标签设置了 selected 属性，表示默认选中。（与input的默认选中“checked”区分）

11.3禁用表单控件

给表单控件的标签设置 disabled 既可禁用表单控件。

input 、 textarea 、 button 、 select 、 option 都可以设置 disabled 属性

11.4label标签

label 标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。

两种与 label 关联方式如下：

1. 让 label 标签的 for 属性的值等于表单控件的 id 。

2. 把表单控件套在 label 标签的里面。

<label>

密码：<input type="password">

</label>

11.5fieldset 与 legend 的使用（了解）

fieldset 可以为表单控件分组、 legend 标签是分组的标题。

<input>

......

</fieldset>

12.框架标签

标签名	功能和语义	属性	单/双标签
iframe	框架（在网页中嵌入其他文件）	name ：框架名字，可以与 target 属性配合。 width ：框架的宽。 height ：框架的高度。 frameborder ：是否显示边框，值：0 或1	双

<iframe src="https://www.toutiao.com" width="500" height="300">
<!--与超链接的target属性配合使用-->
<a href="https://www.toutiao.com" target="container">看新闻</a>
<!--与表单的target属性配合使用-->
<form action="https://so.toutiao.com/search" target="container">
    <input type="text" name="keyword">
    <input type="submit" value="搜索">
</form>
<iframe name="container" framborder="0" width="500" height="300"></iframe>

13.HTML实体

在 HTML 中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是HTML 实体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。

字符实体由三部分组成：一个 & 和一个实体名称（或者一个 # 和一个实体编号），最后加上一

个分号 ; 。

常见字符实体

完整实体列表，请参考： HTML Standard (whatwg.org)

14.HTML全局属性

属性名	含义
id	给标签指定唯一标识，注意： id 是不能重复的。作用：可以让 label 标签与表单控件相关联；也可以与 CSS 、 JavaScript 配合使用。
class	给标签指定类名，随后通过 CSS 就可以给标签设置样式。
style	给标签设置 CSS 样式。
dir	内容的方向，值: ltr 、 rtl
title	给标签设置一个文字提示，一般超链接和图片用得比较多。
lang	给标签指定语言