HTML
HTML
1、什么是HTML
HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等
2、HTML基本结构标签
HTML的基本结构标签(骨架标签):
标签名 | 定义 |
---|---|
<html></html> | HTML标签 |
<head></head> | HTML的头部 |
<title></title> | HTML的标题 |
<body></body> | HTML的主体 |
3、网页开发工具
WebStorm、Visual Studio Code等
VS Code安装链接:https://code.visualstudio.com/
VS Code推荐添加插件:
插件 | 作用 |
---|---|
Chinese (Simplified) Language Pack forVS Code | 中文语言包 |
OPen in Browser | 右击选择浏览器打开html文件 |
JS-CSS-HTML Formatter | 每次保存自动格式化js css和html代码 |
Auto RenameTag | 自动重命名配对的HTML/XML标签 |
CSS Peek | 追踪至样式 |
4、HTML常用标签
4.1 DOCTYPE和lang以及字符集
文档类型声明:
<!DOCTYPE html>
lang语言种类 en 或 zh-CN:<html lang="en">
或<html lang="zh-CN">
字符集:<meta charset="UTF-8">
4.2 常用标签
常用标签表:
标签 | 说明 | 使用 |
---|---|---|
<h1> - <h6> | 标题标签 | <h1>一级标题</h1> |
<p></p> | 段落标签 | <p>段落</p> |
<br /> | 换行标签 | 换行<br /> |
<strong></strong>或<b></b> | 文字加粗 | <strong>文字</strong> |
<em></em>或<i></i> | 倾斜文字 | <em>文字</em> |
<del></del>或<s></s> | <del>文字</del> | |
<ins></ins>或<u></u> | 下划线 | <ins>文字</ins> |
<div></div> | 用于布局,分割、分区,独占一行 | <div>百度</div> |
<span></span> | 用于布局,跨度、跨距,一行可有多个 | <span>百度</span> |
<img src=""/> | 图像标签 | <img src="img.jpg"> |
<a></a> | 超链接标签 | <a href="跳转目标" target="目标窗口弹出方式">文本或图像</a> |
<a href="#name"></a>、<h2 id="name"></h2> | 锚点链接标签 | 组合设置:<a href="#name">目标</a>、<h2 href="name">目标</h2> |
4.2.1 图像标签和路径
1、图像标签属性:
属性 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本,图像不能显示的文字 |
title | 文本 | 提示文本,鼠标放在图片上显示的文字 |
width | 像素 | 设置图像宽度 |
height | 像素 | 设置图像高度 |
border | 像素 | 设置图像边框粗细 |
2、图像路径:
相对路径分类 | 说明 |
---|---|
同一级路径 | 图像文件位于HTML文件同一级,如<img src="img.jpg" /> |
下一级路径 | 图像位于HTML文件下一级,如<img src="images/img.jpg" /> |
上一级路径 | 图像位于HTML文件上一级,如<img src="../img.jpg" /> |
绝对路径 | 例如 |
---|---|
目录下的绝对位置,直接到达目标位置,通常从盘符开始的路径 | “D:\web\img\logo.gif"或完整的网络地址"http://www.itcast.cn/images/logo.gif" |
4.2.2 超链接标签
1、语法格式:
<a href="跳转目标" target="目标窗口弹出方式">
文本或者图像</a>
href:用于指定连接目标地址的ur地址(必须属性)
target:用于指定连接页面的打开方式,其中 _self 为默认值, _blank 为在新窗口中打开
例如:
2、链接分类:
链接分类 | 使用说明 |
---|---|
外部链接 | 例如:<a href="http://www.qq.com"> 腾讯qq</a> |
内部链接 | 网站内部页面之间互相链接,直接链接内部网页名称即可,例如:<a href="demo.html"> 圣诞</a> |
空链接 | 如果当时没有确定链接目标用<a href="#"> 目标</a> |
下载链接 | 如果href里面的地址是一个文件或压缩包,会下载这个文件 |
网页元素链接 | 在网页中的各种网页元素,如文本、图像、音频等都可添加超链接 |
锚点链接 | 先在链接文本的href属性中设置属性值为"#名字" ,然后找到目标位置标签在里面添加一个id属性:id=“名字”。 例如先设置<a href="#name"> 目标</a> 再设置<h2 href="name">目标</h2> |
5、HTML中的注释和特殊字符
5.1、注释:
快捷键:ctrl + /
<!--注释语句-->
5.2、部分特殊字符
特殊字符 | 字符代码 |
---|---|
< | |
> | < |
& | > |
± | ± |
× | × |
÷ | ÷ |
₂ | ² |
₃ | ³ |
° | ° |
¥ | ¥ |
6、表格标签
6.1、表格的主要作用:用于显示、展示数据
6.2、表格基本语法:
<table> --定义表格标签
<tr> --定义表格中的行
<td>单元格内的文字</td> --定义表格中的单元格
...
</tr>
...
</table>
<table>
<tr>
<th>单元格内的文字</th> --<th></th>为表头单元格标签
...
</tr>
...
</table>
例如
6.3、表格的相关属性
表格相关属性定义在<table></table>
中
属性名 | 属性值 | 属性说明 |
---|---|---|
align | letf、center、right | 规定表格相对周围元素的对齐方式 |
border | 1或"" | 规定单元格边框,默认为"" |
cellpadding | 像素值 | 规定单元格内容那个和边缘的距离,默认为1 |
cellspacing | 像素值 | 规定单元格之间的空白,默认为2 |
width | 像素值 | 规定表格的宽度 |
6.4、表格的结构标签
<thead></thead> --表格的头部区域
<tbody></tbody> --表格的主体区域
基本语法:
<table>
<thead>
<tr>
<th>单元格内的文字</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>单元格内的文字</td>
</tr>
<tbody>
</table>
6.5、合并单元格
1、合并单元格方式:
跨行合并 | 跨列合并 |
---|---|
rowspan=“合并单元格的个数” | colspan=“合并单元格对的个数” |
最上侧的单元格为目标单元格 | 最左侧的单元格为目标单元格 |
2、合并单元格步骤
1、确定跨行还是跨列
2、找到目标单元格,写上合并代码
3、删除多余单元格
7、列表标签
列表标签的作用:布局
标签名 | 定义 | 说明 |
---|---|---|
<ul></ul> | 无序标签 | 只能包含<li> ,没有顺序,<li> 里面可以包含任何标签 |
<ol></ol> | 有序标签 | 只能包含<li> ,有顺序,<li> 里面可以包含任何标签 |
<dl></dl> | 自定义列表 | 只能包含<dt> 和<dd> ,<dt> 和<dd> 里面可以包含任何标签 |
7.1 无序列表
无序列表基本语法
<ul>
<li>列表项1<li>
<li>列表项2<li>
<li>列表项3<li>
...
</ul>
例如
7.2 有序列表
有序列表基本语法
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
7.3 自定义列表
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
<dl>
<dt>名词</dt>
<dd>解释1</dd>
<dd>解释2</dd>
...
</dl>
8、表单标签
表单标签的作用:是收集用户信息
表单标签的组成:表单域、表单控件和提示信息
8.1 表单域
8.1.1、表单域的基本信息
定义: 表单域是一个包含表单元素的区域
<form>
标签用于定义表单域,实现用户信息的收集和传递(把它范围内的表单元素信息提交给服务器)
表单域的基本语法格式:
<form action="url地址" method="提交方式" name="表单域名称">
表单元素控件
</form>
常用属性:
属性 | 属性值 | 说明 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
method | get/post | 用于设置表单数据的提交方式,取值为"get"或"post" |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域 |
8.1.2、表单控件(表单元素)
input 输入表单元素
select 下拉表单元素
textarea 文本域元素
1、input元素
1.1 语法格式:
<input type="属性值" /> 单标签
1.2 type属性设置不同的属性值来指定不同的控件类型:
属性值 | 说明 |
---|---|
button | 定义可点击按钮 |
checkbox | 定义复选框 |
file | 定义输入字段和“浏览”按钮,供文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形势的提交按钮 |
password | 定义密码字段,该字段中的字符被掩码 |
radio | 定义单选框 |
reset | 定义重置按钮 |
submit | 定义提交按钮 |
text | 定义单行输入字段,用户可以在其中输入文本,默认宽度为20字符 |
例如
1.3 除type属性之外的常用属性
属性 | 属性值 | 说明 |
---|---|---|
name | 用户自定义 | 定义input元素的名称,用于区别不同的表单 |
value | 用户自定义 | 规定input元素的值 |
checked | checked | 规定此Input元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段的字符的最大长度 |
1、name和value是每个表单都有的属性值,主要给后台人员使用
2、name表单元素的名字,要求单选按钮和复选框要有相同的name值
3、checked属性主要针对单选按钮和复选框,用于一打开页面就默认选定的元素
例如
1.4、label标签
运用场景: 绑定一个表单,当点击<label>
标签内的文本时,浏览器会自动将焦点转到或者选择对应的表单元素上,增加用户体验。
语法格式:<label>
标签的for属性应当与相关元素的id属性相同
<label for="man"> 男 </label>
<input type="radio" name="sex" id="man" />
例子:
2、select下拉表单元素
运用场景: 在页面中,如果有多个选项让用户选择,可以使用<select>
标签控件来定义下拉列表
语法格式:
(项目):
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
在中定义selected="selected"可以设置当前项为默认值
例如
3、textarea文本域标签
运用场景: 当用户输入内容比较多的情况下用textarea定义多行文本输入
语法格式:
<textarea row="数值" cols="数值">
文本内容
</textarea>