文档章节

第3章 初探HTML

gtandsn
 gtandsn
发布于 2016/12/08 19:43
字数 1276
阅读 3
收藏 0
点赞 0
评论 0

一、使用元素及属性

什么是元素?

是用来向浏览器说明文档内容的工具

1.<code>开始标签

2.</code>结束标签

3.apples:内容

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

空元素:

<code></code>

自闭合元素:

<code/>

虚元素:什么是虚元素:在其中放的任务内容都不符合规范

<br> <hr>

具体元素请参考:http://www.w3school.com.cn/tags/index.asp

什么是属性?

属性是用来配置元素的,href就是a元素的属性,可以应用多个属性。其中class是全局属性,href是a的专有属性,以后再讲

​
I like <a href="www.baidu.com" class="abc"> apples </a> and oranges 

​

布尔属性:

<input disabled />
<input disabled="" />
<input disabled="disabled" />
<input disabled="false" />
<input disabled="abc" />

自定义属性:

属性必须以"data-"开头.

 

二、创建HTML文档

     随便写一个文本文件然后以.html为扩展名。

     html5强调将内容和呈现形工分开,现在主流的是浏览器代理访问,非浏览器代理还很少。

     1.外层结构

<!DOCTYPE HTML>  <!-- 让浏览器知道自已处理的是html文档 ,不过也可以不写,因为大多数浏览器有默认值 -- >
<html> <!--html元素的开始标签,告诉浏览器直到html结束标签,其中的内容处理的都应作为html处理 -- >

</html>

     2.元数据:用以向浏览器提供文档的一些信息

      必须包含在head元素内部

<!DOCTYPE HTML>
<html> 
<head>
<title>this is a test pag</title><!--就是这个-->
</head>

</html>

     3.内容---放在body中的元素

<!DOCTYPE HTML>
<html> 
<head>

</head>
<body>
<p>11111111111</p><!--content-->

</body>

</html>

 

3.父元素,子元素,后代元素,兄弟元素

 

4.元素类型:

  1.    元数据元素---构建文档结构,向浏览器提供一些文档信息
  2.    流元素---规定这些元素可以成为父元素
  3.    短语元素---规定这些元素可以成为子元素

     举个例子,div既可以是流元素也可以是短语元素,因为它能包含其他的元素也能被其他的元素包含。但是像<b>这样的就仅仅是短语元素了。

    4.受限元素----这些元素要么没什么特别的含义,要么就只能用在一些非常有限的情况下比如说<li>

三、使用HTMl实体

     什么是hmtl实体:浏览器用来代替特殊字符的一种代码。简单来说,html是有标签组成的,所以你在输入一段文字的时候,会判断文字中是否有可是别的标签,若有,则翻译对应的标签。
比如:我想入俗一段文字。

<p>this is <i>test</i> <hhhhh> end</p>

可以看到test是斜体而<hhhh>则不显示。若<hhhh>是我想要显示的内容。
这样就可以解决问题。
这里的&lt;&gt;就是HTML实体。
常见的HTML实体:http://www.w3school.com.cn/html/html_entities.asp


四、HTML5全局属性

      1、什么是全局属性:用来配置所有元素的共有的行为。全局属性也可以用在任何一个元素身上。

      1).accesskey:alt+accesskey属性值对应的键来访问元素.

<a href="http://www.w3school.com.cn/" accesskey="w">W3School</a><br />
<a href="http://www.baidu.com/" accesskey="g">Google</a>
<input accesskey="n"/>

 

2).class:将元素归类。

3).contenteditable:是html5新增属性,让用户能够修改页面上的内容。

<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>
<div contenteditable="true">1111</div>

4)contextmenu:为元素设置快捷菜单--目前没有浏览器支持。

5)dir:规定元素中文字的朝向:

<p dir="rtl">Write this text right-to-left!不是真的?</p>
<p dir="ltr">Write this text right-to-left!不是真的?</p>

6)draggable,dropzone无素拖放---后面再来研究。

