初探HTML

1使用元素

1.这里用粗体标明元素,code为标签,其中<code>为开始标签,</code>为结束标签;<code>apples</code>标签与元素一起称为code元素



I like <code>apples</code> and bannner

注意:有些html标签会改变呈现形式,例如<code>,尽量不要这样,未使用css,让内容和呈现分离开来

2.使用空元素

有些元素为空时是没有意义的,但他任然为有效的HTML代码。



I like <code></code> and bannner

3.使用自闭和标签

元素可以简洁的只用一个元素表示,下面就是只用一个标签表示空元素



I like </code> and bannner

   4.虚元素

有些元素只能使用一个标签表示,在其中放置任何内容都是不符合HTML规范的。这些元素为
虚元素。
他有两种表示方法:
1)开始标签



I like apples and bannner,
<hr>
I like  bannner

2)结束标签



1 I like apples and bannner,
2 <hr/>
3 I like  bannner

提一句:hr也是带有呈现形式含义的元素,他会显示为一条横线

1.2使用元素属性

元素可以使用属性(attribute)进行配置。
href为属性名,它专属于a标签,表示跳转的地址;"/app.html"为属性值

I like <a href="/app.html">apple</a> and orange.

1.2.1一个元素对应多个属性

一个元素可以对象多个属性,他们之间用空格隔离开,且没有先后顺序

  I like <a href="/app.html" id="firstlink" class="a-link">apple</a> and orange.

1.2.2使用布尔属性

有些属性属于布尔属性,这些属性不需要设定一个值,只需要将属性名添加到元素中就可以了。
    例如下面:布尔属性为disabled,其实就是disabled=“true”,

 your name:<input disabled>

与下面的代码等价



 your name:<input disabled="">
 your name:<input disabled="disabled">

1.2.2使用自定义属性

用户可以自定义属性,这种属性必须以data-开头。加data-是为了以免将来出新属性和你的一样,比如出了hcd属性,避免不必要的冲突



  your name:<input disabled="" data-hcd="hcd">

1.3创建html文档

html文档大部分是针对浏览器创建的。用于处理HTML文档的各种软件有一个共同的名称叫做用户代理。浏览器是最为流行的用户代理,但是不是唯一的一种

1.3.1外层结构

HTML的外层结构由两个元素确定:DOCTYPE和html



<!DOCTYPE html>
<html lang="en">
</html>

上例中的DOCTYPE元素让浏览器明白处理的是HTML文档,
以html开头,告诉浏览器直到html结束标签,所有的内容都应当按照html来处理

1.3.2元数据

HTML文档的元数据部分可以用来向浏览器提供文档的一些信息。元数据包含在head元素内部



1 <!DOCTYPE html>
2 <html>
3     <head>
4         <title>this is title</title>
5     </head>
6 </html>

这里只是简单举个例子,还有很多是可以提供的,例如引入css

1.3.3内容

文档的第三部分是文档的内容,这也是最后一部分,放在body元素之中,主要放置向用户显示的内容



 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     I like <code>apple</code> and orange.
 9 </body>
10 </html>

1.3.4父元素,子元素,后代元素和兄弟元素

例如:



1 <ul>
2     <li>
3         <span>this is span</span>
4     </li>
5     <li> this is li</li>
6 </ul>

上面的代码中:ul  ---  li的父元素,
             li  ---  span的父元素,
             span---  ul的后代元素,
             li  ---  li的兄弟元素

1.3.5了解元素类型

HTML元素:1.元数据元素   2.流元素   3.短语元素
    1.元数据元素:用来构建HTML文档的基本结构,以及对该如何处理文档向浏览器提供信息和指示。
    2.流元素和短语元素的用途是确定一个元素的合法的父元素和子元素的范围。短语元素是HTML的基本成分。流元素是短语元素的超集。就是说所有的短语元素都是流元素,而流元素不一定是短语元素。

1.4HTML5全局属性

每种元素都可以规定自己的属性,这种属性称为局部属性。每一个局部属性都可以用来控制元素独有行为的某个方面。
    全局属性:他们用来配置多有元素共有的行为,全局属性可以用在任何一个元素身上。

1.4.1 accesskey属性

使用accesskey可以设定一个或者几个用来选择页面上的元素的快捷键。



 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <form>
 9         Name:<input type="text" name="name" accesskey="n">
10         <br>
11         password:<input type="password" name="password" accesskey="p">
12         <br>
13         value<input type="text" name="value" accesskey="s">
14     </form>
15 </body>
16 </html>

对于上面的代码,在window系统中,利用 Alt+accesskey属性值 可以快速切换,例如Alt+s可以快速切换到value的input,Alt+n可以快速切换到name的input

1.4.2 class属性

给元素定义一个类,对这个类进行操作,或是增加样式或是js操作

1.4.3 contenteditable

contenteditable是HTML5中新增的元素,其用途是让用户能够修改页面上的内容。属性值为true为可以修改,false为不可修改



 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <p contenteditable="true">this is a big apple</p>
 9 </body>
10 </html>

1.4.4 id

给元素的唯一标识,id应当是唯一的。

1.4.5 lang

说明元素内容使用的语言。



 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <p lang="en">hello - how are you</p>
 9     <p lang="fr">Bonhjir - asdas </p>
10     <p lang="es">Holar asdsdd </p>
11 </body>
12 </html>

lang属性值必须用ISO语言代码。

时间: 2024-10-09 08:16:11

初探HTML的相关文章

进阶之初探nodeJS

