HTML（5）基础

1、html常用标签

<pre>...</pre>：标识预定义文本
<a>是anchor的缩写，<a>标签定义锚点和超链接，<a>常与href属性连用表示超链接连接地址并用target来表示打开文档的方法：_blank表示在新窗口中打开、_parent表示在父窗口中打开、_self表示在当前窗口中打开文档， _top表示在顶层窗口中打开文档
em表示小强调，以斜体显示；strong为着重强调，以粗体显示
abbr表示简称如dfn表示Definesa Definition Term;samp是Sample；acronym表示首字母缩写如CSS是Cascading Style Sheets的缩写

2、字符格式标签：

<b>...</b>：标识强调文本，以加粗效果显示。
<i>...</i>：标识引用文本，以斜体效果显示。
<blink>...</blink>：标识闪烁文本，以闪烁效果显示。IE浏览器不支持该标签。
<big>...</big>：标识放大文本，以放大效果显示。
<small>...</small>：标识缩小文本，以缩小效果显示。
<sup>...</sup>：标识上标文本，以上标效果显示。
<sub>...</sub>：标识下标文本，以下标效果显示。
<cite>...</cite>：标识引用文本，以引用效果显示。

3、xhtml即可扩展标记语言

在文档开头必须定义文档类型
在根元素中应声明命名空间，如<html xmlns="http://www.w3.org/1999/xhtml">
所有标签必须闭合
所有元素和属性必须必须小写
所有属性必须使用“”括起来
所有属性必须被赋值
所有特殊符号必须都要用编码表示"<"用"<"表示，">"用">"表示
不要在注释中使用"--"标记
废除name属性统一使用ID属性

4、meta标记表示网页的相关信息即网页元信息

  <meta name="discription" content="标准网页设计专业技术资讯"/>

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

  <meta http-equiv="content-language" content="zh-CN"/>

  <meta http-equiv="refresh" content="5;url="http://www.css8.cn/"/>

  <meta http-equiv="pragma" content="no-cache"/>

5、一般一个网页只有一个一级标题。h1、h2和h3元素比较常用，h4元素偶尔使用，h5和h6元素基本上不被使用

6、引用blockquote、cite和q

blockquote常用来作大段引用，一般不直接包含内容，引用的内容必须包含在一个元素中，可以与cite联合使用，此时，cite属性指定引文的地址
q元素可直接包含引文内容，显示效果为外加“”
cite也可与q元素通用，但不能与<span>元素同用，显示效果为斜体

<cite title="转载地址">http://article.hongxiu.com/a/2007-1-26/1674332.shtml </cite>

7、address表示地址、签名、作者和文档摘要

  <address title="作者">张三</address>

  <address title="详细地址">中国北京</address>

  <address title="文章摘要">HTML元素的语义特征及其表现</address>

8、列表应该是同类、同型或同质信息的排列和组合

9、table属性summary属性表示表格摘要，不会显示，仅是为语音合成，非视觉浏览器或机器定义的。

<!--表格分组-->
<colgroup>
    <col span="3" />
    <col span="3" />
    <col span="3" />
    <col span="3" />
</colgroup>   
<thead>

        <tr>

            <td rowspan="2">排名</td>

            <td rowspan="2">校名</td>

            <td rowspan="2">总得分</td>

            <td colspan="3">人才培养</td>

            <td scope="col" colspan="3">科学研究</td>

            <td scope="col" colspan="2" rowspan="2">分省排名</td>

            <td rowspan="2">学校类型</td>

        </tr>

        <tr>

            <td>得分</td>

            <td>研究生培养</td>

            <td>本科生培养</td>

            <td>得分</td>

            <td>自然科学研究</td>

            <td>社会科学研究</td>

        </tr>

    </thead>

10、form元素

