• 基本
<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. 洛谷 P1233 木棍加工 解题报告

    P1233 木棍加工 题目描述 一堆木头棍子共有n根,每根棍子的长度和宽度都是已知的.棍子可以被一台机器一个接一个地加工.机器处理一根棍子之前需要准备时间.准备时间是这样定义的: 第一根棍子的准备时间 ...

  2. POJ.2251 Dungeon Master （三维BFS）

    POJ.2251 Dungeon Master (三维BFS) 题意分析 你被困在一个3D地牢中且继续寻找最短路径逃生.地牢由立方体单位构成,立方体中不定会充满岩石.向上下前后左右移动一个单位需要一分 ...

  3. Ubuntu 使用Compiz配置炫酷3D桌面

    先看一下效果 要实现这种3D 的效果其实很简单. Step 1:安装N卡驱动工具 sudo apt- 这个东西其实没有太大的作用. Step 2:安装Compiz sudo apt-get insta ...

  4. php 修改图片分辨率

    <?php function resize_image($file, $w, $h, $crop=FALSE) { list($width, $height) = getimagesize($f ...

  5. isNaN与parseInt/parseFloat

    isNaN 返回一个 Boolean 值,指明提供的值是否是保留值 NaN (不是数字). NaN 即 Not a Number isNaN(numValue) 必选项 numvalue 参数为要检查 ...

  6. springsecurity 表达式一览

    表达式 描述 hasRole([role]) 当前用户是否拥有指定角色. hasAnyRole([role1,role2]) 多个角色是一个以逗号进行分隔的字符串.如果当前用户拥有指定角色中的任意一个 ...

  7. C# 遍历枚举

    C#中,如何获取(遍历)枚举中所有的值: public enum Suits { Spades, Hearts, Clubs, Diamonds, NumSuits } private static ...

  8. bzoj3524/2223 [Poi2014]Couriers

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=3524 http://www.lydsy.com/JudgeOnline/problem.ph ...

  9. 阿里云 配置FTP 无法连接问题，2017年7月后

    被阿里云坑飞,2017年7月上线的安全组,我压根不知道 新服务器 配置防火墙后怎么也不起作用,也暂时关不了防火墙 iptables stop #无效 搞了半天 才知道TM  不需要在linx服务器上自 ...

  10. React Native 与 夜神模拟器的绑定

    之前一直用真机去调试, 每回更新一次都需要手动摇晃手机后才能reload JS, OMG,太麻烦了. 后来寻思模拟器网上推荐用Geny...什么的模拟器,但是那个模拟器还需要VBox一起用. 有点麻烦 ...