下面是一些常用的html的知识,经过搜集总结为了写爬虫做一些储备,喜欢大家喜欢。

HTML文本修饰标记

<b></b>:加粗bold。如:<b>HTML文件</b>
<i></i>:斜体italic。如:<i>HTML文本</i>
<u></u>:下划线underline。如:<u>HTML文本</u>
<s></s>:删除线strike。如:<s>删除线</s>
<sup></sup>上标。
<sub></sub>下标。
<font></font>字体标记
属性:Size:文本大小,取值1-7。1小,7大。Color:颜色值。Face:字体,楷体、黑体、宋体...

HTML排版标记

1.<p></p>表示一个段落。
常用属性:align:水平对齐方式,取值:left(左)、 center(居中)、 right(右)
举例:<p align="center">水平对齐方式居中对齐</p>
2.换行标记<br>
3.水平线标记(单边标记):<hr>
size:水平线的粗细,单位一般为px。
color:水平线的颜色。
width:水平线的宽度。
noshade:去掉水平线的阴影(在HTML中,noshade是没有值的属性)。如:<hr noshade>
4.<pre>预排版标记
功能:将保留所有的空白字符(空格、换行符),换句话说:就是原封不动输出。
语法:<pre>内容</pre>
5.标题标记:<h1>……<h6>
功能:定义各种标题。
属性:align水平对齐方式,取值:left、center、right。
语法:<h1  align = “left | center | right”></h1>
<div>和<span>标记
<div>是没有任何意义的标记,但是,又是使用最多的标记。<div>一般要与CSS配合使用。<div>是一个块元素。
<span>是没有任何意义的标记,但是,又是使用最多的标记。<span>要与CSS配合使用。<span>是行内元素。

(1)块元素

块元素,一般是单独占一行,不管内容多少,总是占一行。
块元素有哪些?<div>、<p>、<h1>、<h2>、<pre>等

(2)行内元素

行内元素,不会单独占一行。
行内元素的宽度,主要是根据内容决定。
多个行内元素,会排在同一行。
行内元素有哪些?<font>、<b>、<i>、<u>、<sub>、<sup>等

结论:在标记嵌套时,一般是块元素中嵌套行内元素。

HTML项目符号(无序列表)

<ul><li>内容1</li><li>内容2</li><li>内容3</li>
</ul><ul>或<li>的常用属性
type:项目符号的类型,取值:disc(小黑点)、circle(空心圆)、square(实心方块)

注意:在HTML标记中,内容应该放在最底层标记中。
注意:<ul>和<li>是块元素。
HTML编号列表(有序列表)

<ol><li>列表1</li><li>列表2</li><li>列表3</li>
</ol>
<ol>或<li>的常用属性
type:编号类型,取值:1、a、A、i、I
start:从第几个开始编号(数字)。
滚动字幕标记<marquee>
语法格式:<marquee>滚动的内容</marquee>
常用属性
Direction:滚动方向,取值:up、down、left、right
Width:滚动宽度
Height:滚动高度
bgColor:滚动背景色
scrollAmount:滚动步长值。值越大,滚动越快。
scrollDelay:两步之间的停留时间,以毫秒单位。1秒=1000毫秒。
loop:循环滚动的次数。
图片标记:行内元素,单边标记
语法格式:<img  属性 = “值”>

常用属性:

