首页 > 代码库 > 初探HTML
初探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语言代码。
初探HTML