第3章初探HTML

最新推荐文章于 2023-12-27 14:36:14 发布

weixin_34111819

最新推荐文章于 2023-12-27 14:36:14 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2285087/blog/802570

2019独角兽企业重金招聘Python工程师标准>>>

一、使用元素及属性

什么是元素?

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

1.<code>开始标签

2.</code>结束标签

3.apples：内容

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

空元素：

<code></code>

自闭合元素：

<code/>

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

具体元素请参考：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.元素类型：

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

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

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

三、使用HTMl实体

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

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

可以看到test是斜体而<hhhh>则不显示。若<hhhh>是我想要显示的内容。
这样就可以解决问题。
这里的<>就是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

转载于:https://my.oschina.net/u/2285087/blog/802570

第3章 初探HTML

第3章初探HTML