Html 超文本标记语言,全称:hypertext markup language,用于创建网页的标准标记语言
通用:
目前不区分大小写,html4建议小写,xhtml强制小写
属性值包含在引号内,建议双引号,单引号不限制,如果属性值本身带有双引号则必须用单引号
<!--注释的用法-->
<!DOCTYPE html>
声明为html5文件
相对通用属性:
class 定义一个或多个类名,classname类名从样式文件引入,双引号里面可以填写多个
id 定义元素的唯一id,双引号里面只能填写一个
title 描述元素的额外信息(作为工具条使用),类似于解释说明
标签速查链接:https://www.runoob.com/html/html-quicklist.html
<!--XHTML与 HTML 相比最重要的区别:
文档结构
XHTML DOCTYPE 是强制性的
<html> 中的 XML namespace 属性是强制性的
<html>、<head>、<title> 以及 <body> 也是强制性的
元素语法
XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素
属性语法
XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化也是禁止的 -->
<!--元素:
大多标签:属性+开放标签+闭合标签
空标签:只有属性,无需闭合标签-->
<!--CSS(cascading style sheets 级联样式表)
html4开始引入
加入html方式
内部样式--元素内style属性
内部样式表--head中<style type="text/css">内部样式表</style>
外部引入--head中<link rel="stylesheet" type="text/css" href="外部引入地址">-->
<!--根元素
其他所有元素包含在内-->
<html>
<!--头部-->
<head>
包含所有的头部标签元素
可以插入脚本(scripts)样式文件(css)及各种meta信息
可以在头部添加的标签元素有meta,title,base,script,noscript,link,style
<meta name="author" content="sunyue">
描述一些基本的元数据
描述,关键词,作者,最后修改时间,编码类型
<meta http-equiv="refresh" content="30">
定义如何显示内容或重新加载页面,每三十秒刷新重新载入页面
<meta charset="gbk">
utf-8
国际通用编码
用以解决国际上多字符的一种编码
英文为1字节8位,中文为3字节24位
通用性强
gbk
国家编码
包含所有中文字符
通用性差
占用数据库相对utf-8较小
360默认gbk
<title></title>
定义浏览器工具栏标题
添加收藏时显示标题
显示在搜素引擎结果页面的标题
<base href="/Users/icourt/Desktop/工作/测试文件/" target="_blank">
定义页面所有链接的默认链接地址
与图片结合
<img src="42k.jpg" width="50" height="50">
图片标签
stc属性为图片地址+名称
width=“” 宽
height=“” 高
border=“” 边框
<a href="https://music.163.com/#"></a>
链接标签
可嵌套图片
href属性为指定链接地址,可以走base,也可以重新定义
<a href="https://music.163.com/" target="_blank"></a>
target属性,可以走base,也可以重新定义
_self
_parent
_blank
_top
<link rel="stylesheet" type="text/css" href="mystyle.css">
定义文档与外部资源之间的关系
通常用于连接样式表
href属性
rel属性
用于指定当前文件与链接文件之间的关系
只有用了href属性才能使用rel属性
type属性
文件类型
默认text
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
可以直接添加样式渲染
type是必须,唯一值为text/css
<script type="text/javascript"></script>
定义客户端脚本
</head>
<body>
<!--链接-->
<div>
<a href="https://music.163.com/#"></a>
链接标签
可嵌套图片
href属性为指定链接地址
<a href="https://music.163.com/" target="_blank"></a>
target属性
_self
_parent
_blank
_top
<a id="tips001">被链接的位置</a>
<a href="#tips001">跳转到本页当前链接位置</a>
<a href="https://www.runoob.com/html/html-links.html#footer">跳转非本页的链接位置</a>
id属性
定义元素的唯一id
双引号里面只能填写一个
html文档属性标记
</div>
<!--图像-->
<div>
<img src="图像引用地址" alt="预备文本" height="30px" width="30px" align="bottom" usemap="picturemap">
src属性
source源
引用地址
alt属性
预备的可替换的文本
当浏览器无法加载出图片时展示
height 宽度
width 高度
默认属性值为像素 px
align属性
对齐
属性值
top
middle
bottom
usemap属性
定义客户端图片映射
通过name和id进行连接
<!--每加载一个页面需要加载一个页面加其所包含所有图片的文件数
注意插入图片的路径-->
<map name="picturemap" id="picturemap">
<area shape="rect" coords="" href="">
</map>
定义图像地图
通过name和id进行连接映射图片
area必须在map内
shape属性,coords属性
circ 圆形--x,y,r,圆心坐标,半径
rect 矩形--x1,y1,x2,y2,对点坐标
poly 多边形--x1,y1,x2,y2,x3,y3....每一点坐标
属性值会对coords产生影响,如无默认矩形
</div>
<!--文本-->
<div>
<!--<p></p>
段落
块级元素
浏览器自动在段前短后自动插入空行-->
<br/>
换行
没有关闭标签的空元素
加/保险
所有非标签连续的换行空格都会被浏览器过滤成一个空格
<hr/>
创建水平线
没有关闭标签的空元素
加/保险
<h1>最大</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>最小</h6>
标题
浏览器自动在段前短后插入空行
不要为了加粗增大字体设置标题,浏览器会根据标题进行网页的结构和内容索引
<b></b>
定义粗体文本
加粗标签
bold
<strong></strong>
定义加重语气
效果同b标签
<i></i>
定义斜体文本
斜体标签
italic
<em></em>
定义着重语气
效果同i标签
<big></big>
定义大号字
<small></small>
定义小号字
<sub></sub>
定义下标
<sup></sup>
定义上标
<!--字符实体
显示结果 描述 实体名称 实体编号
空格  
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '
¢ 分 ¢ ¢
£ 镑 £ £
¥ 人民币/日元 ¥ ¥
€ 欧元 € €
§ 小节 § §
© 版权 © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
-->
</div>
<!--表格-->
<div>
<table border="1px" cellpadding="10px">
<!--表格标签
默认无边框
border属性
定义边框宽度
默认像素px
cellpadding属性
定义单元格内边距
默认像素px
cellspacing属性
定义单元格间边距
默认像素px-->
<caption>表格的标题</caption>
<!--必须直接放到table之后
每个表格只支持一个-->
<colgroup>
<col span="1" style="background-color: red">
</colgroup>
<!--对列进行分组,便于应用样式
位置在caption之后,其余标签之前
进行多个分组应用col标签-->
<!--定义表格的各个部分-->
<p>
<thead>
<!--位置在colgroup之后,tfoot之前
至少包含一个tr标签
当多页面表格被打印时,打印在每一页的页眉页脚
thead,tbody,tfoot三者可结合使用-->
<tr>页眉</tr>
</thead>
<tfoot>
<!--位置在thead之后,tr和tbody之前
至少包含一个tr标签
当多页面表格被打印时,打印在每一页的页眉页脚
thead,tbody,tfoot三者可结合使用-->
<tr>页脚</tr>
</tfoot>
<tbody>
<!--位置在tfoot之后,tr之前
至少包含一个tr标签
当多页面表格被打印时,打印在每一页的页眉页脚
thead,tbody,tfoot三者可结合使用-->
<tr>主体</tr>
</tbody>
</p>
<th rowspan="3">表头,默认加粗居中</th>
<!--表头单元格标签
rowspan属性/colspan属性
合并几行/列单元格
属性值合并单元格数目-->
<tr align="right" height="30">
<!--行标签,除标题行外第一行-->
<td width="10">该行第一个单元格的数据</td>
<td>该行第二个单元格的数据</td>
<td>可以包含文本,图片,列表,段落,表单,水平线,表格</td>
</tr>
<tr>
<!--行标签,除标题行外第二行-->
<td>该行第一个单元格的数据</td>
<td>该行第二个单元格的数据</td>
<td>表格足够强大</td>
</tr>
<tfoot>
<tr>页脚</tr>
</tfoot>
</table>
</div>
<!--列表-->
<div>
<ul style="list-style-type: square;">
<li>无序列表第一个选项
<ul>
<li>嵌套列表第一项</li>
<li>嵌套列表第二项</li>
</ul></li>
<li>无序列表第二个选项</li>
</ul>
<ol>
<li>有序列表第一个选项</li>
<li>有序列表第二个选项</li>
</ol>
<ol start="50" type="a/A/i/I">
<li>有序列表第50个选项</li>
<li>有序列表第51个选项</li>
</ol>
</div>
<!--区块布局-->
<div>
<!--块级元素
以新行开始或结束
div,p,h1,ul,table-->
<div>
块级元素
组合其他标签的容器
可与css组合,用于大批量内容格式化
可用于文档布局,属性margin
可用table,div布局
<!--table和div布局的优缺点
table:
内容自适应,开发时间相对较短
布局变更需要重写,不便于维护
数据嵌套,网页浏览速度相应较慢
div:
内容非自适应,需要考虑兼容,每个容器都需要定义样式,开发时间相对较长
布局变更方便,便于维护扩展
网页浏览速度快-->
</div>
<!--内联元素
span,a,img不以新行开始或结束-->
<span>
内联元素
文本的容器
可与css组合,为部分文本设置格式
</span>
<iframe src="https://www.runoob.com/html/html-iframes.html" width="" height="" frameborder="0">定义一个内联框架</iframe>
</div>
<!--表单-->
<div>
<form action="url" method="get/post" enctype="text/plain">
<!--
accept HTML5 不支持。规定服务器接收到的文件的类型。(文件是通过文件上传提交的)
MIME_type
accept-charset 规定服务器可处理的表单数据字符集。
character_set
action 规定当提交表单时向何处发送表单数据。
URL
autocompleteNew 规定是否启用表单的自动完成功能。
on
off
enctype 规定在向服务器发送表单数据之前如何对其进行编码。(适用于 method="post" 的情况)
application/x-www-form-urlencoded
multipart/form-data
text/plain
method 规定用于发送表单数据的 HTTP 方法。
get
post
name 规定表单的名称。
text
novalidateNew 如果使用该属性,则提交表单时不进行验证。
novalidate
target 规定在何处打开
_blank
_self
_parent
_top
-->
姓名:<input type="text" name="name"><br>
<!--
accept 规定通过文件上传来提交的文件的类型。 (只针对type="file")
audio/* video/* image/* MIME_type
align HTML5已废弃,不赞成使用。规定图像输入的对齐方式。 (只针对type="image")
left
right
top
middle
bottom
alt 定义图像输入的替代文本。 (只针对type="image")
text
checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
checked
disabled disabled 属性规定应该禁用的 <input> 元素。
disabled
form 属性规定 <input> 元素所属的一个或多个表单
form_id form
formaction 属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
URL
formenctype 属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。
application/x-www-form-urlencoded
multipart/form-data text/plain
formmethodNew 定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")
get
post
formnovalidate formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
formnovalidate
formtarget framename 规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")
_blank
_self
_parent
_top
heightNew 规定 <input>元素的高度。(只针对type="image")
pixels
listNew
datalist_id
属性引用 <datalist> 元素,其中包含 <input> 元素的预定义选项。
max
number
date
属性规定 <input> 元素的最大值。
maxlength
number
属性规定 <input> 元素中允许的最大字符数。
min
number
date
属性规定 <input>元素的最小值。
multiple
multiple
属性规定允许用户输入到 <input> 元素的多个值。
name
text
name 属性规定 <input> 元素的名称。
pattern
regexp
pattern
属性规定用于验证 <input> 元素的值的正则表达式。
placeholder
text
placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。
readonly
readonly
readonly 属性规定输入字段是只读的。
required
required
属性规定必需在提交表单之前填写输入字段。
size
number
size 属性规定以字符数计的 <input> 元素的可见宽度。
src
URL
src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")
stepNew
number
step 属性规定 <input> 元素的合法数字间隔。
type type 属性规定要显示的 <input> 元素的类型。
button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
value 指定 <input> 元素 value 的值。
text
widthNew
pixels
width 属性规定 <input> 元素的宽度。 (只针对type="image")
-->
密码:<input type="password" name="password">
单选选项:<input type="radio" name="tip001">单选选项001
<input type="radio" name="tip002">单选选项002
点击选项也可以选中:<input id="001" type="radio" name="tip001"><label for="001">单选选项001</label>
<input id="002" type="radio" name="tip002"><label for="002">单选选项002</label>
多选选项:<input type="checkbox" name="tips001">多选选项001<input type="checkbox" name="tips001">多选选选项002
<select name="下拉选项">
<option value="下拉选项001">下拉选项001</option>
<option value="下拉选项002">下拉选项002</option>
</select>
<input type="reset" value="重置表单">
<input type="submit" value="提交表单">
<input type="button" value="新创建的按钮">
<button type="button" onclick="">按钮</button>
</form>
</div>
<!--颜色-->
<div>
<p style="background-color:#FFFF00">通过十六进制设置背景颜色</p>
<p style="background-color:rgb(255,255,0)">通过 rbg 值设置背景颜色</p>
<p style="background-color:rgb(0,0,0,0)">通过 rbg 值设置背景颜色,最后一位设置透明度</p>
<p style="background-color:yellow">通过颜色名设置背景颜色</p>
<!--
颜色值由十六进制来表示红、绿、蓝(RGB)。
每个颜色的最低值为 0(十六进制为 00),最高值为 255(十六进制为FF)。
十六进制值的写法为 # 号后跟三个或六个十六进制字符。
三位数表示法为:#RGB,转换为6位数表示为:#RRGGBB。
141个颜色名称是在HTML和CSS颜色规范定义的(17标准颜色,再加124)。
提示: 17标准颜色:黑色,蓝色,水,紫红色,灰色,绿色,石灰,栗色,海军,橄榄,橙,紫,红,白,银,蓝绿色,黄色。-->
</div>
</body>
</html>