Width:图片宽度
Height:图片高度
Border:图片边框粗细。
Src:图片的路径(相对路径)
Align:图片的水平对齐方式,取值:left、center、right
Hspace:图片与左右文字之间的距离(水平距离)
Vspace:图片与上下文字之间的距离(垂直距离)。
  • 注意事项
    如果图片想等比例缩放,只需要指定width或height其中一个。
    Align属性只能让文本居中,不能让图片单独居中。
    Align可以实现“图文混排”效果。align = “left | right”
    要想让图片实现居中效果,可以给图片增加一个<div>元素
    超级链接:行内元素,<a>中不能再套<a>标记
    语法格式:<a 属性 = “值”>……</a>
    常用属性href:目标文件的地址URL,该URL可以是相对地址,也可以是绝对地址。target:目标文件的显示窗口。_blank:在新窗口中打开目标文件。_self:在当前窗口中打开目标文件(默认打开),相当于“替换”操作。_parent:在父级窗口来打开目标文件。_top:在最顶级窗口来打开目标文件。其中_parent、_top常用框架网页中name:定义锚点链接的名称
      锚点链接含义:锚点链接,是在一个网页的不同区域进行跳转。锚点理解为“定义记号”。定义锚点(作个记号):<a  name = “锚点名称”></a>锚点名称的命名规则:可以包含字母、数字、下划线,但只能以字母开头。注意:<a>和</a>之间没有内容,换句话说:这个记号不是让我们看的,而是给链接用的。例如:<a  name = “top2”></a>跳转到锚点(记号):语法:<a  href = “文件名#锚点名称”>……</a>文件名:可有可无。如果是同一个网页的不同部分跳转,不需要文件名;如果是跳到另一个网页的不同部分,这时必须要有文件名。注意:这里的<a>和</a>要有内容,否则,无法进行跳转。例如:<a  href = “#top2”>返回顶部</a>   //跳转到同一个网页的不同部分例如:<a  href= “news.html#bottom”>返回底部</a>  //跳转到news.html文件的底部

1、绝对地址URL
(1)远程的绝对地址
访问远程的文件,总是以“http://”域名、主机名开头。

(2)本地的绝对地址(很少使用)访问本地的绝对地址,是以file:///开头的绝对地址。

2、相对地址URL(项目中路径一般是相对路径)

  (1)当前文件和目标文件是同级关系,链接地址直接写目标文件名。(2)当前文件与目标文件所在的文件夹是同级关系,先找“文件夹名”,然后再找“文件名”。也就是,目标文件位于下一级。(3)目标文件位于上一层目录中,往上找对应的目录,再找目录中的文件。往上找,使用“../”符号表示。“../”代表上一级目录“../../”代表上两级目录

3、特殊的链接
1、下载链接
什么样的文件会出现下载提示?
反过来说,哪些文件网页可以直接执行?如:.jpg、.png、.gif、.html、.htm、.txt等。
大部分文件,浏览器是不能直接执行的。如:.doc、.xls、.ppt、.rar、.psd……

