当前位置：首页 > news >正文

Web学习笔记3

news 2025/7/13 7:20:52

HTML概述

1、HTML

HTML,称为超文本标记语言,与编程语言不同，标记语言使用一个个标签去规定浏览器如何呈现内容。HTML的标签由两种类型，双标签和单标签

双标签格式为：<标签名>中间包裹的内容</标签名>，其中内容前的标签叫做开始标签，内容后的标签叫做结束标签

单标签格式为：<标签名>

标签之间的关系分为两种：

嵌套关系：内容包含内容的关系

并列关系：内容与内容之间并列

2、HTML模板

目前大多数的网页，都是在HTML模板上进行编写的，HTML模板为：

<!DOCTYPE html>
<html lang="en">
<head><!--网页头部-->><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!--网页主体-->></body>
</html>

该模板在vscode中输入！并按下回车+TAB键自动生成

其中

<!DOCTYPE html>：代表使用HTML5

<head>：网页头部，给浏览器读取，用于写CSS代码，中间存放<title>,为网页标题

<body>：网页主体，给用户展示的主体部分

：用于在HTML中添加注释，注释不会被浏览器读取，VScode可以用ctrl+/快速添加注释

3、常用标签

标题标签(双标签)：

HTML中使用h1-h6代表六级标题，标题标签中间的内容加粗并换行

<h1>标题1</h1>

段落标签（双标签）：

段落标签书写段落文字，使用p来表示一个段落，段落之间自动换行并保持行间距

            <h3>一段段落</h3><p>你好你好你好你好你好</p><p>你好你好你好你好你好</p>

换行标签和水平线标签（单标签）：

换行标签：<br>，用于强制换行

水平线标签：<hr>，用于在浏览器中画一条分割线

            <h3>一段段落</h3><p>你好你好你好你好你好</p><hr><p>你好你好你好<br>你好你好</p>

文本格式化标签：

文本格式化标签用于给网页里的文本做加粗、倾斜、删除线和下划线操作，其中

加粗：<strong>/<b>

倾斜：<em>/<i>

下划线：<ins>/<u>

删除线：<del>/<s>

            <h3>一段段落</h3><p><strong>你好</strong>你好<ins>你好</ins><em>你好</em><del>你好</del></p>

图像标签：

用于在网页里放置图片，图像标签为：<img src='图像路径/URL'[alt:若图像无法正常显示替换的文本 title:鼠标指针放在图片上的提示文字 width：图片宽度 height:图片高度]>

超链接标签：

超链接标签用于页面之间的跳转，超链接标签为<a herf="需要跳转的URL [target=_blank:若有该条说明在新窗口打开链接]">互动的内容，可以是文本、图片<\a>

若在开发初期不确定需要跳转的URL，可以用"#"代替

音频标签：

用于在网页中插入音频或视频，音频标签为：<audio src=“音频的路径/URL” 其他属性></audio>

其他属性有：

controls:显示音频的控制面板

loop：若有则音频循环播放

autoplay：自动播放音频，浏览器一般禁止自动播放，只允许静音状态下自动播放

muted：若有则视频默认静音播放

4、列表

列表是指在页面中需要整齐排列的一组文字，列表分为无序列表、有序列表和定义列表

无序列表：

是排列整齐且内容无序的区域，使用ul嵌套li来完成，ul代表无序列表，li代表列表条目,ul标签里只能包含li标签,li标签可以包裹其他标签

<ul>

……

</ul>

    <ul><li>你好</li><li>hello</li><li>nihao</li><li><a href="https://www.baidu.com/" target="_blank">跳转到百度</a></li></ul>

有序列表：

是排列整齐且内容有序带数字编号的区域，使用ol嵌套li来完成，ol标签内只能包含li

    <ol><li>首先</li><li>其次</li><li>最后</li></ol>

定义列表：

定义列表显示标题+列表的有序区域，例如网页尾部的关于内容，定义列表使用dl嵌套dt和dd，dt表示列表标题，dd表示列表内容，dl只能包含dt和dd，dd和dt可以包裹其他标签