一.前言 在"初探nodeJS"随笔中,我们对于node有了一个大致地了解,并在最后也通过一个示例,了解了如何快速地开启一个简单的服务器. 今儿,再次看了该篇随笔,发现该随笔理论知识稍多,适合初级入门node,固萌生一个想法--想在该篇随笔中,通过一步步编写一个稍大一点的node示例,让我们在整体上更加全面地了解node. so,该篇随笔是建立在"初探nodeJS"之上的,固取名为"进阶之初探nodeJS". 好了,侃了这多,那么我们即将实现一个

从273二手车的M站点初探js模块化编程

前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数据. 273这个M站点是产品推荐我看的.第一眼看这个产品时我就再想他们这个三次加载和翻页按钮的方式,那么小分页的pageIndex是怎么计算的.所以就顺便看了下源码. 提到看源码时用到了Chrome浏览器的格式化工具(还是朋友推荐我的,不过这个格式化按钮的确不明显,不会的话自行百度). 三次加载和分

[转载]HDFS初探之旅

转载自 http://www.cnblogs.com/xia520pi/archive/2012/05/28/2520813.html , 感谢虾皮工作室这一系列精彩的文章. Hadoop集群(第8期)_HDFS初探之旅 1.HDFS简介 HDFS(Hadoop Distributed File System)是Hadoop项目的核心子项目,是分布式计算中数据存储管理的基础,是基于流数据模式访问和处理超大文件的需求而开发的,可以运行于廉价的商用服务器上.它所具有的高容错.高可靠性.高可扩展性.高

MongoDB初探系列之二:认识MongoDB提供的一些常用工具

在初探一中,我们已经可以顺利的将MongoDB在我们自己的机器上跑起来了.但是在其bin目录下面还有一些我们不熟知的工具.接下来,将介绍一下各个小工具的用途以及初探一中MongoDB在data文件夹下创建的文件的用途. 1.bin目录下面的各种小工具简介及使用方式 bsondump.exe 用于将导出的BSON文件格式转换为JSON格式mongo.exe mongoDB的客户端 mongod.exe 用于启动mongoDB的Server mongodump.exe 用于从mongodb数据库中导

Asynchronous Pluggable Protocols 初探

Asynchronous Pluggable Protocols,异步可插入协议,允许开发者创建可插协议处理器,MIME过滤器,以及命名空间处理器工作在微软IE4.0浏览器以及更高版本或者URL moniker中.这涉及到Urlmon.dll动态链接库所公开(输出)的可插协议诸多功能,本文不进行深入的原理讲解,只对它其中之一的应用进行解析,那就是如何将一个应用程序注册为URL协议. 应用场景: tencent协议: 当我们打开"tencent://message/?uin=要链接的QQ号 &qu

重新认识HTML,CSS,Javascript 之node-webkit 初探

今天我们来系统的.全面的 了解一下前端的一些技术,将有助于我们写出 更优秀的 产品 出来. 什么是HTML? HTML 是用来描述网页的一种语言. HTML 包含一些根节点,子节点,文本节点,属性节点,组成, 它通过一系列预定义标签来描述网页结构,如: <title>This is title</title> ,这个表明该网页的标题是 This is title. 什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets),它描述浏览器显示如何显示htm

java进阶06 线程初探

线程,程序和进程是经常容易混淆的概念. 程序:就是有序严谨的指令集 进程:是一个程序及其数据在处理机上顺序执行时所发生的活动 线程:程序中不同的执行路径,就是程序中多种处理或者方法. 线程有两种方法实现 一:继承Thread 覆盖run方法 package Thread; public class Thread1 { public static void main(String[] args){ MyThread1 thread1=new MyThread1(); thread1.setName

数据加密解密初探

在一次网络通信或者是进程通信中,如果传输数据采用明文的方式,那么很容易被第三方"窃听"到,安全性难以保障. 而所谓加密是让数据从明文变成密文,传输过程中是密文,传送过去之后对方接收到的也是密文.--可以理解为密文就是乱码,看不出内在的任何意义,通常也都是逐位对应的. 在接收方接收到密文之后只有把它还原为原来的样子才可以理解对方说的具体是什么,此过程就叫做解密. 所谓系统的安全要实现的目标应该包括:机密性-confidentiality,完整性-integrity 和可用性-availa

Key/Value之王Memcached初探:三、Memcached解决Session的分布式存储场景的应用

一.高可用的Session服务器场景简介 1.1 应用服务器的无状态特性 应用层服务器(这里一般指Web服务器)处理网站应用的业务逻辑,应用的一个最显著的特点是:应用的无状态性. PS:提到无状态特性,不得不说下Http协议.我们常常听到说,Http是一个无状态协议,同一个会话的连续两个请求互相不了解,他们由最新实例化的环境进行解析,除了应用本身可能已经存储在全局对象中的所有信息外,该环境不保存与会话有关的任何信息.之所以我们在使用ASP.NET WebForm开发中会感觉不到Http的无状态特

Unity3D游戏开发初探

一.预备知识-对象的"生"与"死" (1)如何在游戏脚本程序中创建对象而不是一开始就创建好对象?->使用GameObject的静态方法:CreatePrimitive() 以上一篇的博文中的"指哪打哪"例子为基础,在AddForce脚本写入以下代码:   其中在CreateCube方法中,使用GameObject.CreatePrimitive方法来创建Cube类型的游戏对象实例,设置了它出现的坐标并为它增加刚体组件.这里可以看下AddCo