HTML学习笔记

最新推荐文章于 2024-05-01 00:06:10 发布

邪丶星

最新推荐文章于 2024-05-01 00:06:10 发布

阅读量329

点赞数 4

分类专栏：学习笔记文章标签： html 学习笔记

本文链接：https://blog.csdn.net/xiexing_zxy/article/details/136450770

版权

学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. HTML标签

标签又称元素，是HTML的基本组成单位
标签分为：**双标签 **与 单标签
标签名不区分大小写，但是推荐小写

<!-- 双标签 -->
<marquee>双标签</marquee>

<!-- 单表签 -->
<input>

标签之间的关系：并列关系，嵌套关系

2. HTML标签属性

用于给标签提供 附加信息
可以写在 起始标签 或者 单标签 中
有些特殊的标签，没有属性名，只有属性值

<!-- 标签名 属性名="属性值" 属性名="属性值" -->
<marquee loop="1" bgcolor="orange">双标签</marquee>
    
<input disabled>

注意点
1. 不同的标签，有不同的属性，也有一些通用属性
2. 属性名，属性值不能乱写，都是W3C规定好的
3. 属性名，属性值，都不区分大小写，但是推荐小写
4. 标签中不要出现同名属性，否则后写的会失效

3. HTML基本结构

<html>
    <head>
        <title>我的网页</title>
    </head>
    
    <body>
        <marquee>双标签</marquee>
    </body>
</html>

想要呈现在网页中的内容写在 body 中
head 标签中的内容不会呈现在网页中

4. HTML注释

特点：注释内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见
作用：对代码进行解释说明
写法：

<!-- 下面的文字只能滚动一次 -->
<marquee loop="1">双标签</marquee>

注意：注释不能嵌套

5. HTML标准结构

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>HTML标准结构</title>
    </head>
    <body>

    </body>
</html>

6. 排版标签

标签名	标签含义	单 / 双标签
h1~h6	标题	双
p	段落	双
div	没有任何含义，用于整体布局	双

h1 最好写一个，h2~h6 能适当多写
h1~h6 不能相互嵌套
p 标签很特殊，它里面不能有：h1~h6，p，div

7. 块级元素与行内元素

块级元素：独占一行
行内元素：不独占一行
使用规则：
1. 块级元素中能写行内元素和块级元素
2. 行内元素中能写行内元素，但不能写块级元素
3. 特殊规则
  - h1~h6 不能相互嵌套
  - p 中不要写块级元素

8. 文本标签

用于包裹：词汇，短语等
通常写在排版标签里面
排版标签比较宏观，文本标签更微观
文本标签通常都是行内元素

常用的：

标签名	标签语义	单 / 双标签
em	要着重阅读的内容	双
strong	十分重要的内容（语气比em要强）	双
span	没有语义，用于包裹短语的通用容器	双

div 类似于大包装袋，span 是小包装袋

不常用的：

标签名	标签语义	单 / 双标签
cite	作品标题	双
dfn	特殊术语	双
del 与 ins	删除的文本与插入的文本	双
sub 与 sup	下标文字与上标文字	双
code	一段代码	双
samp	从正常的上下文中，将某些内容提取出来	双
kbd双	键盘文本，表示文本是通过键盘输入的	双
abbr	缩写，最好配上 title 属性	双
bdo	更改文本方向，要配合 dir 属性，可选值：ltr，trl	双
var	标记变量，可以与 code 标签一起使用	双
small	附属细则，例如版权，法律文本	双
b	摘要中的关键字，评论中的产品名称	双
i	本意是：人物的思想活动，多用于呈现字体图标	双
u	与正常内容有反差的文本	双
q	短引用	双
blockquote	长引用	双
address	地址信息	双

7. 图片标签

基本使用

标签名	标签语义	单 / 双标签
img	图片	单

常用属性：

src：图片路径

alt：图片描述

width：图片宽度，单位是像素 (px)

height：图片高度，单位是像素 (px)

8. 路径的分类

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

符号含义举例
./ 同级引入同级的文件：
/ 下一级引入下一级的文件
…/ 上一级引入上一级的文件：
- 相对路径中 . / 可以省略不写
- 相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改
绝对路径：以根位置作为参考点，去建立路径
- 本地绝对路径：C:\Users\zxycy\Desktop\HTML代码\1_HTML/01.jpg
- 网络绝对路径：https://img.zcool.cn/community/01a79760b5cc1111013eaf70b18662.jpg@1280w_1l_2o_100sh.jpg
- 本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用
- 网路绝对路径使用1方便，但是要注意，如果服务器开启了防盗链，会造成图片引入失败

符号	含义	举例
./	同级	引入同级的文件：
/	下一级	引入下一级的文件
…/	上一级	引入上一级的文件：

