HTML入门笔记1

朴灿烈づ我的快乐病毒、 2024-04-17 05:58 29阅读 0赞

## HTML是什么？ ##

HTML 全称是 Hyper Text Markup Language，翻译为【 超文本标记语言 】。

网页是万维网（World Wide Web）中最重要的一环，万维网所有的资源展示都靠它，HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的，也就说你所看到的百度，淘宝，它们所展示的内容全部都是基于HTML制作的。

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头(head)”部分和“主体(body)”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

最终总结，HTML就是用来制作万维网上的页面的。

## HTML 是谁发明的 ##

HTML之父是由英国人 蒂姆·伯纳斯·李 （Tim Berners-Lee）发明的，大约在1990年左右诞生，

1989年仲夏之夜，蒂姆成功开发出世界上第一个Web服务器和第一个Web客户机，

1989年12月，蒂姆为他的发明正式定名为World Wide Web，即我们熟悉的WWW；1991年5月WWW在 Internet上首次露面，立即引起轰动，获得了极大的成功被广泛推广应用。

2004年,英女皇为他颁发大英帝国爵级司令勋章，人们都称呼他叫做李爵士。

李爵士做了什么？总结一下：

自己写了第一个浏览器
      自己写了第一个服务器
      用自己写的浏览器访问了自己写的服务器
      发明了WWW，同时发明了HTML 、HTTP和URL

在2017年,李爵士被颁发2016年度的图灵奖，以此表彰他在计算机科学中为人类做出的贡献。

## HTML 起手 ##

下面我们看一下现在标准的HTML的起手模板写法。

上面这段代码是一个HTML页面的基本写法，我们来对每一行进行一个解析

1. <!DOCTYPE html>  文档类型,代表这是一个html文档。
    2. <html lang="en"> html标签，正规的写法，所有的html标签都要被包裹在这里，lang是语言的意思，可以把en改为 zh-CN，代表中文的意思。
    3. <head> 头部标签，用于写一些，定义文档属性，引入css、js 等等的标签。
    4. <meta charset="UTF-8"> 指定文档的字符编码是UTF-8。
    5. <meta name="viewport" content="width=device-width,initial-scale=1.0" > 指定文档禁用缩放，兼容移动端手机。
    6. <meta http-equiv="X-UA-Compatible" content="ie=edge"> 告诉IE浏览器如果支持edge版本的话，将版本内核提升到edge版本。
    7.  <title>Document</title> 文档的标题。
    8. <body> 文档的内容，所有和内容相关的标签和文字都在这里编写。

## 常用的章节标签 ##

1. 标题 h1 ~ h6 
    2. 章节 section
    3. 文章 article
    4. 段落 P
    5. 头部 header
    6. 脚部 footer
    7. 主要内容 main
    8. 旁支内容 aside
    9. 内容块划分 div

代码示例

<!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="ie=edge">
        <title>Document</title>
    </head>
    <body>
    
    <article>
        <header>
            顶部广告
        </header>
        <div>
            <main>
                <h1>文章标题</h1>
                <section>
                    <h2>第一章</h2>
                    <p>这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话</p>
                </section>
                <section>
                    <h3>1.1节</h3>
                    <p>一段话</p>
                </section>
                <section>
                    <h3>1.2节</h3>
                    <p>一段话</p>
                </section>
            </main>
            <aside>
                参考资料 1 2 3
            </aside>
        </div>
        <footer>© xxx版权所有</footer>
    </article>
    </body>
    </html>

运行效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70]

## 全局属性 ##

全局属性，就是所有的标签都有的属性

1.  class 类样式名称 , 看下图，举栗子。
    
    css可以通过元素的class名称匹配，并给元素装饰样子。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 1]
2.  contenteditable 允许修改元素内容, 看下图，举栗子。
    
    这个属性加在元素上以后，用户可以直接在浏览器展示的页面内容里，直接对该元素里的内容进行修改。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 2]
3.  hidden 隐藏元素, 看下图，举栗子。
    
    加了这个属性后元素直接消失了。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 3]
4.  id 元素ID , 看下图，举栗子。
    
    和class类似，只不过id是一个全局唯一标识，虽然是这个说法，但是在两个元素上写同一个id，依然两个都可以被选中渲染，所以尽量不要用id，用class就行。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 4]
5.  style 元素行内样式, 看下图，举栗子。
    
    通过style属性，可以直接在元素中写样式，并且这个优先级很高，会覆盖在样式表中写的样式。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 5]
6.  tabindex tab键的索引 , 看下图，举栗子。
    
    可以通过键盘的Tab键，来选择元素，图中箭头所指的框框就是用tab键选中的效果。  
    tabindex 从0开始，但是如果设置成0，那么就是最后一个用tab键访问到的，1~更多的正整数，就是按照顺序来的，如果设置成 -1 ，那么就意味着，该元素永远不可能被tab选择到。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 6]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 7]
7.  title 鼠标悬停时展示的内容, 看下图，举栗子。
    
    多用于展示一些文字过长，无法全部展示的时候，加一个title，鼠标悬浮上去以后就显示全部内容。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 8]

## 常用的内容标签 ##

1.  ol + li 有序列表，看图知意，就是一个有序号的内容列表。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 9]  
2. ul + li 无序列表

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 10]  
3. dl + dt + dd dl (列表) dt(标题) dd(内容项)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 11]  
4. pre 可以将用键盘敲的空格、换行都显示出来。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 12]

1.  hr 分隔线 ，是一个块级元素，独占一行，让两个元素之间出现一个分割线。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 13]

1.  br 换行 , 由于文字或者内联元素是从左到右的，有时候需要给这种元素换行就可以用br  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 14]
2.  a 网页链接标签 ，给一段文字加上这个标签，让点击他可以跳转到其他的位置或者网页链接。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 15]

1.  em 强调内容
2.  strong 重要内容
3.  code 包含代码，里面的字体都是等宽的
4.  quote 引用内容 默认是内联样式
5.  blockquote 块级引用内容，除了这个元素，上面的都是inline内联元素。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 16]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/5390657c3a444bb1a2831f8c3faeed0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/135fd19359eb4483bb4b85eb22c74944.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/bf35b1f856ae46a7a5a81dbab2e05ded.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/7304f44eda254f4297437fef3fde0bbb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/61a20103a90d4cb694db9a247959df55.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/e8900abb74ee49d1a0fc9d99789c7ffe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/981b9496d21a4b1e9cf18376629fd3a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/753c1b378a614b88b9f74a3f5073043d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/4f5d8b22be4f4a068efcd785ad946acc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/dc64306377674138b88da92b3119c7f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 10]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/785ebed78be94fe5973d313b397c1ea5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 11]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/15ff35ef348548bdbb691fae1cae1fe3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 12]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/1d145662124542928318d30db38b9354.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 13]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/1f6255ec95e24270b3131e5023e6d1e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 14]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/3a6ebc5199bc402e9db9c6dd01d5badd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 15]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/49bf4e19d85c4254a032a4b4bdacd497.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaW5pYW8xNDEy_size_16_color_FFFFFF_t_70 16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/e23655dda7a5496b8b34649de905afab.png