7)hiddle:布尔属性,表示相关元素当前不用关注 ,浏览器对他的处理方式是隐藏相关元素。

 <script>
            var toggleHidden = function() {
                var elem = document.getElementById("toggle");
                if (elem.hasAttribute("hidden")) {
                    elem.removeAttribute("hidden");
                } else {
                    elem.setAttribute("hidden", "hidden");
                }
            }
        </script>
   <button onclick="toggleHidden()">Toggle</button>
        <table>
            <tr><th>Name</th><th>City</th></tr>
            <tr><td>Adam Freeman</td><td>London</td></tr>
            <tr id="toggle" hidden><td>Joe Smith</td><td>New York</td></tr>
            <tr><td>Anne Jones</td><td>Paris</td></tr>
        </table>

8)id:元素的唯一标志,最好每一个元素都有,主要用与js选择元素,和样式应用到无素身上。

9)lang:说明元素内容使用的语言,必须是有效的iso语言代码。

10)spellcheck:浏览器是否应该对元素内容进行检查--依赖浏览器语言的设置。

<textarea spellcheck="true">This is some  bbb text</textarea>

11)style用于直接在元素上定义样式.

  <a href="http://apress.com" style="background: grey; color:white; padding:10px">
            Visit the Apress site
        </a>

12)tabindex: Tab键在各元素之间的切换  如果是-1不会被选中

    <form>
            <label>Name: <input type="text" name="name" tabindex="1"/></label>
            <p/>
            <label>City: <input type="text" name="city" tabindex="-1"/></label>
            </p>
            <label>Country: <input type="text" name="country" tabindex="2"/></label>
            </p>
            <input type="submit" tabindex="3"/>
        </form>

13)title:元素的额外信息,浏览器通常 用这个显示工具提示

 <a title="节能" href="www.baidu.com">1111111</a>

关于全局属性想要更详细的介绍请访问http://www.w3school.com.cn/html5/html5_ref_globalattributes.asp

© 著作权归作者所有

共有 人打赏支持
gtandsn
粉丝 0
博文 41
码字总数 26971
作品 0
成都
【HTML5初探之绘制图像(下)】看我canvas元素引领下一代web页面

导航 【初探HTML5之使用新标签布局】用html5布局我的博客页! 【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放 【HTML5初探之绘制图像(上)】看我canvas元素引领下一代web页面...

范大脚脚 ⋅ 2017/12/13 ⋅ 0

书籍推荐:《实战Java虚拟机——JVM故障诊断与性能优化》下载

本书详细介绍Java虚拟机的基本原理和优化诊断方法。其中重点介绍Java虚拟机的体系结构、常用的虚拟机参数、Java虚拟机的垃圾回收原理、算法以及目前虚拟机所支持的各种垃圾回收器及其区别、特...

ddddd8 ⋅ 2017/11/29 ⋅ 0

【HTML5初探之本地存储】如果没有数据库。。。

导航 【初探HTML5之使用新标签布局】用html5布局我的博客页! 【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放 【HTML5初探之绘制图像(上)】看我canvas元素引领下一代web页面...

范大脚脚 ⋅ 2017/12/07 ⋅ 0

【HTML5初探之Geolocation API】让我们获取女神的地址

导航 【初探HTML5之使用新标签布局】用html5布局我的博客页! 【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放 【HTML5初探之绘制图像(上)】看我canvas元素引领下一代web页面...

范大脚脚 ⋅ 2017/12/14 ⋅ 0

【HTML5初探之离线应用】如何打造零请求、无流量的网站?

导航 【初探HTML5之使用新标签布局】用html5布局我的博客页! 【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放 【HTML5初探之绘制图像(上)】看我canvas元素引领下一代web页面...

范大脚脚 ⋅ 2017/12/28 ⋅ 0

【HTML5初探之绘制图像(上)】看我canvas元素引领下一代web页面

导航 【初探HTML5之使用新标签布局】用html5布局我的博客页! 【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放 【HTML5初探之绘制图像(上)】看我canvas元素引领下一代web页面...

范大脚脚 ⋅ 2017/12/06 ⋅ 0

微软面试、经典算法、编程艺术、红黑树4大系列总结

无私分享,造福天下 以下是本blog内的微软面试100题系列,经典算法研究系列,程序员编程艺术系列,红黑树系列4大经典原创系列作品与一些重要文章的集锦。 一、微软面试100题系列 横空出世,席...

长平狐 ⋅ 2013/01/06 ⋅ 0

【HTML5初探之Web Workers】网页也能多线程

