HTML入门笔记01

作者: tinjunge | 来源:发表于2020-02-29 18:36 被阅读0次

1. HTML简史

1.1 html是谁发明的？

1990年左右，Tim Berners-Lee（蒂姆·伯纳斯·李）发明了万维网（亦作“WWW”英文全称为“World Wide Web”），同时发明了HTML、HTTP和URL。李爵士写出了世界第一个浏览器，写了第一个服务器，并且用自己的浏览器访问了自己的服务器。

1.2 发明原因：

让每个人输入网址就能看到网页：上网冲浪
当时世界上没有网址，李爵士就发明了 URL
当时世界上没有网页，李爵士就发明了 HTML
为了让这个系统更完善，李爵士就发明了 HTTP

2.HTML 起手式

2.1HTML起手

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="id=edge">
    <title>Document</title>
  </head>
  <body>
    
  </body>
</html>

2.1.2 html起手详解

!DOCTYPE html ---> 声明文档类型为HTML
html lang="en"--> HTML文档根标签，闭合标签，向搜索引擎表示该页面是html语言，并且语言为英文网站lang="en"表明html为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english
你的页面如果是中文页面，可将其改为
<html lang="zh-CN">
zh-CN即表示简体中文
head HTML文档元数据，闭合标签，文档头部区，一般不可见
meta HTML文档元数据，单标签，存在于head标签内

i.常用：
<meta charset="UTF-8" />
charset="UTF-8"-->表明HTML文档使用utf-8字符编码

ii. <meta name="viewport" content="width=device-width, initial-scale=1.0" />-->禁用缩放，兼容手机
iii.<meta http-equiv="X-UA-Compatible" content="id=edge">-->告诉IE浏览器使用最新内核进行文档解析渲染
<title>Document</title>-->1. HTML文档标题标签，闭合标签，元素可定义文档的标题。
2.浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。3.提示：<title> 标签是 <head> 标签中唯一要求包含的东西。
<body></body>-->1. body元素定义文档的主体。

2.body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

3.常用章节标签

<body>
1. h1 到 h6-->标题标签，表示内容框架，内容的层级
2. section-->章节标签
3. article-->表示文章
4. p-->表示一个段落
5. header-->头部标签
6. footer-->脚部标签
7. main-->主要内容
8. aside-->旁支内容
9. div-->块级元素，用来划分

实例：

<html>
    <head>
        <title>这是标题</title>
    </head>
    <body>
        <header>顶部广告顶部广告顶部广告</header>
        <div>
            <main>
                <h1>文章标题</h1>
                
                <section>
                    <h2>第一章</h2>
                    <p>
                        一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话
                    </p>
                    <section>
                        <h3>1.1节</h3>
                        <p>
                            一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话
                        </p>
                        <h3>1.2节</h3>
                        <p>
                            一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话
                        </p>
                    </section>
                </section>
            </main>
            <aside>
                参考资料: 
                        1
                        2 
                        3
            </aside>
        </div>
        <footer>&copy; 版权所有</footer>
    </body>
</html>

4.HTML常见全局属性

1.contentEditable属性
contentEditable是由微软开发。被其他浏览器反编译并投入应用的一个全局属性。它的主要功能是是否允许用户编辑元素的内容，被编辑元素必须是获得鼠标焦点的元素，而且在点击后要提供一个插入符号，提示用户该元素中内容允许编辑。contentEditable属性是一个布尔值属性，可以指定为ture或false。该属性还有一个隐藏属性的inherit状态，为true是允许用户编辑;为false时元素不能被用户编辑;没有指定时则由inherit状态决定，如果父元素是可编辑的，该元素也是可编辑的。
示例：

   <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>属性测试</title>
  </head>
  <body>
    <h1 contenteditable="true">这是一段可以编辑的标题，请试着编辑该标题</h1>
  </body>
</html>

2.hidden属性

1.在HTML5中所有的元素允许使用hidden属性。它类似input元素中的hidden属性，使元素处于不可见状态。hidden属性设置为true，元素处于不可见状态;

2.hidden属性设置为false时元素处于可见状态 。
示例：

<div>
    <p hidden=”true“>我是隐藏的内容</p>
</div>

3.class属性

i.给标签分类/标记

11.方便添加样式

举例:

html:

<div class=" bgcolor-r hiddened"></div>

css:

.bgcolor-r{
   background:#f40;
  
}
.hiddened{
   hidden:true;
}

4.tabindex属性
- 指定元素是否/在何处参与顺序键盘导航（一般用 Tab 按键）
- 值
  - 负值（往往是 -1）：表示元素无法通过键盘导航访问到
  - tabindex="0"：往往表示最后一个被聚焦
  - 正值：越大越后被聚焦，相同则根据元素在当前DOM中的先后顺序决定
