美文网首页
HTML:标签

HTML:标签

作者: 打死你的小乌龟 | 来源:发表于2018-01-16 10:40 被阅读0次

Html标签与元素的关系:一个标签对构成一个元素

a) <html></html>:标签对,成对出现,<html>标志着html文件的开始,</html>文件的结束
b) <head></head>:标签对,代表html文件的头部
c) <body></body>:标签对,代表html文档的主体
d) <meta>:单标签,一般写在head里,可以用charset属性来设置网页的编码
e) <title></title>:标签对,一般写在head中,设置网页的标题

排版标签

1)<br />换行
2)<p></p> 段落标签 在开始和结束的位置上会留一个空行。
3)<hr /> 一条水平线
属性:
1)width:值像素 100px 可以写百分比 30%
2)align :对齐方式
3)size :粗细
4)color : red green blue RGB 三原色 (red green blue #aa55ff)
4)div 声明一块区域 <div>数据</div> css+div
5)span 声明一块区域

字体标签

1<font>文本内容</font>
属性:
1)size 字号的大小 最大值是7 最小值是1
2)color 颜色
3)face 字体

2标题标签

<h1></h1>
...
<h6></h6>从大到小字体缩小。

3<B></B>粗体
4<I></I>斜体
5<u></u>:下划线字体标签
6<em></em>:标签强调,强调的结果正好是倾斜
7<strong></strong>:表示强调,强调的结果是加粗
9:字体上标标签
10:字体下标标签

标签支持嵌套

列表标签
1)dl 列表标签

<dl>
<dt>上层项目</dt>
<dd>下层项目</dd>特点:自动对齐,自动缩进。
</dl>

2)有序列表和无序列表

有序:<ol>
type:列表前序标号
start:从第几个开始。

无序:<ul>
数据条目:
<li>数据内容</li>
<li>
<a href="后台的路径">用户管理</a>
</li>

图片标签

<img >
属性:
src="图片的路径"
width: 显示图片的宽度
height: 显示图片的高度
alt: 图片的说明文字(当图片加载失败时)
title:设置鼠标悬浮时的提示信息
width: 设置图片的宽度,单位是像素(px)
height: 设置图片的高度,单位是像素(px)

超链接

<a></a>
作用:1)链接资源
href="" 必须指定如果href的值不指定,默认是file文件的协议。

(如果href中指定的协议,浏览器不能解析,就会调用应用程序,可以解析的程序就可以打开。)

title:设置鼠标悬浮时的提示信息
target:规定在何处打开窗口
_blank:在一个新的窗口打开页面
_self :默认。在相同的框架中打开被链接文档。
_parent: 在父框架集中打开被链接文档。
_top: 在整个窗口中打开被链接文档。

定位资源
描点连接

注意:href中的值必须和name中的值一致

表格标签(重点)

<table></table> 声明一个表格
属性:
1)border 边框
2)width 宽度
4)cellspacing//设置单元格之间的间距(空间)
5)cellpadding//内容到单元格之间的距离
6)align//设置表格的水平对齐方式(left,right,center
7)bordercolor//设置表格的边框颜色
8)bgcolor//设置表格的背景颜色
9)background//设置表格的背景图片
<tr></tr> 行
属性:
1)align 对齐方式(文本内容)
<td></td>
属性:
1)width
2)height
3)colspan 列合并单元格
4)rowspan 行合并单元格
<th></th> 会加粗 并且会居中。
<caption> 表格的标题
valign: 规定表格相对周围元素的对齐方式, 它的取值有center、left、right
• 给table设置valign属性, 无效
• 给tr设置valign属性, 是让当前行中所有内容居上/居中/居下
• 给td设置valign属性,是让当前单元格中所有内容居上/居中/居下
• 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐
表格的结构
• thead标签:用来存放当前列的表头, 如果没有加css页面默认将表头中的高度设置变小
• tbody标签:一般用来存放页面中的主体数据, 如果不写会自动加上
tfoot标签:用来存放表格的页脚(脚注或表注), 如果没有加css页面默认将表头中的高度设置变小,

表单标签(重点)

作用:可以和服务器进行交互。输入项的内容 用户名 密码
<form></form>
属性:
action="提交的请求位置"
method 提交方式(get和post)如果method没有写默认是get方式提交。

get和post区别:

1)get方式表单封装的数据直接显示在url上。post方式数据不显示在url上。
2)get方式安全级别较低,post级别较高。
3)get方式数据的长度,post支持大数据。

<input />
属性:type 值可以指定很多的值,每一个不同的值代表的不同输入组件。
1)type=text 文本框
2)type=password 密码
3)type=radio 单选按钮
4)type=checkbox 多选按钮
单选和多选都有默认值:checked="checked"
5)type=reset 重置按钮
6)type=submit 提交按钮
7)type=file 上传文件的输入项
8)type=button 按钮
9)type=image 图片(也是提交按钮,)
10)type=hidden 隐藏标签(用户不用看到的,开发时必须要使用的可以把数据封装到隐藏标签中,和表单一起提交到后台)。

i. type:规定input控件的类型
ii. id:唯一标识此控件
iii. name:规定控件的名称
iv. value:设置控件的值
v. placeholder:设置控件的提示信息

i) 单选框:<input type=’radio’>
i. name必须设置为相同的值,才能实现单选
ii. checked//设置单选框选中
iii.若要实现点击文字选中单选框,必须把label中的for属性值设成和radio中的id值相同

