html 基础
文章目录
基本结构标签
<html>
<head>
<title>网页标题</title>
</head>
<body>
主题内容
</body>
</html>
vscode使用及快捷键
新建(Ctrl+N)
保存.html(Ctrl+S)
预览：右键Open in Default Browser(Alt+B)/右键Open with Live Serverc ,Ctrl+S(同步刷新页面)
注:使用live server需要先用vscode打开文件所在目录文件夹。
放大缩小视图: Ctrl+加/减号键
生成页面骨架结构：!+Tab
快速调整浏览器:win+左右箭头和vscode
快速复制一行：shift+alt+上/下箭头
选定多个相同的单词：双击 （ctrl+d）*n
添加多个光标：选定光标位置，Ctrl+Alt+上/下箭头
全局替换某个单词:Ctrl+h 全部替换（第二个图标）
快速定位到某一行：Ctrl+g 输入行数
选择某个区块：按住shift+alt 拖动光标
网页开发工具
< !DOCTYPE html>文件类型声明标签
< html lang=" ">网页语言种类
(en 英文；zh-CN 中文)
< meta charset=“UTF-8”> 字符集（防止乱码）
HTML常用标签
标题标签
一级标题
二级标题
段落与换行标签
分段：
<p>分段</p>
强制换行：<br/>或<br>
（注：是一个单标签）
（分段会使段与段之间有较大缝隙，换行不会）
文本格式化标签
加粗：
<strong>加粗</strong>
<b>加粗</b>
倾斜：
<em>倾斜</em>
<i>倾斜</i>
删除线：
<del>删除线</del>
<s>删除线</s>
下划线：
<ins>下划线</ins>
<u>下划线</u>
div和span
用于装内容，布局网页：
可以多个放在同一行，显示在一行
图像标签
<img src="img.jpg" alt="替换文字"/>(图片与html文件放在一起)
图像属性
src 图片属性 必须属性
alt 文本 图像不能显示时出现的替换文本
title 文本 提示文本，鼠标放在图片上显示的文字
width 像素 图像宽度
height 像素 图像高度
(宽和高只写一个另一个可以等比例调整)
border 像素 图像边框粗细
路径
目录文件夹（vscode的案例）——（打开）——根目录
相对路径：图片相对于html文件的位置
图像文件位于html同一级：
<img src="baidu.gif"/>
*（只写图像文件名即可）*
`图像文件位于html下一级：
<img src="images/baidu.gif"/>
*(写与html同级文件及之下的文件名)*
图像文件位于html上一级：
<img src="../../baidu.gif"/>
*(用n个../代替n层上级文件，直到图片文件)*
绝对路径：
如：“D:\web\img\logo.gif”
或完整网络地址“http://www.nenu.edu.cn/"
超链接标签
<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>
属性
href:必须属性，指定链接目标的url地址，使标签具有超链接的功能。
target:用于指定链接页面的打开方式，_self默认原窗口打开, _blank在新窗口打开。
链接分类
外部链接：<a href="http://www.baidu.com">百度<a/>
内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可。<a href="index.html">首页</a>
空连接：没有确定链接目标，<a href="#">首页</a>
下载链接：如果href里面是一个文件.exe或压缩包.zip，会下载这个文件.exe或压缩包.zip。<a href="img.zip">下载文件</a>
图片，文本，表格，音频等网页元素作为链接：<a href="http://ww.baidu.com"><img src="img.jpg"/></a>
锚点链接：点击链接，快速定位页面中的位置。在链接文本的href里设置属性值<a href="#two">第二集</a>,找到目标位置，添加一个id属性=刚才的名字，<h3 id="two">第二集介绍</h3>
例：
<a href="#life">个人生活</a><br/>
<h3 id="life">个人生活</h3>
注释
<!--注释语句-->快捷键Ctrl+/
特殊字符
一个空格
小于号 <
大于号>
例：<p>这是一个段落标签
表格标签
<table>
<tr>
<td>单元格里的文字</td>
</tr>
</table>
<tr></tr>用于定义表格中的行
<td></td>用于定义表格中的单元格
<th></th>表头，单元格的第一行，文字会居中加粗
<thead></thead>表格头部，可以嵌套<th>标签
<tbody></tbody>表格主题，嵌套<tr>,<td>标签
表格属性（了解）
写在table后面
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500">
合并单元格
跨行合并（竖着合并）：rowspan=“合并单元格的个数”
跨列合并（横着合并）：colspan=“合并单元格的个数”
例：合并横向2，3格
找到目标单元格
删除多余的单元格（第三个）
<td></td>
<td colspan="2"></td>
<td>本行应删除</td>
列表标签
无序列表
<ul>
<li>列表项</li>
<li>列表项</li>
</ul>
注：< ul>里只能放< li>,但< li>里面可以放任意元素
有序列表
<ol>
<li>列表项</li>
<li>列表项</li>
</ol>
注：< ol>里只能放< li>,< li>里可以放任意元素
自定义列表
-
定义项目/名字
- 描述每一个项目/名字
表单标签
表单域< form>
各种表单元素注：method的取值为get/post
表单元素（表单控件）
包含在< form >之中
input输入表单元素
用于收集用户信息
<input type="属性值"/>
type属性值可以取：
checkbox复选框，可以实现多选
爱好：吃饭<input type="checkbox" name="hobby">睡觉<input type="checkbox" name="hobby">
submit提交按钮
<input type="submit" value="可以更改按钮名称">
重置(还原表单为初始状态）：<input type="reset" value="可以更改按钮名称">
select下拉表单元素
用于多个选项并需要节约空间的情况
籍贯：
<select>
<option>选项1</option>
<option>选项2</option>
</select>
注：< select>中至少包含一对< option>
< option selected=“selected”>是默认选项< /option>
该选项默认选中
textarea文本域表单元素
用于用户输入较多的情况，< textarea>能定义多行文本的输入。
<textarea rows="3" cols="20">
文本内容
</textarea>
（cols=“每行中字符数”，rows=“显示行数”）不常用
属性
name属性（定义input元素的名称，区分不同表单元素）
（例子中性别单选按钮必须具有相同的名字name,才可以实现多选一）
性别：男<input type="radio" name="sex">女<input type="radio" name="sex"><br/>
value属性（规定input元素的值）
用户名：<input type="text" name="username" value="请输入用户名"><br>
打开页面表单里有默认文字
checked属性（规定此input元素加载时应当被选中）
爱好：吃饭<input type="checkbox" name="hobby" checked="checked">睡觉<input type="checkbox" name="hobby">
maxlength（规定字段中字符的最大长度）
注：name和value是每个表单元素都有的属性值，主要给后台人员看。
name表单元素名字，要求单选按钮和复选框有相同的name值
< label >标签
增加点击面积，增加用户体验。
<label for="sex">男</lable>
<input type="radio" name="sex" id="sex"/>
注：for后面的（sex）应与id后的（sex）相同，即
">睡觉`
maxlength（规定字段中字符的最大长度）
[外链图片转存中…(img-uEDvrNza-1679721756875)]
注：name和value是每个表单元素都有的属性值，主要给后台人员看。
name表单元素名字，要求单选按钮和复选框有相同的name值
< label >标签
增加点击面积，增加用户体验。
<label for="sex">男</lable>
<input type="radio" name="sex" id="sex"/>
注：for后面的（sex）应与id后的（sex）相同，即
1033
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
