• 基本
<html>…</html>      定义 HTML 文档
<head>…</head> 文档的信息
<meta> HTML 文档的元信息
<title>…</title> 文档的标题
<link> 文档与外部资源的关系
<style>…</style> 文档的样式信息
<body>…</body> 可见的页面内容
<!--…--> 注释
  • <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="网站建设、网站制作专家中企动力,为您提供专业的展示型网站建设、营销型网站建设、独立商城系统网站建设、并提供一体化的企业邮箱”>
  • 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.标题标记:<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:从第几个开始编号(数字)。
  • 图片标记:行内元素,单边标记
语法格式:<img  属性 = “值”>

常用属性:
Width:图片宽度
Height:图片高度
Border:图片边框粗细。
Src:图片的路径(相对路径)
Align:图片的水平对齐方式,取值:left、center、right
Hspace:图片与左右文字之间的距离(水平距离)
Vspace:图片与上下文字之间的距离(垂直距离)。 - 注意事项
如果图片想等比例缩放,只需要指定width或height其中一个。
Align属性只能让文本居中,不能让图片单独居中。
Align可以实现“图文混排”效果。align = “left | right”
要想让图片实现居中效果,可以给图片增加一个<div>元素
  • 表单
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 //如果你上传文件,该值必须它自己。

HTML常用标签及其属性的更多相关文章

  1. HTML初学者常用标签及属性

    1.HTML5头部结构   [DOCTYPE html] 声明文档类型为HTML5文件. 文档声明在HTML5文档必不可少,且必须放在文档的第一行.   [meta标签] 1-charset属性:单独 ...

  2. HTML之常用标签及属性

    标签 标签分类 标签名 英文 英文含义 标签类型 备注 HTML页面结构 < html> HyperText Markup Language 超文本标记语言 < head> h ...

  3. HTML常用标签及属性

    标签格式 格式: 双边:<标签名 属性1="值1" 属性2='值2' 属性3=值3>内容</标签名> 单边:<标签名 属性1="值1&quo ...

  4. html常用标签及属性,常用英语单词

    目录 html常用标签 html常用标签属性 前端常用英语单词表(未完待续) 欢迎评论点赞交流,转发请添加原博客连接谢谢! Ctrl键+F 可以查找你想要的内容哦! html常用标签 htmi结构 & ...

  5. Web前端——Html常用标签及属性

    html 常用的标题等标签就不记录了,只记录一下比较少见的标签以及属性 表格 table td 单元格 tr 表的行 th 表头 td或th可以下面的两个属性达到跨行或跨列 表格跨行 rowspan ...

  6. css常用标签及属性

    css样式表常用的形式有三种,一.行内样式表.二.内部样式表.三.外部样式表 一. <p style="color:red;">nice to meet you< ...

  7. html中一些常用标签及属性

    html中标签分为块级标签和行级标签 块级标签常用的有 <div> <p> <h1><hr><pre><table><ul ...

  8. 4.HTML 常用标签及属性

    1. 链接 标签: <a></a> 属性: href:链接地址 target:打开方式 _blank:新标签页打开 _self:当前页面打开(默认) title:链接提示 2. ...

  9. HTML常用标签和属性大全

    html标签< <marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑 ...

  10. Html 常用标签及属性

    <html>…</html>      定义 HTML 文档<head>…</head>   文档的信息<meta>             ...

随机推荐

  1. open_basedir restriction in effect的错误及其解决办法

    问题是出现在了PHP.INI上面了   原因是php.ini里设置了     opendir=/var/web/w0895/:/tmp:/usr/lib/php  解答: 其实open_basedir ...

  2. centos上部署git

    安装Git #安装依赖环境 [root@wys01 wys]# yum install curl-devel expat-devel gettext-devel openssl-devel zlib- ...

  3. Google Cast和ChromeCast

    Google Cast类似于DLNA,AirPlayer,Miracast,就是一种投屏技术.我们ATV产品是对Google Cast和ChromeCast都是支持的. Google Cast 大致工 ...

  4. codeforces 691F 暴力

    传送门:https://codeforces.com/contest/691/problem/F 题意:给你n个数和q次询问,每次询问问你有多少对ai,aj满足ai*aj>=q[i],注意 a* ...

  5. fisher's exact test

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录视频) https://study.163.com/course/introduction.htm?courseId=1005269003&u ...

  6. Linux下UDP一发一收通信

    实现在Linux环境下的UDP通信测试. 注释了while循环,将代码规范化. udpserver.c代码: /******************************************** ...

  7. [LeetCode] Matrix 值修改系列,例题 Surrounded Regions,Set Matrix Zeroes

    引言 Matrix内部的值修改严格来讲放在一个系列里不大合适,因为对于不同的问题,所用的算法和技巧可能完全不同,权且这样归类,以后需要时再拆分吧. 例题 1 Given a 2D board cont ...

  8. docker操作mysql

    Docker操作mysql 查找docker hub上的mysql镜像 Docker search.mysql 拉取官方的镜像标签为5.6 Docker pull mysql:5.6 在本地镜像列表里 ...

  9. Jquery中find与each方法使用详解

    本文实例讲述了jQuery中find与each方法用法.分享给大家供大家参考.具体如下: 一.find()方法 jquery选择器非常强大,利用css的命名规约,可以更快更方便的找出想要的元素. 图解 ...

  10. NOIP模拟赛14

    期望得分:0+100+100=200 实际得分:0+100+100=200 T1 [Ahoi2009]fly 飞行棋 http://www.lydsy.com/JudgeOnline/problem. ...