控件中的属性
i.只读:readonly,只对input type=’text/password’或textarea起作用
ii.不可用:disabled,对form表单中的所有控件都起作用
iii.size:设置控件可输入字符的宽度,只对文本框及密码框起作用
iv. maxlength:规定输入字符的最大长度,只对文本框及密码框起作用

选择标签

<select></select>选择下拉

文本域textarea

<textarea>文本内容</textarea>

跑马灯

文字滚动效果:<marquee></marquee>
a) direction//设置滚动方向,值:right,left,up,down
b) behavior//设置滚动的方式
i. scroll//循环滚动(由一端滚向另一端,会重复)
ii. slide//只滚动一次
iii. alternate//在边框之间来回滚动
c)scrollamount//滚动的速度,单位是毫秒(1000ms=1s),单位越大,速度越快
d)scrolldelay//设置滚动的延时,单位是毫秒,值越大,延时(速度)越慢
e)onmousemove=‘this.stop()’//当鼠标移到目标时,停止滚动
f)onmouseout=’this.start()’//当鼠标移动目标时,开始滚动

框架标签

作用:
<frameset>
<frame>
</frameset>
框架标签不能写在<body>的内部。body不能写在frameset的上面。

lable标签
HTML字符实体:语法:以&符合,以;结尾

a) & lt;//小于号
b) & gt;//大于号
c) & amp;//&(和)
d) & nbsp;//空格
e) & copy;//版权
f) & reg;//商标
g) & quot;//"
h) & plusmn;//+-

thead:表格的表头
tbody:表格的主题
tfoot:表格的页脚
主要结合css,javaScript 来使用

colgroup:用来组合列它的span属性可以设定组合列的数目必须放在caption之后thead之前
<colgroup span="2" style="width : 150px"> </colgroup>
align:设置文字的水平对其方式(left,center,right)
valign:设置文字的垂直对齐方式(top,middle,botton)

meta其它类型
Keywords类型

• 作用: 告诉搜索引擎当前网页的关键词, 在SEO中非常重要, 能够提高搜索命中率, 让别人更容易找到你
• 格式: <meta name="keywords" content="IT前言技术、iOS技术、HTML5技术、Android技术" />

Descriiption类型

• 作用: 告诉搜索引擎当前网页的主要内容, 在SEO中非常重要,
• 格式: <meta name="description" content="HTML5技术、Android技术研究" />

Author类型

• 作用: 告诉搜索引擎当前网页的作业, install B专用
• 格式: <meta name="author" content="Jonathan_Lee" />

Refresh类型

• 作用: 告诉浏览器多久自动刷新一次页面并指向新页面, 常用于新老域名交替时, 访问老域名自动跳转到新域名, 或用语一些需要定时刷新的聊天室等.
• 格式: <meta http-equiv="Refresh" content="2;URL=http://www.baidu.com/">

Robots类型

• 作用: 告诉搜索引擎当前网页的作业, 写给网络爬虫看的内容
• 格式: <meta name="robots" content="all|none|index|follow|noindex|nofollow" />
○ index: 告诉搜索引擎允许抓取当前页面
○ noindex:告诉搜索引擎不允许抓取当前页面
○ follow: 告诉搜索引擎可以从当前页面上找到链接,然后继续访问抓取下去
○ nofollow:告诉搜索引擎不允许从当前页面上找到链接, 拒绝其继续访问
○ all: 告诉搜索引擎允许抓取当前页面, 并且允许从此页找到链接继续访问
○ none: 告诉搜索引擎不允许抓取这个页面,并且不允许从此页找到链接、拒绝其继续访问

常见组合

○ <META NAME="ROBOTS" CONTENT="INDEX,FOLLOW">:可以抓取本页,而且可以顺着本页继续索引别的链接
§ 有可以写成<META NAME="ROBOTS" CONTENT="ALL">
○ <META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">:不许抓取本页,但是可以顺着本页抓取索引别的链接
○ <META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW">:可以抓取本页,但是不许顺着本页抓取索引别的链接
○ <META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">:不许抓取本页,也不许顺着本页抓取索引别的链接。
○ 注意事项:
§ 不要把两个对立的反义词写到一起,

相关文章

  • Html 学习笔记

    HTML基础 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag) HTML 标签通...

  • HTML常用标签

    HTML标签:标记标签通常被称为HTML标签,HTML标签是HTML语言中最基本的单位,HTML标签是HTML最重...

  • 2018-06-04——HTML简介

    HTML 简介 HTML 标签 ·HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 ·HTML...

  • 02.html

    Html结构标准 Html标签分类 单标签 双标签 Html标签关系分类 包...

  • HTML 常用的标签

    什么是 HTML 标签 HTML 文档和 HTML 元素是通过 HTML 标签进行标记的 HTML 标签由开始标签...

  • HTML笔记

    html标签与html元素 html标签: 由开始标签和结束标签组成的一对标签。 html元素: 从开始标签到结束...

  • HTML

    HTML简介 HTML的基本结构 HTML标签 基本标签 布局标签

  • HTML常用标签介绍

    HTML标签:通常被称为HTML标签,HTML标签是HTML语言中最基本的单位,HTML标签是HTML最重要的组成...

  • HTML标签类型

    /*HTML标签类型 html /*HTML标签类型 1.块级标签:*1....

  • html标签

    html标签 超文本标记语言(外国语简称:HTML)标记标签通常被称为HTML标签,HTML标签是HTML语言中最...

网友评论

      本文标题:HTML:标签

      本文链接:https://www.haomeiwen.com/subject/mxtsoxtx.html