纯HTML，无CSS、JS
创建文件
- 软件下载：HBuilder，官网下好后解压缩就能用
- 新建项目：文件——新建——项目，选择普通项目，模板选基本HTML项目，地址可以自己改 （我自己改变了主题颜色，所以主题颜色不一样）
进入后在index.html文件中编写
img文件夹存放图片
css文件夹存放css文件
js文件夹存放js文件
运行文件按下快键键ctrl+R选择浏览器运行，或者按下方图方框内按钮
注释
HTML的注释：<!-- —>
Css的注释：/* */
快捷键：ctrl+/
两个注释都可以跨行
基础知识
- html是超文本标记语言，不是编程语言
- .html和.htm都是它的后缀名
- 标签由两个尖括号包含着关键词组成
- 标签通常都是成对出现：< html></html>，少有单个：<img />
- 双标签前面一个是开始标签，后面一个是结束标签，结束标签要在关键词前加上/
- 单标签在关键字后面加/，有的不加的是因为浏览器版本高，为了更好的适应性，最好加上
<!DOCTYPE>
文档类型声明
- <!DOCTYPE html> html5的声明（还有其他各种版本的，现在一般都用html5）
- <!DOCTYPE>
声明必须是 HTML 文档的第一行，位于 标签之前。 - <!DOCTYPE> 声明不是 HTML 标签；它是指示 web
浏览器关于页面使用哪个HTML版本进行编写的指令。
<meta>
<meta charset=”UTF-8”/>
- charset声明了文档的字符编码
- UTF-8为万国码，GB2312为简体中文，BLG5为繁体中文，GBK为简繁体中文
- 如果没有meta，你的页面的文字就会是乱码
- 另外它还有其他作用，自行搜索
<html></html>
- 整个页面必须要有这个标签
- 它代表标签内的内容都是html内容
- 所有html内容都在里面
- <html lang=”en”>当前文档显示的语言
- Zh-CN是中文，fr是法语，en是英语
<head></head>
规定文档相关的配置信息，包括文档的标题，引用的文档样式和脚本等。比如和
<body></body>
网页主体，不多解释了。下方图片方框中内容就是网页主体
<title></title>
文档标题（网页标题），没啥好解释的。下方图片方框中内容就是文档标题
<h1></h1>
标题标签
- 有大号字体、字体加粗的功能
- <h1>——<h6>都是标题标签，<h1>字体最大，越往后面越小
- 注意！！ 错误写法：<h1>不能这么写<h2>这么写</h1>是错误的</h2>
<p></p>
段落标签，一段普通的文字
<br/>
- 换行标签。除了某些标签自动换行，也可以人为换行
- 水平线<hr/>和换行标签都是单标签，作用是分割上下文（一条线）
文本格式化
| 标签 | 作用 |
|---|---|
| <strong> | 加粗，更有语义 |
| <b> | 加粗 |
| <em> | 倾斜，更有语义 |
| <i> | 倾斜 |
| <del> | 删除线，更有语义 |
| <s> | 删除线 |
| <ins> | 下划线，更有语义 |
| <u> | 下划线 |
计算机输出标签（个人觉得没什么用，就不敲代码了）
缩写、引用标签
| 标签 | 作用 |
|---|---|
| <abbr> | 缩写，title属性中是缩写的内容 |
| <acrony> | 首字母缩写 （用起来和缩写差不多） |
| <address> | 作者信息（不常用） |
| <bdo> | 文字方向。dir属性：ltr是正序（左到右），rtl是倒序（右到左） |
| <blockquote> | 长引用。自动添加前后换行、边距 |
| <q> | 短引用。自动添加引号 |
基础样式
使用style 属性用来改变HTML的一些基础样式（不多说，属于CSS了）
| 属性 | 作用 |
|---|---|
| background-color | 背景颜色 |
| color | 字体颜色 |
| font-family | 字体样式 |
| font-size | 字体尺寸 |
px：单位名称，像素
路径
在图片、链接之前先讲一下路径
| 代码 | 意义 |
|---|---|
| / | 下一级目录 |
| …/ | 上一级目录 |
| ./ | 当前目录 |
例如
解释：所在的目录中img文件的下一级里一个叫EVE的jpg的文件（jpg是图片文件）
<img />
<img />是图片标签，可以插入图片
| 属性 | 作用 |
|---|---|
| src | 图片路径（一般用相对路径） |
| alt | 图片不能显示时替换的文本（未找到图片） |
| title | 鼠标放到图像上时显示的文本 |
| width | 图像宽度 |
| height | 图像高度（单个高或宽，图片自动等比例放大缩小,两个都设置图像有可能失真） |
| border | 图像边框粗细 |
<a href=”” target=””></a>
- href：指定链接目标url地址
- target：指定链接页面的打开方式。_self为默认值，_blank为在新窗口打开
-
锚点链接（书签）
-
<a href=”#”></a>
<h2 id=””></h3> -
点击链接<a>后，会直接跳转到链接的位置，也是#后面的位置，和id对应。用于页面过长，滑动到指定位置
id是什么？你可以理解为名字
特殊字符
| 字符 | 代码 |
|---|---|
| 空格 |   |
| < | < |
| > | > |
| & | & |
| ￥ | ¥ |
| 版权 | © |
| 注册商标 | ® |
| 摄氏度 | ° |
| 正负号 | ± |
| 乘号 | × |
| 除号 | ÷ |
| 平方（上标）2 | ² |
| 立方（上标）3 | ³ |
表格
| 标签 | 作用 |
|---|---|
| <table></table> | 定义表格 |
| <th></th> | 表头单元格，一般表格第一行或第一列，文本内容加粗居中显示 |
| <tr></tr> | 定义表格行，嵌套在<table>中 |
| <td></td> | 定义单元格，嵌套在<tr>中 |
| <thead></thead> | 定义表格头部 |
| <tbody></tbody> | 定义表格主体 |
常见的一些属性
| 属性 | 作用 |
|---|---|
| align | 规定表格相对周围元素的对齐方式（left、center、right） |
| border | 规定表格单元格是否有边框，默认为””，表示没有边框 |
| cellpadding | 规定单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 规定单元格之间的空白，默认2像素 |
| width | 规定表格的宽度 |
| height | 规定表格高度 |
合并单元格
- rowspan：跨行合并（竖着合并）,如果合并三行，在第一行中添加属性，其余行代码删除
- rowspan：跨行合并（横着合并），如果合并三个，在第一列中添加属性，其余列代码删除
列表标签
| 标签 | 作用 |
|---|---|
| <ul></ul> | 无序列表 |
| <ol></ol> | 有序列表 |
| <li></li> | 无序列表和有序列表里的每一项 |
| <dl></dl> | 自定义列表 |
| <dt></dt> | 自定义列表，定义项目（理解为标头） |
| <dd></dd> | 自定义列表，定义项 |
表单
< from></from>
- 正规的写法是要在表单里面的，但是很多时候只需要很少的表单（一个按钮，一个输入框）所以from就忽略了
- 但是当要是有下面这几种属性的话，必须填写
- action：用于接收并处理表单数据的服务器程序的url地址
- method：用于设置表单数据的提交方式，取值为get和post
- name：指定表单名称，以区分多个表单域
<input type=””>
| 属性 | 作用 |
|---|---|
| button | 定义可点击按钮 |
| checkbox | 定义复选框 |
| file | 定义输入字段和浏览按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义隐藏的输入字段 |
| password | 定义密码字段 |
| radio | 定义单选按钮 |
| reset | 定义重选按钮 |
| submit | 定义提交按钮 |
| text | 定义单行输入字段，默认20字符 |
input其他常见属性
name=”” input表单元素
男：<input type=” radio” name=”sex”> 女：<input type=”checkbox” name=”sex”>
多选框和单选框必须有同样的name名字才可以实现多选或单选
value=”” input表单元素，规定input的值（对于后台使用）
用户名：<input type”text” name=”username” value=”请输入用户名”> 显示带有请输入用户名的输入框
checked=”” input表单元素，规定首次加载时被选中
男：<input type=“radio” name=”sex” checked=”checked”> 默认选中男单选按钮
maxlength=”” input表单元素，规定输入字段中字符的最大长度
用户名：<input type=”text” name=”username” maxlength=”6”> 规定字符最大长度为6
<link>
- <link>标签定义了文档与外部资源之间的关系
- <link>标签通常用于链接到样式表，写在head里面
- 例如：<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
- 上面这个是链接到一个css文件上，在html学完之后就可以学css了
<style>
在里面写css内容，这样就不用引用文件了，但是通常来说引用更好（符合编思想），不做细讲
块
<div>元素是块级元素，会前后换行
<span>元素是内联元素，不会换行
<div>的使用非常多，结合css做页面布局，具体查看css内容
内联框架
- <iframe> 用于在网页内显示网页
- 有些网页拒绝内联框架使用，所以会显示不出来
- frameborder属性：边框，设置为0就会无边框
<video>
html5的视频
- autoplay属性：声明该属性后，视频会尽快自动开始播放，不会停下来等待数据全部加载完成
- controls属性：加上这个属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放
- loop属性：布尔属性；指定后，会在视频播放结束的时候，自动返回视频开始的地方，继续播放。
- soure中的type属性：图像媒体类型，使用编码器
<audio>
html5的音频
- 在浏览器不支持该元素时，会显示 <audio></audio> 标签之间的内容作为回退
- controls属性：如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放
- autoplay属性：布尔值。声明该属性，音频会尽快自动播放，不会等待整个音频文件下载完成
- muted属性：表示是否静音的布尔值。默认值为 false，表示有声音
- loop属性：布尔属性。如果声明该属性，将循环播放音频
<input>新增
html5新增input类型
| 类型 | 描述 |
|---|---|
| color | 颜色选择 |
| date | 日期选择 |
| datetime-local | 带有时间的日期选择 |
| 用于编辑电子邮件地址的字段。看起来像输入，某些支持的设备中显示相关键盘 | |
| month | 用于输入月份和年份的控件，不带时区 |
| number | 用于输入数字的控件，某些设备中显示数字键盘 |
| range | 范围滑块 |
| search | 用于输入搜索字符串的单行文本字段 |
| tel | 用于输入电话号码的控件，某些支持的设备中显示相关键盘 |
| time | 用于输入不带时区的时间值的控件 |
| url | 用于输入 URL 的字段。看起来像输入，某些支持的设备中显示相关键盘 |
| week | 周-年 日期选择 |
<datalist>
表单新增元素
- input的list和datalist的id对应
- 效果是在input中输入内容时，会提示各个option的value
语义元素
理解为分成各个块，方便代码阅读、查看、修改
| 标签 | 作用 |
|---|---|
| <section> | 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分 |
| <article> | 标签定义独立的内容 |
| <nav> | 标签定义独立的内容 |
| <aside> | 标签定义页面主区域内容之外的内容（比如侧边栏） |
| <header> | 元素描述了文档的头部区域 |
| <footer> | 元素描述了文档的底部区域 |
| <figure> | 标签规定独立的流内容（图像、图表、照片、代码等等） |
| <figcaption> | 标签定义 <figure> 元素的标题 |
1199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
