纯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> 元素的标题 |