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)相同,即