9.超链接

标签名	标签语义	单双标签
a	超链接	双

常用属性：

href：要跳转的具体位置

target：跳转时如何打开页面

self：在本页签中打开
blank：在新页签中打开

<!-- 跳转其他页面 -->
<a href="https://www.bilibili.com/" target="_blank">BILIBILI</a>

<!-- 跳转本地页面 -->
<a href="./10_HTML图片标签.html">图片</a>

跳转文件

浏览器除了压缩包类的文件不能直接打开，其他的都可以直接打开
如果打开了压缩包类的文件，会触发下载
若想打开其他文件，强制触发下载，可以使用 download 属性

跳转锚点

第一步设置锚点

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

<a name="text1"></a>

<!-- 第二种方式：其他标签配合id属性 -->
<a href="#text2"></a>

<a id="text2"></a>

跳转锚点

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

<!-- 跳转其他页面锚点 -->
<a href="./10_HTML图片标签.html#tp">跳转其他页面</a>

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

超链接唤起指定应用

<!-- tel:拨打电话 -->
<a href="tel:10086">打电话</a>

<!-- mailto:发送邮件 -->
<a href="mailto:3172405630">发送邮件</a>

<!-- sms:发送短信 -->
<a href="sms:15872341406">发送短信</a>

10. 列表

有序列表

概念：又顺序或侧重顺序的列表

<h2>把大象放进冰箱需要几步</h2>
<ol>
    <li>打开冰箱门</li>
    <li>把大象放进去</li>
    <li>关闭冰箱门</li>
</ol>

无序列表

概念：无顺序或不侧重顺序的列表

<h2>最想去的地方</h2>
<ul>
    <li>上海</li>
    <li>广州</li>
    <li>深圳</li>
</ul>

自定义列表

概念：

所谓自定义列表就是一个包含 术语名称一个包含 术语描述
一个 dl 就是一个自定义列表，一个 dt 就是术语名称，一个 dd 就是术语描述(术语描述可以有多个)

<h2>动漫</h2>
<dl>
    <dt>《斩赤红之瞳》</dt>
    <dd>热血战斗番</dd>
    <dt>《五等份花嫁》</dt>
    <dd>校园恋爱番</dd>
</dl>

列表的嵌套

概念：列表中的某项内容，又包含一个列表

<h2>最想去的地方</h2>
<ul>
    <li>
        <span>上海</span>
        <ul>
            <li>外滩</li>
            <li>东方明珠</li>
        </ul>
    </li>
    <li>广州</li>
    <li>深圳</li>
</ul>

注意：

li 标签最好写在 ul 或 ol 中，不要单独使用
列表嵌套的时候要把结构写完整

11. 表格

基本结构

一个完整的表格由：表格标题，表格头部，表格主题，表格脚注，四部分组成
表格涉及到的标签

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>21</td>
        <td>汉族</td>
        <td>团员</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>男</td>
        <td>22</td>
        <td>满族</td>
        <td>群众</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>女</td>
        <td>20</td>
        <td>汉族</td>
        <td>党员</td>
    </tr>
</tbody>
<!-- 表格脚注 -->
<tfoot>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>共计：3人</td>
    </tr>
</tfoot>
</table>

跨行与跨列

rowspan：指定要跨的行数
colspan：指定要跨的列数

<table border="2" cellspcing="1">
<caption>课程表</caption>
<thead>
    <th>项目</th>
    <th colspan="5">上课</th>
    <th colspan="2">活动与休息</th>
</thead>
<tbody>
    <tr>
        <td>星期</td>
        <td>星期一</td>
        <td>星期二</td>
        <td>星期三</td>
        <td>星期四</td>
        <td>星期五</td>
        <td>星期六</td>
        <td>星期日</td>
    </tr>
    <tr>
        <td rowspan="4">上午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>数学竞赛</td>
        <td rowspan="6">休息</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>语文</td>
        <td>化学</td>
        <td>物理</td>
        <td>英语</td>
        <td>篮球比赛</td>
    </tr>
    <tr>
        <td>化学</td>
        <td>语文</td>
        <td>体育</td>
        <td>历史</td>
        <td>地理</td>
        <td>每周一考</td>
    </tr>
    <tr>
        <td>体育</td>
        <td>化学</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>社会实践</td>
    </tr>
    <tr>
        <td rowspan="2">下午</td>
        <td>语文</td>
        <td>英语</td>
        <td>数学</td>
        <td>物理</td>
        <td>数学</td>
        <td>英语考试</td>
    </tr>
    <tr>
        <td>化学</td>
        <td>物理</td>
        <td>地理</td>
        <td>生物</td>
        <td>体育</td>
        <td>自由活动</td>
    </tr>
</tbody>
</table>

