HTML笔记
初识HTML
我们来了解一下网站和网页
网站:(Website)是指在因特网上根据一定的规则,使用HTML等工具制作的用于展示特定内容相关网页的集合。
网页:是构成网站的基本元素,是承载各种网站应用的平台。
HTML
HTML超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
W3C
为了解决Web应用中不同平台、技术和开发者带来的不兼容问题,保障Web信息的顺利和完整流畅,W3C(World Wide Web Consortium,万维网联盟)诞生了,因此由W3C组织制定和维护的Web开发标准,也成为W3C标准。
常用的网页开发工具:
HbuilderX、WebStrom、Sublime Text、Dreamweaver。
常用的浏览器工具:
HTMl基本机构:
<!DOCTYPE THML>
<html>
<head>
<meta charset="utf-8"/>
<title>第一个html网页</title>
</head>
<body>
<h1>我的第一个网页</h1>
</body>
</html>
基础标签
首先认识一下HTML标签
成对标签是由首标签(起始标签)和尾标签(结束标签)组成,格式为<标签名称></标签名称>。
单标签只有一个标签,用“/”表示标签的自动闭合(“/”可以省略),格式为<标签名称/>。
标签
双标签:<标签名称 属性A="值A" 属性B="值B">···</标签名称>
单标签:<标签名称 属性A="值A" 属性B="值B">
提示:标签属性要写在开始标签内,写到标签名称之后(单标签写到标签内,结束符“/”的前面),与其实标签名称之间至少要保留一个空格,属性名写法同样是大小写不敏感,属性值要用双引号或单引号抱起来,属性值区分大小写(大小写敏感),属性与属性之间至少保留一个空格。
标签的分类及特点
1.块级标签
- 总是在新行上开始
- 高度、行高以及外边距和内边距都可控制
- 宽度缺省则是它的容器的100%,除非设定一个宽度
- 它里面可以有内联元素和其他模块
2.内联标签
- 和其它元素都在一行上;
- 高、行高级外边距和内边距不可改变(除非使用CSS改为块级元素)
- 宽度就是他的文字或图片的宽度,不可改变
- 内联元素只能容纳文本或者其他内联元素
标签名称 | 说明 |
---|---|
h1~h6 | 标题标签 |
p | 段落标签 |
table | 表格标签 |
ul | 无序列表 |
div | 无语义标签 |
span | 无语义标签 |
a | 超链接 |
<!-- – > | 注释标签 |
<br/> | 换行标签 |
无语义标签、有语义标签
语义:语义元素清楚地向浏览器和开发者描述其意义。
非语义元素的例子:div和 span 无法提供关于其内容的信息。
语义元素的例子:form、table 以及 img 清晰地定义其内容。
常用的布局标签
标签名称 | 说明 |
---|---|
header | 表示网页的页眉 |
footer | 表示网页的页脚 |
hgroup | 表示网页的标题 |
nav | 主要定义页面的导航部分 |
aside | 作为主要内容的附属部分 |
section | 表示文档中的“节”,“段” |
section | 表示一个内容的整体 |
转义字符
显示 | 说明 | 实体名称 |
---|---|---|
半方大的空白 |   | |
全方大的空白 |   | |
不断行的空白格 | | |
< | 小于 | < |
> | 大于 | > |
& | &符号 | & |
" | 双引号 | " |
© | 版权 | © |
® | 已注册商标 | ® |
TM | 商标(美国) | TM |
× | 乘号 | × |
÷ | 除号 | ÷ |
超链接
<!-- 基本的语法结构 -->
<a href="URL地址">链接元素</a>
<a href="URL地址" target="目标窗口的打开方式">链接元素</a>
<!-- 同一页面锚记链接的语法结构 -->
<a href="#锚记名称">链接文本</a>
<a name="锚记名称">···</a>
<!-- 不同页面锚记链接的语法结构 -->
<a href="url#锚记名称">链接文本</a>
<a name="锚记名称">···</a>
列表
列表的分类:无序列表、有序列表、定义列表
<!-- 无序列表 -->
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
<!-- 定义列表 -->
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
效果展示:
无序列表:type属性的值有circle(空心圆)、disc(实心圆)、square(实心正方形)
有序列表:type属性的值有A、a、I、i、1
图像
常用的图像格式:JPG\JPEG、PNG、GIF、SVG
img标签的语法结构:
<img src="图像路径URL" alt="替代文本" title="鼠标悬浮上去显示的文字" height="px|%" width="px|%"/>
表格
表格:用于显示数据信息、整体的布局和排版
基本语法结构:
<table>
<tr>
<td>···内容</td>
</tr>
</table>
表格的边框属性
语法结构:
<table border="属性值">···</table>
border:表示是否显示表格边框,只允许为“1”或者“0”(默认值0)
<table border="1">
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
表格的标题<caption>
<table border="1">
<caption>表格标题</caption>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
表格单元格的合并
colspan
<table border="1">
<caption>表格标题</caption>
<tr>
<td colspan="2">单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
rowspan
<table border="1">
<caption>表格标题</caption>
<tr>
<td rowspan="2">单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
</tr>
</table>
表格间的嵌套
<table border="1">
<caption>表格标题</caption>
<tr>
<td>单元格</td>
<td>
<table border="1">
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
注意:要嵌套的表格嵌套在外层表格的一个单元格<td>或<th>内。
表单
表单是实现用户与网页之间信息交互的基础,通过在网页中添加表单可以实现。
表单常用的场景:会员注册、用户登录、提交资料等交互功能。
表单标签
<form>
<!--表单控件标签-->
</form>
表单标签及常用的属性
action:此属性指示服务器上处理表单输出的程序。语法为 action=“URL”。如果action属性值为空,则默认表单提交到本页。
enctype:表达能力数据的编码类型。application/x-www-form-urlencoded(编码所有字符,默认)、multipart/form-data(不对字符编码,文件上传时必须使用此值。)
method:此属性告诉浏览器如何如何将数据发送给服务器,他指定向服务器发送数据的方法(get | post)。
from表单两种提交方式(method属性的2各属性值)之间的区别如下:
使用get提交方式,地址栏状态会发生变化,表单数据会在URL信息中显示。
post提交方式不会改变不会改变地址栏状态,表单数据不会被显示。
表单控件
<input type="空间类型值"/>
属性 | 说明 |
---|---|
type | 此属性指定表单元素的类型 |
name | 此属性指定表单元素的名称 |
size | 此属性指定表单元素的初始宽度 |
value | 此属性方式可选属性,他指定表单元素的初始值 |
maxlength | 此属性用于指定可在text或password元素中输入的最大字符数 |
checked | 制定按钮是否是被选中 |
文本框
<input type="text" />
密码框
<input type="password" />
空间辅助标签<label>
<label for=""> </label>
单选按钮
<input type="radio" value="0" name="gender" checked/>女
<input type="radio" value="1" name="gender"/>男
复选框
<input type="checkbox" name="hobby" value="篮球" checked/>
<input type="checkbox" name="hobby" value="足球"/>
<input type="checkbox" name="hobby" value="听音乐"/>
<input type="checkbox" name="hobby" value="玩游戏"/>
按钮
<!-- 方式一 -->
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
<input type="button" value="普通按钮" />
<!-- 方式二 -->
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>
属性 | 说明 |
---|---|
submit | 用户单击该按钮后,表单将会提交到action属性所指的url,并传递表单数据 |
reset | 用户单击按钮后表单中的各个元素都会回到初始状态 |
button | 属于普通按钮 |
隐藏域
<input type="hidden" value="值" />
下拉框
<select name="指定列表的名字" size="行数">
<option value="可选项的值" selected="selected">···</option>
<option value="可选项的值">···</option>
···
</select>
属性 | 说明 |
---|---|
autofocus | 规定在页面加载后文本区域自动获得焦点值为autofocus |
disabled | 规定禁用该下拉列表 |
form | 规定文本区域所属的一个或多个表单 |
multiple | 规定可选择多个选项 |
name | 规定下拉框的名称 |
required | 规定文本框是必填的 |
size | 规定下来列表中可见选项的数目 |
文本域
<textarea name="textarea" cols="显示的列的宽度" cols="显示的行数">
文本内容
</textarea>
表单控件type属性值
属性值 | 说明 |
---|---|
专门用来输入Email地址的文本框 | |
url | 专门用来输入URL地址的文本框 |
number | 专门用来输入数字的文本框 |
range | 只允许输入一段范围内数字的文本框 |
date | 以日历的形式方便用户输入 |
month | 专门用来输入月份的文本框 |
week | 专门用来输入周号的文本框 |
time | 专门用来输入时间的文本框 |
datetime | 专门用来输入日期和时间的文本框 |
datetime-local | 专门用来输入本地日期和时间的文本框 |
search | 专门用来输入搜索关键词的文本框 |
表单控件常见的属性
属性 | 说明 |
---|---|
placeholder | 提供一种提示 |
required | 设置必填项 |
novalidate | 再提交表单时不应该验证form或input |
multiple | 规定输入域中可以选择多个值 |
form | 规定输入域所属的一个或多个表单 |
max、min、step | 用于包含数字或日期的input类型规定限定 |
pattern | 属性规定用于验证input域的模式,该模式是正则表达式 |
autofocus | 属性规定在加载页面的时候,自动获得焦点 |