本文介绍了HTML的基础知识，包括网站和网页的概念，HTML的用途，W3C标准，以及常用的网页开发工具。深入讲解了HTML的基本结构，如DOCTYPE、head、body等，并展示了常用标签的使用，如标题、段落、链接、表格、表单等。此外，还提到了标签的分类，如块级和内联标签，以及语义化标签的重要性。内容涵盖了表单的提交方式、表单控件和属性，以及图像、列表和表格的创建。
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 | 属性规定在加载页面的时候，自动获得焦点 |
扫一扫
2321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