tabindex在程序开发概念，是指不断敲击Tab键让窗口或页面中控件获得焦点，对窗口的控件进行遍历，每个控件的tabindex表示第几个被访问的。之前这个属性在编辑网页很有用，现在是根据元素所在位置决定遍历顺序，所以就不需要了。不过tabindex另一个作用，只有链接元素与表单元素可以通过按键获得焦点。如果对元素使用了tabindex属性后，也能让元素获得焦点，执行focus()语句时，可以让元素获得焦点了。
tabindex为负值时，可以通过编程的方式让元素获得焦点，但按下Tab键该元素就不能获得焦点了。

示例：
```
<--! 最后被聚焦 -->
  <div tabindex="200">one</div>
  
  <--! 不参与导航 -->
  <div tabindex="-1">two</div>

  <--! 最先被聚焦 -->
  <div tabindex="1">three</div>

  <--! 最后被聚焦 -->    
  <div tabindex="0">four</div>

  <--! 被聚焦顺序：three one four -->
```

1. id 属性


   . 通俗说法：全页面唯一用 id，不然用 class

   . 实际情况：不到万不得已，我们不考虑用 id，因为 id 不报错，可以允许多个相同 id 的元素。

忌讳：id 不能设置成和全局元素的属性（需要记忆）一样，新手慎用 id 属性

6.style属性

. 样式属性，优先级高于 CSS

. 可以通过 JS 设置

. JS设置优先级高于 style属性，高于 CSS

5.常用内容标签

a.ul + li-->无序列表组合

。 ul：unordered list，没有顺序的列表

。 li：list item，列表中的一项

。 ul 里面含有处 li 之外的子元素

举例：

    <ul>  
        <li>首页</li>
        <li>栏目一</li>
        <li>栏目二</li>
    </ul>

b.ol + li-->有序列表组合

。 ol：ordered list，有顺序的列表

。 li：list item，列表中的一项

。 ol 里面含有处 li 之外的子元素

举例：

    <ol>  
        <li>栏目零 1</li>
        <li>栏目一 2</li>
        <li>栏目二 3</li>
    </ol>

c.dl + dt + dd--> 表格列表标签

。 dl：description list，描述性定义性列表

。 dt：descritption term，被描述的对象术语，只能作为dl元素的子元素出现，通常后面跟着 dd 元素

。 dd：用来指明 dl 元素中一个术语的描述，该元素只能作为描述列表元素的子元素出现，而且必须跟着一个 dt元素

举例:

    <dl>
        <dt>术语1</dt>
        <dd>术语1的描述</dd>
        <dt>术语2</dt>
        <dd>术语2的描述</dd>
    </dl>

d.pre-->预格式文本标签

在 HTML 中，多个空格回车或者tab，都只会缩进成一个空格
pre 的作用就是能保留多出来的空格，表示一种预定义格式的文本，按照原文件中的编排，文本中的空白符都会显示出来

举例：

<pre>
          春晓
  春眠不觉晓，处处闻啼鸟，
  夜来风雨声，花落知多少。

</pre>

e.code-->呈现一段计算机代码，默认是以浏览器的的默认等宽字体显示

举例:

    <pre>
        <code>
            var a = 1
            console.log(a)
        </code>
    </pre>

f.hr-->水平分割线标签

。 horizontal rule，表示水平分割线，段落级元素之间的主体转换

举例

    <p>
        这是段落内容1
    </p>
    <hr>

    <p>
        这是段落内容2
    </p>

g.br-->break,在文本中生成一个回车（换行符号）
h.a-->anchor，锚元素

。创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接

重要属性举例：

href 属性：超链接指向的 URL 或其片段
target 属性：指定何处显示链接的资源内容

举例：

请点击

<a href="http://www.baidu.com" target="_blank">
这里
</a>

i.em-->emphasis,标记用户需要着重阅读的内容与 strong 的区别：

    em：语气的强调
    strong：本身内容的强调

举例:

<p>
    我们<em>期中考试</em>重点是<strong>JavaScript</strong>
</p>

j.q--> quote, 引用文本标签
1. 表示一个短的行内（内联）引用的文本,不要用换行符
2. 长文本（块级）引用，blockquote

举例:

    <p>
        XX说<q>我是一个内联的短引用文本</q>
        <br>
        XX又说
        <br>
        <blockquote>
            我是一个块级的 
         <br>
            长引用文本
        </blockquote>
    </p>

HTML入门笔记01

1. HTML简史

1.1 html是谁发明的？

1.2 发明原因：

2.HTML 起手式

2.1HTML起手

2.1.2 html起手详解

3.常用章节标签

实例：

4.HTML常见全局属性

举例:

示例：

5.常用内容标签

举例：

举例：

举例:

举例：

举例:

举例

重要属性举例：

举例：

举例:

举例:

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

视觉艺术