5、表格

表格标签用于在网页中绘制表，标签是table嵌套tr,tr嵌套td/th

table代表整个表格

tr代表行

th代表表头

td代表单元格

表格默认无边框线，需要加边框线要用border属性

    <table border="1"><tr><th>姓名</th><th>年龄</th><th>分数</th><th>排名</th></tr><tr><td>张三</td><td>18</td><td>100</td><td>1</td></tr><tr><td>李四</td><td>19</td><td>99</td><td>2</td></tr> <tr><td>王五</td><td>20</td><td>98</td><td>3</td></tr> </table>

合并单元格

若是跨行合并，保留最上边的单元格，在最上边的单元格添加rowspan属性；若是跨列合并，保留最左端的单元格值，添加colspan属性，添加属性后跟数字，代表需要合并的格数

<table border="1"><tr><th>姓名</th><th>年龄</th><th>分数</th><th>排名</th></tr><tr><td>张三</td><td rowspan="2">18</td><td>100</td><td>1</td></tr><tr><td>李四</td><td>99</td><td>2</td></tr> <tr><td>王五</td><td>20</td><td>99</td><td>3</td></tr> <tr><td>备注</td><td colspan="3">优秀</td></tr> </table>

7、表单

表单用于在web中收集信息

input标签：

需要用户输入或者选择信息使用input标签：

其中type决定输入信息的方式，当type值为：

text:文本框，用于输入单行文本，显示输入文本

password：密码框，用于输入密码，隐藏输入文本

radio：单选框

checkbox：多选框

file：上传文件

文本框和密码框还有属性placeholder，用于显示提示信息

radio还有属性name和checked

name:控件分组，实现单选，一组只能选一个

checked：默认选中

file还有属性multiple，浏览器默认只能上传一个文件，而加了multiple属性可以实现多个文件上传

   用户名：<input type="text" placeholder="请输入用户名"><br><br>密码：<input type="password" placeholder="六位以上字母+数字"><br><br>性别：男<input type="radio" name="gender">女<input type="radio" name="gender"><br><br>爱好：打篮球<input type="checkbox">踢足球<input type="checkbox">游泳<input type="checkbox"><br><br>一寸照片：<input type="file">

下拉菜单：

下拉菜单标签使用select嵌套option，select是菜单整体，option是选项，option中可以添加selected属性，代表默认选中

文本域：

文本域用于输入多行文本，标签<textarea>提示文字</textarea>

文本域默认可以随意拖拽大小，这个功能一般会用CSS禁用

label:

用于给标签提供说明文字，也可以增大表单的空间范围

label有两种写法，第一种是标签包裹内容，不包裹控件，在label设置for属性值和表单控件的id属性值相同；第二种是使用lable包裹住文字和控件

按钮：

按钮可以做提交表单、重置和结合JS使用功能

标签为<button type=" ">说明文字</button>，其中属性值type:

submit:提交（不写type该功能为默认）

reset:(重置按钮，清空表单)

button：（普通按钮，默认无功能，结合JS使用）

按钮的功能实现需要配合另外一个标签form使用

form标签为<form action=" ">表单区域</form>

其中action为提交表单的地址

    <form action="">用户名：<input type="text" placeholder="请输入用户名"><br><br>密码：<input type="password" placeholder="六位以上字母+数字"><br><br><label for="man">男</label><input type="radio" name="gender" id="man"><label>女<input type="radio" name="gender"></label><br><br>爱好：打篮球<input type="checkbox">踢足球<input type="checkbox">游泳<input type="checkbox"><br><br>城市：<select><option selected>北京</option><option>上海</option><option>重庆</option><option>深圳</option><option>广州</option></select><br><br><textarea placeholder="请发表评论"></textarea><br><br>一寸照片：<input type="file"><br><br><br><button type="submit">提交</button><button type="reset">重置</button><button type="button">按钮</button></form>