第3章 初探HTML
博客专区 > gtandsn 的博客 > 博客详情
第3章 初探HTML
gtandsn 发表于1年前
第3章 初探HTML
  • 发表于 1年前
  • 阅读 2
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

一、使用元素及属性

什么是元素?

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

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

共有 人打赏支持
粉丝 0
博文 41
码字总数 26971
×
gtandsn
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: