html 学习 常用的html标签及使用

---

html是什么

• 超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
• 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
• 网页文件的扩展名：.html或.htm

http不是什么

HTML是一种标记语言（markup language），它不是一种编程语言。

HTML使用标签来描述网页。不像python编程语言一样，有逻辑什么的，这个标记语言是没有逻辑的

html标签： 超文本标记语言  就是标记用的

1. 声明为HTML5文档。
2. 、是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
3. 、定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的。
4. 定义了网页标题，在浏览器标题栏显示。
5. 、之间的文本是可见的网页主体内容。

html 标签分类

内敛标签（行内标签）： 不独占一行 b\i\u\s\button\span\img\a

块级标签（行外标签）：自己独占一行

\h1-h6\br\hr\p\div

p标签:不能嵌套p标签,也不能嵌套块级标签

html常用标签

标签	意义
	定义网页标题
	定义内部样式表
	定义JS代码或引入外部JS文件
	引入外部样式表文件
	定义网页原信息

元素可提供有关页面的元信息，针对搜索引擎和更新频度的描述和关键词

标签位于文档的头部，不包含任何内容

提供的信息是用户不可见的

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。 

        .http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

 #如果把URL和后面的内容去掉，就是2秒钟刷新一次，这些内容了解一下就行
 


 #edge是微软的一个全新的浏览器,其实就是告诉IE浏览器，你按照最高标准来渲染我的页面，了解一下就可以啦

name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

 #关键字，也就是别人是可以通过这些关键字搜索到我的这个文章的，搜索引擎就是能够这个content内容来帮别人搜索到你的这个文档的
#SEO就是做这个的，就是怎么让你们公司的网站在别人搜索的时候能够靠前显示，不算那个花钱的，百度是充值的，你冲个20w，别人可能一天就给你点击完了，特别的贵

 
  

img标签

src的路径又分为两种：网上的一个图片路径和本地的一个相对图片路径

 a标签

点我

target_blank   以一个新的页面打开百度

href   超链接地址

target_self   当前窗口打得开百度页面

ul 标签    无序列表

    

        
mike
        
hahah
        
shenji
    

type属性：

disc   实心圆点  默认值
circle     空心圆圈

square     实心方块

none      无样式

ol标签   有序列表

    

        
heihei
        
haha
        
amy
    

type属性  ：start是从数字几开始

• 1 数字列表，默认值
• A 大写字母
• a 小写字母
• Ⅰ大写罗马
• ⅰ小写罗马

标题列表标签  就像大纲一样，有一个层级效果

    

        
动漫  人物
        
玛卡<巴卡>
        
剧情人物
        
汤波荔波
    

 特殊字符

空格(html中默认是不显示空格的，也就是说通过空格键加了空格也没有多个空格的效果，加多少个都是显示一个空格效果，需要这些特殊字符才能显示出空格效果)
>	>
<	<
&	&
¥	¥
版权标识（写公司网站的时候会用到）	©
注册（一个圆圈里面有个R）	®

表格标签

    

        

        

            
姓名
            
年龄
            
爱好

        
        
        

        

            
alex
            
14
            
奥利给
        
        

            
mike
            
16
            
heiheihei
        
        

            
amy
            
17
            
mike
        

        
    

border  外边框的宽度

• border: 表格边框宽度.
• cellpadding: 内边距 （内边框和内容的距离）
• cellspacing: 外边距.（内外边框的距离）
• width: 像素 百分比.（最好通过css来设置长宽）
• rowspan: 单元格竖跨多少行
• colspan: 单元格横跨多少列（即合并单元格）

input标签

• name：表单提交时的“键”，注意和id的区别
• value：表单提交时对应项的值
  • type="button", "reset", "submit"时，为按钮上显示的文本年内容
  • type="text","password","hidden"时，为输入框的初始值
  • type="checkbox", "radio", "file"，为输入相关联的值
• checked：radio和checkbox默认被选中的项
• readonly：text和password设置只读  针对输入框
• disabled：所有input均适用  只能读不能写    但是有一个黑框效果   设置了readonly的标签,它的数据可以被提交到后台,设置了disabled的数据,是不能提交到后台的

form 表单触发提交数据的操作  必须放在from表单里面  卸载外面就是普通按钮

        
        提交按钮

checked 默认选中当属性名和属性值相同时 可以简写

 

        用户名:
        密码:

        man
        woman

         喝酒
         唱歌
         烫头


        提交按钮
        

        
        
        
        
    

select 标签

        
            北京
            上海
            天津
        

• multiple：布尔属性，设置后为多选下拉框，否则默认单选
• disabled：禁用
• selected：默认选中该项
• value：定义提交时的选项值

label标签

        用户名
        
        
        
            密码:
        

1. 　　label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本，那么和他关联的input标签就获得了光标，让你输入内容
2. 　　 标签的 for 属性值应当与相关元素的 id 属性值相同。

textarea多行文本

          默认内容