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>

定义上标

<!--字符实体

显示结果        描述        实体名称        实体编号

         空格        &nbsp;        &#160;

<        小于号        &lt;        &#60;

>        大于号        &gt;        &#62;

&        和号        &amp;        &#38;

"        引号        &quot;        &#34;

'        撇号         &apos; (IE不支持)        &#39;

¢        分        &cent;        &#162;

£        镑        &pound;        &#163;

¥        人民币/日元        &yen;        &#165;

€        欧元        &euro;        &#8364;

§        小节        &sect;        &#167;

©        版权        &copy;        &#169;

®        注册商标        &reg;        &#174;

™        商标        &trade;        &#8482;

×        乘号        &times;        &#215;

÷        除号        &divide;        &#247;

-->

</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>

01-09 17:49
查看更多