html5教程笔记

limit4ever

已于 2023-12-11 13:58:45 修改

阅读量38

点赞数

文章标签： html5 笔记前端

于 2023-09-22 21:26:35 首次发布

本文链接：https://blog.csdn.net/m0_75115363/article/details/133186601

版权

![[Pasted image 20230703201611.png]]

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        键盘敲烂
    </body>
</html>

自动生成的

文档类型声明标签

<!DOCTYPE html>
文档类型声明，作用就是告诉浏览器使用哪种 HTML 版本来显示网页。

lang 语言种类

用来定义当前文档显示的语言。

en 定义语言为英语
zh-CN定义语言为中文

定义成 en 的文档也可以显示中文，定义成 zh-CN 的文档也可以显示英文

字符集

标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
<meta charset=" UTF-8" />

常用标签

标题标签

<h1>-<h6>

    <h1>这是一级标题</h1>

段落标签

<p> 用来定义段落，可以把网页分成不同的段落

<p>
...
一段文字
....
</p>

换行标签

一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 <br />

文字.. <br />

1. <br /> 是单标签
2. 和下一行没有空隙

文本格式化标签

语义	标签
加粗	`<strong> </strong>`或`<b> </b>`
倾斜	`<em> </em>` `<i> </i>`
删除线	`<del> </dek>` `<s> </s>`
下划线	`<ins> </ins>` `<u> </u>`

div和span标签

这两个标签是没有语义的，它们就是一个盒子，用来装内容的
<div> 一个独占一行
<span> 一行可以放多个

图像标签