2、邮箱链接3、普通空链接(#)4、JS链接:添加JS功能代码
<meta>标记
<meta>的主要作用,是提供网页的元信息。比如:指定网页的搜索关键字。<meta>标记有两个属性:http-equid和name。

1.http-equiv属性

功能:模拟http协议文件头信息,当信息从服务器端传到客户端时,告诉浏览器如何正确的显示网页内容。http-equiv属性一般要与content属性配合使用。Content属性指定信息的详细参数。

(1)设置网页的字符集

<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />

(2)网页自动刷新

<meta http-equiv="refresh" content="2">   //每隔2秒钟,自动刷新网页一次
<meta http-equiv="refresh" content="2;url=http://www.ifeng.com">   //2秒钟后,跳转到凤凰网

2.name属性
name属性主要用于设置网页的搜索关键字、版权信息、作者等。

(1)设置网页搜索关键字

<meta name="keywords" content="网站建设,企业网站建设,网站制作,网上商城,网站推广,域名注册,中企动力" />

(2)设置网页描述信息

<meta name="description" content="网站建设、网站制作专家中企动力,为您提供专业的展示型网站建设、营销型网站建设、独立商城系统网站建设、并提供一体化的企业邮箱”>
表格标签(块元素)
1、表格的结构
<table><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr>
</table>

2、<table>属性

Width:表格宽度,单位可以是百分比,也可以是固定值。
Height:表格高度。
Align:表格水平对齐方式,取值:left、center、right
Border:边框粗细。
Bordercolor:边框颜色。
bgColor:表格背景色。
background:背景图片URL。
cellpadding:单元格边线到内容间的距离(填充距离)
cellspacing:单元格与单元格之间的距离(间距)
rules:合并单元格边框线,取值:all
注意:rules兼容性不好,请使用CSS来取代它。
<table border="5" width="500" height="130" bordercolor="blue" bgColor="#99cc33" background="images/200.gif" align="center" cellspacing="0" rules="all">

3、<tr>属性——行标记

bgColor:行的背景色
height:行的高度
align:行中的文本水平居中,取值:left、center、right
valign:垂直居中,取值:top(上)、middle(中)、 bottom(下)

4、<td>或<th>属性

    <td>是普通单元格,<th>是标题单元各,居中加粗显示。
width:单元格宽度
height:单元格高度
bgColor:单元格背景色
background:单元格背景图片
align:水平对齐
valign:垂直水齐
rowspan:上下单元格合并。合并属性必须放在第一个单元格中。
colspan:左右单元格合并。合并时,有增就得有减,要保证每一行单元格的个数不变。

表单
1、表单的概念
表单主要用来获取客户端用户数据(信息)的。如:注册表单、查询表单、登录表单等。

2、表单的工作原理
浏览有表单的网页,填写一些必要的信息,然后点击某个按钮进行提交。
这些表单数据,通过互联网,传递到了服务器上。
服务器上有专门的程序,对表单数据进行验证。如果验证成功,将你的数据存入数据库(MySQL),则返回一个验证成功的信息。如果验证失败,将返回一个错误信息。
从上面表单的工作原来看:表单的制作分两个部分,一是前台页面的制作,二是后台PHP对表单数据的处理。

3、表单的结构

<form>标记属性——块元素
name:给表单起个名字。这个名字主要给JavaScript来用。JS主要用来做客户端表单验证。
method:表单的提交方式,取值:get或post。
action:指定表单的处理程序,一般是PHP文件。
如果action为空,那么表单数据发到哪里去了?
结果:那么表单数据提交给了它自己来处理。
enctype:指定表单数据的编码方式(解密方式)。这个属性只能用在 method = “post” 的情况下。
application/x-www-form-urldecoded  //默认的加密方式
multipart/form-data  //如果你上传文件,该值必须它自己。
单行文本域
语法格式:<input  type = “text” 属性 = “值” />
常用属性
name:文本框的名字。命名规则是:可以包含字母、数字、下划线,只能以字母开头。
type:表单元素的类型。
value:文本框中的值。
size:文本框的长度,以“字符”为单位。
maxLength:最多可以输入多少个字符,超出的就输不进去了。
readonly:只读属性。可以选中,但不能修改。如:readonly = “readonly”
disabled:禁用属性。不能选中,不能修改。如: disabled = “disabled”
举例说明:<input type="text" name="username" />
单行密码域
语法格式:<input  type = “password” 属性 = “值”  />
常用属性
name:密码框的名字。命名规则是:可以包含字母、数字、下划线,只能以字母开头。
type:表单元素的类型。
value:元素中的值。
size:元素的长度,以“字符”为单位。
maxLength:最多可以输入多少个字符,超出的就输不进去了。
readonly:只读属性。可以选中,但不能修改。如:readonly = “readonly”
disabled:禁用属性。不能选中,不能修改。如: disabled = “disabled”
单选按钮
语法格式:<input  type = “radio”  属性 = “值”  />
常用属性
Name:元素的名称
Value:元素的值,该value中数据将发往服务器。
Checked:默认选择哪一项。如:checked = “checked”

注意:一组单选按钮,只能选择一个,但name的值必须一致。如:name = “sex”
单选按钮用户自己不能输入内容,用户只能选择,因此必须为它指默认值value。
复选框

语法格式:<input  type = “checkbox”  属性 = “值”  />
常用属性
Name:元素的名称
Value:元素的值
Checked:默认选中。如:checked = “checked”注意:复选框也是一组选项,因此name的值必须一致。在PHP中,使用数组来获取多个同名的name的值。复选框可以同时选多个,也可以一个都不选。
下拉列表
<select  name = “city”><option  value = “北京市”>北京市</option><option  value = “天津市”>天津市</option><option  value = “重庆市”>重庆市</option>
</select>
<select>标记的属性,只有一个name属性
<option>标记的属性有两个:value属性、selected属性
Selected:默认选中。如:selected = “selected”
文本区域
语法格式:<textarea  name = “名称”  cols = “宽度”  rows = “高度”></textarea>
常用属性
name:元素名称
cols:宽度,是指多少个字符宽。
Rows:高度,是指几行高。
提示:<textarea>和</textarea>之间是默认文本
各种按钮
提交按钮:<input type="submit" value="提交表单" />
重置按钮:<input type="reset" value="重新填写" />
图片按钮:<input type="image" src="data:images/btn02.png" />   //功能就是提交表单,与submit按钮功能一样
普通按钮:<input type="button" onclick="javascript:window.close()" value="关闭窗口" />
普通按钮本身是不具备任何功能的,一般要与JS程序配合使用,实现相应的功能。
隐藏域
功能:隐藏域就是看不见的一个框。传递一些值,而这个值又不想让别人看见。
用处:主要用于PHP后面程序,如:修改某一条新闻内容时,需要传递一个新闻的id号。
语法格式:<input  type = “hidden”  name = “名称”  value = “默认值”  />
上传文件域
语法格式:<input  type = “file”  属性 = “属性”  />
常用属性
name:表单元素的名称
value:表单元素的值,这个值其实就是上传的文件名。value属性是只读属性,这个value的内容只能来自手动选择上传的文件,而不能用户自己指定一个路径。为了安全起见,value是只读的。
注意:现在只能实现上传文件框,而不能真正实现上传功能,上传功能用PHP来实现的。
表格标题
语法格式:<caption></caption>
提示:<caption>标记是<table>的子标记。<caption>放在<table>开始标记之后。
图片热点(图像地图)图像热点:给一张图片加多个链接,默认情况下,一张图只能加一个链接。

1、标记结构:

<img  src = “images/01.jpg”  usemap = “#Map”  />
<map  id = “Map”  name = “Map”><area  shape = “热区形状”  coords = “热区坐标”  href = “链接地址”  /><area  shape = “热区形状”  coords = “热区坐标”  href = “链接地址”  /><area  shape = “热区形状”  coords = “热区坐标”  href = “链接地址”  />
</map>

2、<area>标记的常用属性

Shape:热区的形状,取值:rect(矩形)、circle(圆形)、polygon(多边形)
Coords:执区的坐标(位置)
如果 shape = rect 时,那么,coords = “x1,y1,x2,y2” 例如:coords = “50,50,200,150”
(x1,y1)为矩形左上角的坐标值,(x2,y2)为矩形右下角的坐标值
如果 shape = circle 时,那么, coords = “x,y,r” ,其中(x,y)为圆心坐标,r为半径
`

以上是一部分总结,后续根据需要还会更新。

那些常用的HTML标签相关推荐

  1. 08常用的模板标签和过滤器

    技术交流QQ群:1027579432,欢迎你的加入! 本教程来源于B站杨仕航Django2.0开发视频教程,如需转载,必须注明来源! 1.继续搭建blog [外链图片转存失败,源站可能有防盗链机制,建 ...

  2. html5常用的属性标签,HTML5常用标签及其属性设置

    一.Html5的基本结构 网页的内容 二.head标签内常用标签 1.meta标签:设置元数据信息(metadata),用来描述HTML文档的信息,为网页提供用户不可见的信息.常用属性: ⑴chars ...

  3. 我的javaweb学习之旅--html常用块级标签

    html常用块级标签 常用的有p,h1~h6,div,ul 等 1.h1~h6 <body> <h1></h1>   一级标题 ...... <h6>& ...

  4. 常用HTML标签元素介绍,常用的HTML标签元素总结简介

    给大家收集整理了一些最常用的HTML标签元素,有需要的朋友可以保存一下,这些都是最常用的,几乎每一份网页都用得到的标签.标签是提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的 ...

  5. 【django】三、常用的模板标签和过滤器

    文章目录 添加跳转方法 前端页面 访问某个博客url设置 访问主页url设置 添加博客总数的显示 判断为空,添加一条提示 长博客显示限制 过滤时间,添加显示字段 博客类跳转到标签的功能 常用的模板标签 ...

  6. 【融职培训】Web前端学习 第2章 网页重构2 常用的html标签

    一.HTML语法 上一节我们已经了解了html和css的基本概念,本节通过上一节的一个例子来说说HTML的语法. 1 <!DOCTYPE html> <!-- 文档声明 --> ...

  7. 常用Java注释标签(Java comment tags)

    常用Java注释标签(Java comment tags) @author  作者 适用范围:文件.类.方法 (*多个作者使用多个@author标签标识,java doc中显示按输入时间顺序罗列.) ...

  8. JSP页面中常用四种标签

    JSP页面常用四种标签: 1. EL表达式:  ${} 2. jstl表达式(sun apache): <%@ taglib prefix="c" uri="htt ...

  9. HTML常用的一些标签(推荐)

    HTML常用的一些标签(推荐) 前言 HTML常用标签及内部属性的使用 1.基础标签 2.格式标签 3.链接标签 < a > 标签 < link >标签 4.图像标签 < ...

  10. 织梦二次开发常用到的标签【特别实用必收藏】

    1:基本的标题调用 首页 <TITLE>{dede:global.cfg_webname/}</TITLE> <meta name="keywords" ...

最新文章

  1. HDU 1080 Human Gene Functions
  2. MYSQL 获取当前日期及日期格式以及非空处理
  3. 静态网站任何优化怎么设置_网站关键词怎么设置对网站推广优化有利?
  4. FreeSql (十)更新数据
  5. php 获取域名部分,PHP 获取顶级域名 获取域名的函数 parseHost()
  6. phpexcel的使用方法详细介绍
  7. python函数可变参数_python中函数的可变参数
  8. java list 取几个字段组装成map_java.util.concurrent 并发包诸类概览
  9. leetcode LRUCache题目
  10. 制造爆款:建立“增长团队”
  11. java.lang.VerifyError: Expecting a stack map frame
  12. 知道世界越大,就会觉得你越小
  13. 智慧解析第19集:老子开导你
  14. AS3程序性能优化建议
  15. sinx加expx定积分计算c语言,写一个定积分的通用函数,分别求sinx,cosx,e^x.
  16. 峥果智能连接不到服务器,峥果浴霸 ESP8285版本 固件
  17. office软件不显示图标
  18. cocos ClippingNode 之绘制六边形战力(一)
  19. 【飞桨PaddlePaddle】四天搞懂生成对抗网络(四)——CycleGAN的绝妙设计:双向循环生成的结构
  20. 抖音浏览量的作用是什么?

热门文章

  1. ROS学习-8 自定义动作编程的大坑
  2. python2和python3如何共存_Windows上python2和python3共存
  3. ViewPager和Fragment的嵌套使用
  4. 日通国际搬家公司、专业包装材料进行打包、运输、整理、归类;
  5. WordPress网站(搬迁)搬家教程
  6. 中国农业机器人行业市场供需与战略研究报告
  7. Emacs进阶之eww浏览器
  8. Visual Studio 2019 设置透明背景图(傻瓜式教学)
  9. 为了忘却的纪念(0)
  10. 药品计算机系统培训试题,新版GSP培训试题及答案