HTML总结梳理

一、简介

HTML  超文本标记语言（Hyper Text Markup Language）

HTML 文档由HTML标签和纯文本构成，并由web浏览器对其进行读取，以网页的形式显示出来。

HTML 标签由"< >"包围，一般成对出现，第一个是开始标签第二个是结束标签，结束标签会在关键词前面加上斜杠用于区分，例如 <html>代码块</html>。

二、基本结构

<!DOCTYPE html>
<!--声明为HTML5文档，有助于浏览器中正确显示网页-->
<html>
<!--html是HTML页面的根元素包含了整个页面-->
<head>
<!--包含页面描述，CSS样式等，不会被用户看到-->
</head>
<body>
<!--包含可见的页面详情等，会被用户看到-->
</body>
</html>

 

1.<head>头部，包含页面描述，CSS样式等，不会被用户看到

<head>
  <meta charset="UTF-8">            <!-- 定义文档的字符编码 -->
  <title>title</title>          <!-- 文档标题 -->
  <meta name=" " content=" ">      
<!--meta主要用于设置网页中的一些元数据，元数据不是给用户看-->
  <link rel="shortcut icon" href="favicon.ico">  <!-- 引入字体图标 -->
  <link rel="stylesheet" href="../css/style.css">  <!-- 引入css样式 -->
  <style> </style> <!-- css样式 -->
</hea关于meta主要用于设置网页中的一些元数据，元数据不是给用户看charset 指定网页的字符集
<meta charset="UTF-8">
name 指定的数据的名称
content 指定的数据的内容
keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开
<meta name="keywords" content="开发者,程序员,博客园,程序猿,程序媛,极客,码农,编程,代码,软件开发,开源,IT网站,技术社区,Developer,Programmer,Coder,Geek,Coding,Code">                   
 description 用于指定网站的描述
<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来，博客园一直致力并专注于为开发者打造一个纯净的技术交流社区，推动并帮助开发者通过互联网分享知识，从而让更多开发者从中受益。博客园的使命是帮
助开发者用代码改变世界。">
2.<body>主体，网页中所有的可见内容都应该写在body里
三、属性
<h1>这是我的<font color="red" size='1'>第一个</font>网页！</h1>
在标签中（开始标签或自结束标签）还可以设置属性上图标红的即为属性
            属性是一个名值对（x=y）
            属性用来设置标签中的内容如何显示
            属性和标签名或其他属性应该使用空格隔开
            属性不能瞎写，应该根据文档中的规定来编写，
            有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号引起来    
-->
四、标签 
元素，以开始标签起始，以结束标签终止
块元素（block element）
　　- 在网页中一般通过块元素来对页面进行布局
　　- 块元素中基本上什么都能放，p元素不能用于嵌套其它块元素
　　- 可以自动换行且能识别宽高
行内元素（inline element）
　　- 行内元素主要用来包裹文字
　　- 设置宽高无效且不会自动进行换行
　　- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
常用标签

布局标签（结构化语义标签）

  • header 表示网页的头部
  • main 表示网页的主体部分(一个页面中只会有一个main)
  • footer 表示网页的底部
  • nav 表示网页中的导航
  • aside 和主体相关的其他内容（侧边栏）
  • article 表示一个独立的文章
  • section 表示一个独立的区块，上边的标签都不能表示时使用section
  • div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
  • span 行内元素，没有任何的语义，一般用于在网页中选中文字
  • p 段落
  • ul ol dl 列表
    • 无序列表 ull
    • 有序列表 olli
    • 自定义列表dl dt dd

资源标签

  • 超链接 a
    • 去别的网页
<a href="https://www.baidu.com"  target="_blank">百度</a>
<!--
href 指定跳转的目标路径
target 属性，用来指定超链接打开的位置
    _self 默认值 在当前页面中打开超链接
    _blank 在一个新的要么中打开超链接
-->
    • 自身页面瞄点

 

<a href="#p1">去id为p1处</a>

<p id="p1">文字</p>
 <!-- 
    1.可以直接将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置
    2.可以跳转到页面的指定位置，只需将href属性设置#目标元素的id属性值
        id属性（唯一不重复的）
            - 每一个标签都可以添加一个id属性
            - id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性

-->

 

  • 图片标签 img
<img scr="路径" alt="描述" width="宽度" height="高度">
 <!-- 
　　图片标签用于向当前页面中引入一个外部图片，使用img标签来引入外部图片，img标签是一个自结束标签
   img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）
         属性：
            src 属性指定的是外部图片的路径
            alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录
            width 图片的宽度
            height 图片的高度    
                - 宽度和高度中如果只修改了一个，则另一个会等比例缩放

-->

 

<iframe src="https://www.baidu.com" width="宽度" height="高度" frameborder="0"></iframe>
    <!--
     内联框架，用于向当前页面中引入一个其他页面
            src 指定要引入的网页的路径
            frameborder 指定内联框架的边框,1为显示边框,0为隐藏边框
     -->

 

 

<audio src="路径" controls autoplay loop></audio> 
 <!-- 
 audio 标签用来向页面中引入一个外部的音频文件的音视频文件引入时，默认情况下不允许用户自己控制播放停止
 属性：
　　　controls 是否允许用户控制播放
     autoplay 音频文件是否自动播放
     loop 音乐是否循环播放  
video标签使用方式和audio基本上是一样的
-->

　　我们常通过嵌套source来让插入音频文件变得更适配多种浏览器。

 

 

 

posted @ 2020-09-11 12:09  耳东大栗  阅读(78)  评论(0)    收藏  举报