`<img src=“图像URL /”

图像标签的属性

src 图片必须属性
alt 图片不存在时用文本替换
title 鼠标放上图片显示文本
width 设置图片的宽度
height 设置图片的高度
border 设置图片边框

注意

src 必须要有
其它标签必须写在 src 后面

路径

相对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径

同一级路径	图像文件位于 HTML 文件同一级	`<img src="baidu.gif">`
下一级路径	图像文件位于 HTML 文件下一级	`<img src="images/baidu.gif"/>`
上一级路径	图像文件位于 HTML 文件上一级	`<img srca="../baidu.gif">`

绝对路径

D:\web\img\logo.gif

超链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性	作用
`Href`	用于指定链接目标的 ur 地址，（必须属性）当为标签应用 ref 属性时，它就具有了超链接的功能
`Target`	用于指定链接页面的打开方式，其中 self 为当前窗口，blank 为在新窗口中打开方式

外部链接<a href="http://www.xhu.edu.cn" target="_blank">西华大专</a>
内部链接<a href="首页.html" target="_blank">首页</a>
空链接<a href="#">空链接</a>
下载链接<a href="HBuilder.rar">hbuliderX</a>
网页素材链接<a href="https://www.yuanshen.com"><img src="原神.jpg"></a>
锚点链接：点击会跳往页面中的指定位置<a href="#哈吉尔" id="fanhui">六容器</a>

在链接文本的 href 属性中，设置属性值为 #名字 的形式，如
<a href="#哈吉尔">六容器</a>
找到目标位置标签，里面添加一个 id 属性 = 刚才的名字，如
span id="哈吉尔">柳荣其</span>

注释和特殊字符


  空格
< >
> <
![[Pasted image 20230914145439.png]]

表格标签

<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>

1.<table> </table>是用于定义表格的标签。
2.<tr> </tr>标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
3.<td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4. 字母 td 指表格数据（table data），即数据单元格的内容。
![[Pasted image 20230914222115.png]]

表头单元格

表头单元格里面的文本内容加粗居中显示
<th> 标签表示 HTML 表格的表头部分 (table head 的缩写)

<table>
<tr>
<th>姓名</th>
...
</tr>
...
</table>

		<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
		<tr><td>坤坤鸡</td> <td>男</td> <td>2.5</td></tr>
		<tr><td>氟利昂</td> <td>男</td> <td>18</td></tr>
		<tr><td>李琦</td> <td>男</td> <td>19</td></tr>
		<tr><td>周炜烨</td> <td>男</td> <td>20</td></tr>

表格属性

![[Pasted image 20230914225300.png]]
表格属性写在 table 里面

cellpadding 单元格内文字和单元格边框的距离
cellspacing 单元格之间的距离

表格结构标签

表格可以分为 thead 和 tbody 两个部分

<thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。一般是位于第一行。
<tbody></tbody>：用于定义表格的主体，主要用于放数据本体。
以上标签都是放在 <table></table> 标签中。

合并单元格

特殊情况下, 可以把多个单元格合并为一个单元格, 这里同学们会最简单的合并单元格即可.

合并单元格方式
目标单元格
合并单元格的步骤

合并单元格方式：

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
![[Pasted image 20230916151658.png]]
目标单元格：(写合并代码)
跨行：最上侧单元格为目标单元格, 写合并代码
跨列：最左侧单元格为目标单元格, 写合并代码

![[Pasted image 20230916151822.png]]

跨行合并

    <table width="500" height="500" border="1px" cellspacing="0">
        <tr>
            <th rowspan="2"></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </table>

![[Pasted image 20230917113045.png]]
2. 跨列合并

    <table width="500" height="500" border="1px" cellspacing="0">
        <tr>
            <th></th>
            <th colspan="2"></th>
        </tr>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </table>

![[Pasted image 20230917112817.png]]

列表标签

无序列表、

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li>标签定义。

<ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。
<li> 与 </li> 之间相当于一个容器，可以容纳所有元素。

<h4>你喜欢的食物</h4>
    <ul>
        <li>奥里给</li>
        <li>螺蛳粉</li>
        <li>臭豆腐</li>
    </ul>

有序列表

<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用<li> 标签来定义列表项

    <h4>大学排行榜</h4>
    <ol>
        <li>西华大学</li>
        <li>清华大学</li>
        <li>北京大学</li>
    </ol>

1.<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
2.<li> 与</li>之间相当于一个容器，可以容纳所有元素。

自定义列表

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
![[Pasted image 20230916160040.png]]
<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用

    <dl>
        <dt>关注我们 </dt>
        <dd>官方微信</dd>
        <dd>新浪微博</dd>
        <dd>哔哩哔哩</dd>
    </dl>

<dl></dl> 里面只能包含 <dt> 和 <dd>
<dt> 和 <dd> 个数没有限制，经常是一个 <dt> 对应多个 <dd>

列表总结

![[Pasted image 20230916161618.png]]

表单标签

表单的组成

![[Pasted image 20230916162000.png]]

表单域

表单域是一个包含表单元素的区域。
在 HTML 标签中，<form> 标签用于定义表单域，以实现用户信息的收集和传递。
<form> 会把它范围内的表单元素信息提交给服务器.

<form action=“url地址” method=“提交方式” name=“表单域名称">
各种表单元素控件
</form>

![[Pasted image 20230916163055.png]]

表单元素

Input 输入表单元素
Select 下拉表单元素
Textarea 文本域元素

input 表单元素

在表单元素中 <input> 标签用于收集用户信息
<input> 中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）

<input type="属性值" />

标签为单标签
Type 属性设置不同的属性值用来指定不同的控件类型

type 属性如下：
![[Pasted image 20230916164842.png]]
其它属性：
![[Pasted image 20230916171045.png]]

Name 和 value 是每个表单元素都有的属性值, 主要给后台人员使用.
Name 表单元素的名字, 要求 单选按钮和复选框要有相同的 name 值
Checked 属性主要针对于单选按钮和复选框, 主要作用一打开页面, 就要可以默认选中某个表单元素.
Maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.

<form action="demo.php" method="get" name="name1">
        <!-- text 文本框 可以输入文字 -->
        用户名：<input type="text" name="username" value="账号" maxlength="9"> <br>
        <!-- password 密码 用户看不见 -->
        密码：<input type="password" name="password"> <br>
        <!-- radio 单选按钮 可以实现多选一 -->
        <!-- 性别必须把name设置成同一个才能实现多选一 -->
        <!-- 单选框和复选按钮可以设置checked属性 打开页面默认选中这个按钮 -->
        性别：<input type="radio" name="sex" value="男" checked="checked">男 <input type="radio" name="sex" value="女">女 <br>
        <!-- checkbox 多选按钮 可以实现多选 -->
        爱好：<input type="checkbox" name="hobby" value="吃饭" checked="checked">吃饭 <input type="checkbox" name="hobby"
            value="睡觉">睡觉 <input type="checkbox" name="hobby" value="打豆豆">打豆豆 <br>
        <!-- submit 提交按钮 点击了提交按钮 可以把form里的表单元素的值提交给后台 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮可以还原 表单元素的默认状态 -->
        <input type="reset" value="重新填写">
        <!-- button 普通按钮 搭配JavaScript使用 -->
        <input type="button" value="获取验证码"><br>
        <!-- file 文件域 点击可以上传文件 -->
        <input type="file">
    </form>

Label 标签

<label> 标签为 input 元素定义标注（标签）

用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点 (光标)转到或者选择对应的表单元素上, 用来增加用户体验.

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

<label for="text">用户名</label><input type="text" id="text">
<input type="radio" id="nan" name="sex"><label for="nan">男</label>
<input type="radio" id="nv" name="sex"><label for="nv">女</label>

slect 表单元素

![[Pasted image 20230916234811.png]]
在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用 <select> 标签控件定义下拉列表。

<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>

<form action="demo.php">
        籍贯：
        <select>
            <option selected="selected">北京</option>
            <option>上海</option>
            <option>四川</option>
            <option>重庆</option>
        </select>
    </form>

textarea 表单元素

当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。
在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

<textarea rows="3" cols="20">
文本内容
</textarea>

通过<textarea> 标签可以轻松地创建多行文本输入框。
Cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小

limit4ever

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5教程笔记

总结pink老师前端教程的笔记
复制链接

扫一扫