html是什么

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

http不是什么

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

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

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

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

html 标签分类

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

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

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

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

html常用标签

标签意义
<title></title>定义网页标题
<style></style>定义内部样式表
<script></script>定义JS代码或引入外部JS文件
<link/>引入外部样式表文件
<meta/>定义网页原信息

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

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

<meta>提供的信息是用户不可见的

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

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

<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=http://www.baidu"> #如果把URL和后面的内容去掉，就是2秒钟刷新一次，这些内容了解一下就行
<!--指定文档的编码类型--> 
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge"> #edge是微软的一个全新的浏览器,其实就是告诉IE浏览器，你按照最高标准来渲染我的页面，了解一下就可以啦

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

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

<meta name="description" content="xxxxxpythonxxx学习"

img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

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

 a标签

<a href="http://www.baidu" target="_blank" >点我</a>

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

href   超链接地址

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

ul 标签    无序列表

    <ul type="square">
        <li>mike</li>
        <li>hahah</li>
        <li>shenji</li>
    </ul>

type属性：

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

square     实心方块

none      无样式

ol标签   有序列表

    <ol type="A" start="2">
        <li>heihei</li>
        <li>haha</li>
        <li>amy</li>
    </ol>
type属性  ：start是从数字几开始
  • 1 数字列表，默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马

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

    <dl>
        <dt>动漫&nbsp;&nbsp;人物</dt>
        <dd>玛卡&lt;巴卡&gt</dd>
        <dt>剧情人物</dt>
        <dd>汤波荔波</dd>
    </dl>

 特殊字符

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

表格标签

    <table border="1px" cellpadding="10" cellspacing="20">
        <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>爱好</th>

        </tr>
        </thead>
        <tbody>
        <tr>
            <td>alex</td>
            <td>14</td>
            <td>奥利给</td>
        </tr>
        <tr>
            <td>mike</td>
            <td>16</td>
            <td>heiheihei</td>
        </tr>
        <tr>
            <td>amy</td>
            <td>17</td>
            <td>mike</td>
        </tr>

        </tbody>
    </table>
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表单里面  卸载外面就是普通按钮

        <input type="submit">
        <button>提交按钮</button>

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

 <form action="http://127.0.0.1:9001">
        用户名:<input type="text" name="username">
        密码:<input type="password" name="password">

        <input type="radio" name="sex" value="1">man
        <input type="radio" name="sex" value="2">woman

        <input type="checkbox" name="hobby" value="a"> 喝酒
        <input type="checkbox" name="hobby" value="b"> 唱歌
        <input type="checkbox" name="hobby" value="c"> 烫头

<!--        <input type="submit">-->
        <button>提交按钮</button>
        <hr>
        <input type="date">
        <input type="button" value="普通按钮">
        <input type="reset">
        <input type="file">
    </form>

select 标签

        <select name="city" id="" multiple>
            <option value="1">北京</option>
            <option value="2" selected>上海</option>
            <option value="3">天津</option>
        </select>
  • multiple：布尔属性，设置后为多选下拉框，否则默认单选
  • disabled：禁用
  • selected：默认选中该项
  • value：定义提交时的选项值

label标签

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

textarea多行文本

    <textarea name="memo" id="memo" cols="30" rows="10">
      默认内容
    </textarea>

更多推荐

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