导航 【初探HTML5之使用新标签布局】用html5布局我的博客页! 【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放 【HTML5初探之绘制图像(上)】看我canvas元素引领下一代web页面...

范大脚脚 ⋅ 2017/11/09 ⋅ 0

PHP设计模式名称_已迁移

第3章 适配器模式 第4章 建造者模式 第5章 数据访问对象模式 第6章 装饰器模式 第7章 委托模式 第8章 外观模式 第9章 工厂模式 √ 第10章 解释器模式 第11章 迭代器模式 第12章 中介者模式 ...

鬼谷子灬 ⋅ 2015/09/21 ⋅ 0

推荐7本不错的HTML5书籍

HTML5是HTML的下一代。HTML5引进了各种新元素,无论是针对内容结构还是媒体。 你可以找到很多关于HTML5信息的网站,包括介绍、教程以及使用技巧。但市面上也有一些好的书籍,集中介绍了HTML5...

随影求是 ⋅ 2012/03/15 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring MVC基本概念

只写Controller

颖伙虫 ⋅ 15分钟前 ⋅ 0

微软重金收购GitHub的背后逻辑原来是这样的

全球最大的开发者社区GitHub网站花落谁家的问题已经敲定,微软最终以75亿美元迎娶了这位在外界看来无比“神秘”的小家碧玉。尽管此事已过去一些时日,但整个开发者世界,包括全球各地的开源社...

linux-tao ⋅ 16分钟前 ⋅ 0

磁盘管理—逻辑卷lvm

4.10-4.12 lvm 操作流程: 磁盘分区-->创建物理卷-->划分为卷组-->划分成逻辑卷-->格式化、挂载-->扩容。 磁盘分区 注: 创建分区时需要更改其文件类型为lvm(代码8e) 分区 3 已设置为 Linu...

弓正 ⋅ 36分钟前 ⋅ 0

Spring源码解析(六)——实例创建(上)

前言 经过前期所有的准备工作,Spring已经获取到需要创建实例的 beanName 和对应创建所需要信息 BeanDefinition,接下来就是实例创建的过程,由于该过程涉及到大量源码,所以将分为多个章节进...

MarvelCode ⋅ 56分钟前 ⋅ 0

js模拟栈和队列

栈和队列 栈:LIFO(先进后出)一种数据结构 队列:LILO(先进先出)一种数据结构 使用的js方法 1.push();可以接收任意数量的参数,把它们逐个推进队尾(数组末尾),并返回修改后的数组长度。 2....

LIAOJIN1 ⋅ 今天 ⋅ 0

180619-Yaml文件语法及读写小结

Yaml文件小结 Yaml文件有自己独立的语法,常用作配置文件使用,相比较于xml和json而言,减少很多不必要的标签或者括号,阅读也更加清晰简单;本篇主要介绍下YAML文件的基本语法,以及如何在J...

小灰灰Blog ⋅ 今天 ⋅ 0

IEC60870-5-104规约传送原因

1:周期循环2:背景扫描3:自发4:初始化5:请求6:激活7:激活确认8:停止激活9:停止激活确认10:激活结束11:远程命令引起的返送信息12:当地命令引起的返送信息13:文件传送20:响应总召...

始终初心 ⋅ 今天 ⋅ 0

【图文经典版】冒泡排序

1、可视化排序过程 对{ 6, 5, 3, 1, 8, 7, 2, 4 }进行冒泡排序的可视化动态过程如下 2、代码实现    public void contextLoads() {// 冒泡排序int[] a = { 6, 5, 3, 1, 8, 7, 2, ...

pocher ⋅ 今天 ⋅ 0

ORA-12537 TNS-12560 TNS-00530 ora-609解决

oracle 11g不能连接,卡住,ORA-12537 TNS-12560 TNS-00530 TNS-12502 tns-12505 ora-609 Windows Error: 54: Unknown error 解决方案。 今天折腾了一下午,为了查这个问题。。找了N多方案,...

lanybass ⋅ 今天 ⋅ 0

IDEA反向映射Mybatis

1.首先在pom文件的plugins中添加maven对mybatis-generator插件的支持 ` <!-- mybatis逆向工程 --><plugin><groupId>org.mybatis.generator</groupId><artifactId>mybatis-generator-ma......

lichengyou20 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部