enctype是Encase Type（包装类型）的简称
enctype="application/x-www-form-urlencoded"：将表单中的数据编码为名/值对的形式通过URL字符串的形式发送给服务器
enctype="multipart/form-data"：将表单中的数据编码为一条消息，每个表单域对应消息中的一个部分，然后通过http方式发送到服务器，使用这种方式一般常用来传递二进制信息，例如，使用表单进行文件上传、提交图像等。
enctype="text/plain"：将表单中的数据以纯文本的形式进行编码，其中不含任何空间（即表单域的名称）的格式字符。这种方法一般很少使用，也不建议使用。
get和post传递方法：get以ADCII字符通过URL地址栏传递，不够安全，且受地址栏长度的影响，传输数据量有限；post方法则没有字符集和容量大小的限制，且比较安全。

11、input元素

复选框包括value属性和checked属性，value属性设置复选框的传递值，checked属性设置默认选中状态
单选按钮多个name属性值必须相同，因为单选按钮实质上仅是一个开关，只有两个值，true和false，服务器仅把单选按钮的值作为一个逻辑值来处理
type="file"当表单域包含file域时，必须设置method属性为post且enctype="multipart/form-data"，否则提交操作将失败
type="image"图像按钮，它是普通按钮的自定义样式。src指定图像URL，该按钮没有动作，需要通过脚本形式为其定义操作的动作
type="button"普通按钮，没有动作，需要通过脚本为其定义动作

12、表单分组：legend元素必须包含在fieldset元素内部，且紧邻fieldset元素。

<form action="action.asp" name="register" id="login">

    <fieldset>

    <legend>基本信息（必填）</legend>

    <ul>

        <li>用户名<input id="" maxlength="12" size="30" name="username" />

            <span>注册用户名长度限制为3～12字节</span></li>

        <li>论坛密码<input type="password" maxlength="16" size="30" value="" name="psw" /></li>

    </ul>

    </fieldset>

    <fieldset>

    <legend>参考资料（选填）</legend>

    <ul>

        <li>个人网址<input maxlength="80" size="44" name="homepage" /></li>

        <li>QQ号码<input maxlength="20" size="44" name="OICQ" />

            <span>填写您的QQ号码，方便与他人的联系 </span></li>

    </ul>

    </fieldset>

    <p><input name="" type="submit" value="提交"  /></p>

</form>

13、绑定标签和定义键盘属性

        <li>

            <label for="username">用户名</label>

            <input  type="text" id="username" name="username" accesskey="a" tabindex="2"/>

            <span>注册用户名长度限制为3～12字节</span></li>

        <li>

14、select选项分区

<form action="action.asp" name="register" id="login">

    <p>

        <select name="">

            <optgroup label="数字">

            <option value="1">1</option>

            <option value="2">2</option>

            </optgroup>

            <optgroup label="字母">

            <option value="a">a</option>

            <option value="b">b</option>

            </optgroup>

        </select>

        <input name="" type="submit" value="提交"  />

    </p>

</form>

15、元素显示类型

块状显示
- 第一：块状元素默认宽度都是100%，即块状元素会挤满一行显示
- 第二：块状元素的头尾都会隐藏一个换行符，即块状元素前面和后面都不能再有其它块状元素和行内元素，也就是每个块状元素都单独在新行显示
行内显示
- 第一：行内元素没有高度和宽度，即使为它定义高度，浏览器也不会解析
- 第二：行内元素的呈现效果与块状元素存在很大差异，这不仅仅体现在宽度和高度方面，它们可以并列显示，随行移动
行内块状显示
- 行内块状显示是行内显示和块状显示的结合，拥有各自优势，但必须通过CSS样式申明，即元素不会默认显示为行内块状元素
表格显示和列表显示都是一种有其自身特点的块状元素

16、块状元素

html、body、form、fieldset、legend、div、p、h1~h6、ol、ul、ol、dl、dt、dd、menu、col、colgroup、pre、address、blockquote、hr、title

行内元素

span、a、area、img、abbr、acronym、b、bdo、big、cite、code、del、dfn、em、font、i、ins、kbd、q、s、samp、small、sub、sup、tt、u、var、strong、button、select、textarea、label、object、caption、noscript

标头区域隐藏元素