12. 常用标签补充

标签名	标签含义	单/双标签
br	换行	单
hr	分隔	单
pre	按原文显示	双

注意点：

不要 br 用来增加文本之间的行间隔
hr 的语义是分隔，如果不需要语义，画一条直线，应当使用css完成

13. 表单

1. 基本结构

标签名	标签语义	单/双标签
form	表单	双
input	输入框	单
button	按钮	双

**form **常用属性：
action：用于指定表单的提交地址
target：用于控制表单提交后，如何打开页面
_self：在本窗口打开
_blank：在新窗口打开

method：用于控制表单的提交方式

input 常用属性：
type：设置输入框的类型
name：用于提交数据的名字

<form action="https://www.baidu.com/s">
    <input type="text" name="wd">
    <button>搜索</button>
</form>
<hr>
<form action="https://search.jd.com/search">
    <input type="text" name="keyword">
    <button>搜索</button>
</form>

2. 常用表单控件

文本输入框

<input type="text">

name 属性：数据的名称

value 属性：输入框的默认输入值

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

密码输入框

<input type="password">

name 属性：数据的名称

value 属性：输入框的默认输入值

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

单选框

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

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

value 属性：提交的数据值

checked 属性：默认选中按钮

复选框

<input type="checkbox" name="hobby" value="游泳">游泳
<input type="checkbox" name="hobby" value="健身">健身

name 属性：数据的名称

value 属性：提交的数据值

checked 属性：默认选中按钮

隐藏域

<input type="hidden" name="tag" value="123">
<button>搜索</button>

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

name 属性：数据的名称

value 属性：真正提交的数据值

提交按钮

<!-- 提交按钮第一种写法 -->
<input type=" submit" value="点我提交">

<!-- 提交按钮第二种写法 -->
<button>提交</button>

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

button 不要指定 name 属性

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

重置按钮

<!-- 重置按钮第一种写法 -->
<button type="reset">重置</button>
<!-- 重置按钮第二种写法 -->
<input type="reset" value="重置按钮">

button 不要指定 name 属性

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

普通按钮

<button type="button">检测账户是否被注册</button>
<input type="button" value="检测账户是否被注册">

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

文本域

<textarea name="other" cols="15" rows="5"></textarea>

rows 属性：指定默认显示的行数。会影响文本域的高度
clos 属性：指定默认显示的列数，会影响文本域的宽度
不能编写 type 属性。其他属性，与普通文本输入框一致

下拉框

<select name="place">
    <option value="上海">上海</option>
    <option value="广州" selected>广州</option>
    <option value="深圳">深圳</option>
</select>

name 属性：指定数据的名称
option 标签设置value属性，如果没有 value 属性，提交的数据是 option 中间的文字
如果设置了 value 属性。提交的数据就是 value 的值
selected 属性：表示默认选中

3. 禁用表单控件

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

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

4. label标签

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

两种关联方式：

让 label 标签的 for 属性值等于表单控件的id
使用 **label **标签包裹表单控件

<!-- 第一种关联方式 -->
<label for="zhanghu">账户：</label>
<input id="zhanghu" type="text" name="account" maxlength="10">

<!-- 第二种关联方式 -->
<label>
    密码：
    <input id="mima" type="password" name="pwd" maxlength="6">
</label>

5.fieldset标签与legend标签

fieldset：可以为表单控件分组

legend：是分组的标题

<from>
    <fieldset>
        <legend>主要信息</legend>
    <label for="zhanghu">账号：</label>
        <input id="zhanghu" type="text" name="acconnt">
    <br>
    <label for="mima">密码：</label>
        <input id="mima" type="password" name="pwd">
    <br>
        性别：
    <input type="radio" name="gender" value="男">男
    <input type="radio" name="gender" value="女">女
    </fieldset>
</from>

14. 框架标签

标签名	功能和语义	单/双标签
iframe	框架（在网页中嵌入其他文件）	双

常用属性：

name：框架的名字，可以与 target 属性配合
width：框架的宽
height：框架的高
frameborder：是否显示边框，值 0或1

实际应用：

在网页中嵌入广告
与超链接或者表单 target 配合，展示不同的内容

邪丶星

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记

标签之间的关系：并列关系，嵌套关系2. HTML标签属性用于给标签提供附加信息可以写在起始标签或者单标签中有些特殊的标签，没有属性名，只有属性值注意点想要呈现在网页中的内容写在 body 中head 标签中的内容不会呈现在网页中4. HTML注释特点：注释内容会被浏览器所忽略，不会呈现到页面中，但源代码中依然可见作用：对代码进行解释说明写法：注意：注释不能嵌套5. HTML标准结构6. 排版标签标签名标签含义单 / 双标签
复制链接

扫一扫