文档章节

第3章 初探HTML

gtandsn
 gtandsn
发布于 2016/12/08 19:43
字数 1276
阅读 3
收藏 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
博文 44
码字总数 28171
作品 0
成都
【HTML5初探之绘制图像(下)】看我canvas元素引领下一代web页面

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

范大脚脚
2017/12/13
0
0
书籍推荐:《实战Java虚拟机——JVM故障诊断与性能优化》下载

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

ddddd8
2017/11/29
0
0
【HTML5初探之本地存储】如果没有数据库。。。

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

范大脚脚
2017/12/07
0
0
【HTML5初探之离线应用】如何打造零请求、无流量的网站?

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

范大脚脚
2017/12/28
0
0
【HTML5初探之Geolocation API】让我们获取女神的地址

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

范大脚脚
2017/12/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

nginx模块学习六 add_header 跨域访问

语法 Syntax: add_header name value [always];Default: --Context:http,server,location,if in location 例:/etc/nginx/conf.d/default.conf server {    listen       80; ......

Romanceling
今天
0
0
SpringBoot初探

#SpringBoot初探 三种创建SpringBoot项目的方式: 第一种:使用IDEA创建maven项目,选择maven-archetype-quickstart; 第二种:使用IDEA创建Spring Initializer,选择web组件; 第三种:使用...

向码而生
今天
2
0
IO

JAVA中IO技术:BIO、NIO、AIO 1、同步异步、阻塞非阻塞概念 同步和异步是针对应用程序和内核的交互而言的。 阻塞和非阻塞是针对于进程在访问数据的时候,根据IO操作的就绪状态来采取的不同方...

DemonsI
今天
0
0
org.apache.commons 常用工具类

一. org.apache.commons.io.IOUtils closeQuietly 关闭一个IO流、socket、或者selector且不抛出异常。通常放在finally块。 toString 转换IO流、 Uri、 byte[]为String。 copy IO流数据复制,...

sprouting
今天
0
0
linux使用Inotify监控目录或者文件状态变更

基本概念: Inotify 是一个 Linux特性,它监控文件系统操作,比如读取、写入和创建。Inotify 反应灵敏,用法非常简单,并且比 cron 任务的繁忙轮询高效得多。 需求: 1.有一个文件采集进程,...

mickelfeng
今天
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部