head、base、basefont、link、meta、script、style

行内块状元素

input、optgroup、option

列表项元素

结构内隐藏元素

map、param、br

表格系列类型元素

table、th、tr、caption、summary、tbody、thead、tfoot、td

17、结构嵌套规则

元素名称必须小写
块状元素可以包含行内元素，但是行内元素不能包含块状元素，只有ins和des两个特殊的行内元素可以包含块状元素或行内元素
scrpt元素既能包含在head元素中也能包含在body元素中，而style元素只能包含在head元素中
p和h1~h6可以直接包含行内元素和纯文本内容而不能直接包含块状元素，但可以间接包含块状元素
ul和ol只能直接包含li元素，但是li元素可以包含任何其它元素
dl只能直接包含dt和dd元素，但dt元素只能包含行内元素，不能包含任何块状元素，而dd元素可以包含任何元素
form只能直接包含块状元素，input是行内元素，因此form不能直接包含input元素
caption只能包含行内元素，而th和td能包含任何元素

18、局部结构的设计中尽量避免使用ID

第一：局部结构一般多使用语义性标签，定义ID意义不打
第二：局部结构可能会出现很多重复的结构，定义ID容易引发冲突
第三：如果要控制局部结构的样式，可以使用包含选择符来精确控制文档结构

19、HTML5语法是为了保证和之前的html语法达到最大程度的兼容而设计的。

文档类型声明统一定义为<!doctype html>
meta元信息可以简化为<meta charset="utf-8"/>

可以省略标记的元素
- 第一：不允许写结束标记的元素有area、base、br、col、command、embed、hr、img、input、keygen、link、param、source、track、wbr
- 第二：可以省略结束标记的元素有li、dd、dt、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th
- 第三：可以省略全部标记的元素有html、head、body、colgroup、tbody
具有布尔值的属性
<input type="checkbox" checked>  <input type="checked">  <input type="checkbox" checked="checked">  <input type="checkbox" checked="">

省略引号<input type="text"> <input type=text> <input type="“>

20、html5把元素分为六大类

内嵌：在文档中添加其它类型的内容，如audio、video、canvas、和iframe等
流：在文档和引用的body中使用的元素，如form、p和div等
标题：段落标题，如h1、h2和hgroup等
交互：与用户交互的内容，如音频和视频的控件、button和textarea等
元素据：通常出现在页面的head中，设置页面其它部分的表现和行为，如script、style和title等
短语：文本和文本结束标记，如mark、kbd、sub和sup等

21、div、section和article

div元素关注结构的独立性，常作为一个容器布局大块。
article元素代表文档、页面或者应用程序中独立完整的可以被外部引用的内容。
section元素用于对网站或者应用程序中页面上的内容进行分块。通常section元素用于对那些有标题的内容进行分段
article可以看做特殊的section，article元素更强调独立性、完整性，section更强调相关性。而section元素关注内容的独立性，section元素包含的内容可以单独存储在数据库中或输出到word文档中。

22、nav和aside

nav元素是一个可以用作页面导航的连接组。并不是所有的连接组都要放进nav元素，只需要将主要的、基本的连接组放进nav元素即可。
aside元素用来表示当前页面或文章的附属信息部分。

不要为没有标题的内容使用section元素，但是nav元素和aside元素没有标题是合理的。

HTML（5）基础的更多相关文章

