html基础篇
基础结构
<!DOCTYPE html><!--每个文件都要加上这个，是html文件的主题-->
<html><!--查不多就是c预言的main函数，从头括到尾部-->
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>html教程</title>
</head>
<body>
<h1>这是一个标题</h1>
<a href="定义一个超链接">基础教程超链接</a>
<img src="C:\Users\侯卓林\Desktop\图片\2.jpg" width="258" height="400">
<body>
<p>这是一个段落</p><!--p是段落标签-->>
<br><!--//br标签只有一个，是换行标签-->
<table border="1">
<tr><!--这两句是表格框架-->
<td>基础教程</td><!--每个框架一个td标签-->
<td>基础教程</td>
<td>基础教程</td>
</tr>
</table>
</body><!--代码主题写在body里边-->
</body>
</html>
1.需要注意的是：html文件里的注释用的是这个格式<！–注释内容-- >
| html结构标签 | 功能 |
|---|---|
| <.h1><./h1> | 标题 |
| <.p><./p> | 段落 |
| <.body><./body> | 包含文档主体 |
| <.html><./html> | 包含整个html文档 |
| <.a href=“”><./a> | 超链接 |
| <.hr><./hr> | 分隔，水平线 |
| <.br> | 简单文字内容换行 |
| html文本格式化标签 | 描述 |
|---|---|
| <.b> | 粗体 |
| <.em> | 着重文字 |
| <.i> | 斜体字 |
| <.small> | 小号子 |
| <.strong> | 加重语气（粗体） |
| <.sub> | 定义下标字 |
| <.sup> | 定义上标字 |
| <.ins> | 插入字（下划线） |
| <.del> | 删除字 |
链接
<a herf="https://">访问示例网站</a><!--直接链接网站-->
<a href="https://www.example.com">
<img src="example.jpg" alt="示例图片"><!--将链接创建在图片上-->
</a>
<a href="document.pdf" download>下载文档</a><!--这个链接可以直接下载文件-->
<!--target属性可以定义被链接的文档在何处显示-->
<a href="https://www" target="_blank" rel="noopener noreferrer">访问菜鸟教程</a>
<!--这个链接可以再新窗口打开文档-->
<!--另外解释一个ID属性-->
<a id="tips">这个id是隐藏的</a>
如何使用css
css是为了更好的渲染html元素而引入的
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用"style" 属性
- 内部样式表 -在HTML文档头部 区域使用
内联样式
一般来说，我们是在外部引用css文件，但当特殊的样式需要应用到个别元素时，就可以使用内联样式：在相关的标签中使用样式属性，比如：改变段落的颜色和左外边距<p style="color:blue;margin-left:20px;">这是一个段落。<p>
设置背景颜色
<bodystyle="background-color:yellow;">
<h2 style="background-color: aqua;">这是一个段落海贼王
</h2>
</bodystyle></body>
html样式实例-字体，字体颜色，字体大小
我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
文本对齐方式
<h1 style="text-align:center;">
居中对齐的标题
</h1>
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 部分通过
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}</style>
<title>2.11</title>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
外部样式表
通过更改一个文件来更改整个站点的外观
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
html样式标签
| 标签 | 描述 |
|---|---|
| <.style> | 定义文本样式 |
| <.link> | 定义资源引用地址 |
html图像标签
| 标签 | 描述 |
|---|---|
| <.img> | 定义图像 |
| <.map> | 定义图像地图 |
| <.area> | 定义图像地图中的可点击区域 |
HTML 表格标签
| 标签 | |
|---|---|
| <.table> | 定义表格 |
| <.th> | 定义表格的表头 |
| <.tr> | 定义表格的行 |
| <.td> | 定义表格单元 |
| <.caption> | 定义表格标题 |
| <.colgroup> | 定义表格列的组 |
| <.col> | 定义用于表格列的属性 |
| <.thread> | 定义表格的页眉 |
| <.tbody> | 定义表格的主体 |
| <.tfoot> | 定义表格的页脚 |
HTML 列表标签
| 标签 | 描述 |
|---|---|
| <.ol> | 定义有序列表 |
| <.ul> | 定义无序列表 |
| <.li> | 定义列表项 |
| <.dl> | 定义列表 |
| <.dt> | 自定义列表项目 |
| <.dd> | 定义自定列表项的描述 |
HTML 分组标签
| 标签 | 描述 |
|---|---|
| <.div> | 定义了文档的区域，块级 (block-level) |
| <.span> | 用来组合文档中的行内元素， 内联元素(inline) |
HTML布局
大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。
大多数网站可以使用
div的id部分用于识别布局，例如
例如，这是一个html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
</div>
</body>
</html>
HTML表单和输入
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。
以下是一个简单的HTML表单的例子：
<form action="/" method="post">
<!-- 文本输入框 -->
<label for="name">用户名:</label>
<input type="text" id="name" name="name" required>
<br>
<!-- 密码输入框 -->
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<br>
<!-- 单选按钮 -->
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br>
<!-- 复选框 -->
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">订阅推送信息</label>
<br>
<!-- 下拉列表 -->
<label for="country">国家:</label>
<select id="country" name="country">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
<br>
<!-- 提交按钮 -->
<input type="submit" value="提交">
</form>
其中，提交按钮表单的内容会被传送到服务器，表单的动作属性 action 定义了服务端的文件名。action 属性会对接收到的用户输入数据进行相关的处理:
代码如下：
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
这里的method属性一共有两个：post和get
- post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
- get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 **?**作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。
例如：
<!-- 以下表单使用 GET 请求发送数据到当前的 URL，method 默认位 GET。 -->
<form>
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- 以下表单使用 POST 请求发送数据到当前的 URL。 -->
<form method="post">
<label>Name:
<input name="submitted-name" autocomplete="name">
</label>
<button>Save</button>
</form>
<!-- 表单使用 fieldset, legend, 和 label 标签 -->
<form method="post">
<fieldset>
<legend>Title</legend>
<label><input type="radio" name="radio"> Select me</label>
</fieldset>
</form>
html5关于表单输入标签
| 标签 | 描述 |
|---|---|
| <.from> | 定义供用户输入的表单 |
| <.input> | 定义输入域 |
| <.textarea> | 定义文本域 (一个多行的输入控件) |
| <.label> | 定义了 元素的标签，一般为输入标题 |
| <.fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
| <.legend> | 定义了 元素的标题 |
| <.select> | 定义了下拉选项列表 |
| <.optgroup> | 定义选项组 |
| <.option> | 定义下拉列表中的选项 |
| <.button> | 定义一个点击按钮 |
| <.datalist> | 指定一个预先定义的输入控件选项列表 |
| <.keygen> | 定义了表单的密钥对生成器字段 |
| <.output> | 定义一个计算结果 |
HTML框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面(在一个窗口中显示多个网页链接)
iframe语法：
<该URL指向不同的网页。
同时iframe也可以设置标签的高度和宽度
<
定义是否移除边框：
<
显示一个目标链接的页面
<
<
html颜色
各种颜色名称：https://www.runoob.com/html/html-colornames.html
html颜色值
html脚本
Javascript使html页面具有更强的动态和交互性
html
## html<noscript>标签
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：
~~~html
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
html脚本标签
| 标签 | 描述 |
|---|---|
| <.script> | 定义了客户端脚本 |
| <.noscript> | 定义了不支持脚本浏览器输出的文本 |
html字符实体
html中的预留字符被替换为字符实体
一些在键盘上找不到的字符也可以使用字符实体来替换
html实体
在html中某些字符是预留的。
在html中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 字符实体类似这样：&entity_name,&#entity_number如需要显示小于号，我们必须这样写：</</<使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
不间断空格
HTML 中的常用字符实体是不间断空格( )。
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。 
结合音标符
发音符号是加到字母上的一个"glyph(字形)"。
一些变音符号, 如 尖音符 ( ̀) 和 抑音符 ( ́) 。
变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。
变音符号可以与字母、数字字符的组合来使用。
以下是一些实例:
| 音标符 | 字符 | Construct | 输出结果 |
|---|---|---|---|
| ̀ | a | à | à |
| ́ | a | á | á |
| ̂ | a | â | â |
| ̃ | a | ã | ã |
| ̀ | O | Ò | Ò |
| ́ | O | Ó | Ó |
| ̂ | O | Ô | Ô |
| ̃ | O | Õ | Õ |
html字符实体
！实体名称对大小写敏感
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |||
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ’ | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 人民币/日元 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
html URL
URL 是一个网页地址。
URL可以由字母组成，如"runoob.com"，或互联网协议（IP）地址： 192.68.20.50。大多数人进入网站使用网站域名来访问，因为 名字比数字更容易记住
URL的语法规则：
scheme://host.domain:port/path/filename
说明:
- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 runoob.com
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称
常见的URL scheme
| Scheme | 访问 | 用于… |
|---|---|---|
| http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
| https | 安全超文本传输协议 | 安全网页，加密所有信息交换。 |
| ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
| file | 您计算机上的文件。 |
##URL字符编码
URL 只能使用 ASCII 字符集.
来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
URL 编码实例
| 字符 | URL 编码 |
|---|---|
| € | %80 |
| £ | %A3 |
| © | %A9 |
| ® | %AE |
| À | %C0 |
| Á | %C1 |
| Â | %C2 |
| Ã | %C3 |
| Ä | %C4 |
| Å | %C5 |
如需完整的 URL 编码参考，请访问我们的 URL 编码参考手册。
一些html的基本格式速查文档
https://www.runoob.com/html/html-quicklist.html
- html所有标签列表https://www.runoob.com/tags/html-reference.html
了解xhtml
如何将html转化为xhtml
- 添加一个 XHTML <!DOCTYPE> 到你的网页中
- 添加 xmlns 属性添加到每个页面的html元素中。
- 改变所有的元素为小写
- 关闭所有的空元素
- 修改所有的属性名称为小写
- 所有属性值添加引号