视觉艺术

HTML入门笔记01

2020-02-29  本文已影响0人  tinjunge

1. HTML简史

1.1 html是谁发明的？

1.2 发明原因：

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起手详解

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常见全局属性

   <!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>

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

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

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

举例:

html:

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

css:

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


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

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

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

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

. 可以通过 JS 设置

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

5.常用内容标签

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

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

举例:

    <dl>
        <dt>术语1</dt>
        <dd>术语1的描述</dd>
        <dt>术语2</dt>
        <dd>术语2的描述</dd>
    </dl>
  1. 在 HTML 中，多个空格回车或者tab，都只会缩进成一个空格
  2. pre 的作用就是能保留多出来的空格，表示一种预定义格式的文本，按照原文件中的编排，文本中的空白符都会显示出来

举例：

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

</pre>

举例:

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

举例

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

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

重要属性举例：

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

举例：

请点击

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

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

举例:

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

举例:

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

猜你喜欢

热点阅读