java基础集合经典训练题
第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...
node-webkit 环境搭建与基础demo
首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法下载windows x64版本下载之后解压,得到以下东西为了方便,我们直接在这个目录中 ...
js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
Golang，以17个简短代码片段，切底弄懂 channel 基础
(原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...
[C#] C# 基础回顾 - 匿名方法
C# 基础回顾 - 匿名方法目录简介匿名方法的参数使用范围委托示例简介在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...
HTTPS 互联网世界的安全基础
近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...
Swift与C#的基础语法比较
背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...
.NetCore MVC中的路由（1）路由配置基础
.NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...
.NET基础拾遗（5）多线程开发基础
Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理基础 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开 ...
.NET 基础一步步一幕幕[面向对象之方法、方法的重载、方法的重写、方法的递归]
方法.方法的重载.方法的重写.方法的递归方法: 将一堆代码进行重用的一种机制. 语法: [访问修饰符] 返回类型 <方法名>(参数列表){ 方法主体: } 返回值类型:如果不需要写返回值 ...

随机推荐

在express3里用ejs模版引擎时，如何使其支持'.html'后缀
①express 默认jade模板,改为ejs模板,需执行以下命令: express -e --ejs ②在app.js中,将 app.set('view engine', 'jade'); 替换为 ...
C#使用七牛云存储上传下载文件、自定义回调
项目需要将音视频文件上传服务器,考虑并发要求高,通过七牛来实现. 做了一个简易的压力测试,同时上传多个文件,七牛自己应该有队列处理并发请求,我无论同时提交多少个文件,七牛是批量一个个排队处理了. 一个 ...
Linux的mv 命令
mv 命令的10个例子 1.移动文件移动文件时需要注意的是文件的源地址和目标地址必须不同.这里有个例子,想要将file_1.txt文件从当前目录移动到其它目录,以/home/pungki/为例,语法 ...
IntelliJ IDEA导入多个eclipse项目到同一个workspace下
IntelliJ IDEA 与eclipse在新建项目上工作区的叫法略有不同,区别见下图. 我们在eclipse都是在新建的workspace目录下新建我们的项目,但是在IDEA中没有workspac ...
【Canal源码分析】配置项
本文讲解canal中的一些配置含义. 一.配置加载图二.配置文件canal.properties 2.1 common参数定义比如可以将instance.properties的公用参数,抽取放置到 ...
.NET平台常用框架
分布式缓存框架: Microsoft Velocity:微软自家分布式缓存服务框架. Memcahed:一套分布式的高速缓存系统,目前被许多网站使用以提升网站的访问速度. Redis:是一个高性能的K ...
编程珠玑第一章的算法,Java实现,通俗易懂
该算法也就是所谓的位图算法,用一个int表示32位,也就是实际值为1~32的数. 按照书里说的, 该算法只适合内存有限,而磁盘和时间不限,且数字在1~MAX之间不重复的排序. package demo ...
Quarz.net 设置任务并行和任务串行
如何设置Quarz.net某个任务完成后再继续执行该任务? Quarz.net 的任务有并行和串行两种: 并行:一个定时任务,当执行时间到了的时候,立刻执行此任务,不管当前这个任务是否在执行中: 串 ...
mpvue小程序图片404
mpvue开发小程序时候,要添加静态本地图片 <img src="../../images/bg.png" alt=""> 会报错: VM14878 ...
wordpress添加面包屑
第一步:在functions.php中添加如下代码 // 面包屑导航 function get_breadcrumbs() { global $wp_query; if ( !is_home() ){ ...

HTML（5）基础

1、html常用标签

2、字符格式标签：

3、xhtml即可扩展标记语言

4、meta标记表示网页的相关信息即网页元信息

5、一般一个网页只有一个一级标题。h1、h2和h3元素比较常用，h4元素偶尔使用，h5和h6元素基本上不被使用

6、 引用blockquote、cite和q

7、address表示地址、签名、作者和文档摘要

8、列表应该是同类、同型或同质信息的排列和组合

9、table属性summary属性表示表格摘要，不会显示，仅是为语音合成，非视觉浏览器或机器定义的。

10、form元素

11、input元素

12、表单分组：legend元素必须包含在fieldset元素内部，且紧邻fieldset元素。

13、绑定标签和定义键盘属性

14、select选项分区

15、元素显示类型

16、块状元素

17、结构嵌套规则

18、局部结构的设计中尽量避免使用ID

19、HTML5语法是为了保证和之前的html语法达到最大程度的兼容而设计的。

20、html5把元素分为六大类

21、div、section和article

22、nav和aside

HTML（5）基础的更多相关文章

随机推荐

热门专题

6、引用blockquote、cite和q