HTML基础之HTML标签

前端的三把利器

HTML：赤裸的一个人

CSS：华丽的衣服

JS/JavaScript：赋予这个人的行为，也就是动起来

HTML（超文本标记语言）

HTML：HTML是前端页面标签语言，用来写前端的静态页面

　　使用pycharm专业版可以创建一个HTML文件，在写标签时，可写出完整的标签在使用tab键补全一对标签，或者使用<标签名>后自动补齐一对标签，使用ctrl+/ 注释代码

　　一个标准的HTML包含了head头部和body身体的部分，像是人体的头部和躯干部分

　　一个标准的HTML格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

head中一般只保存style样式和title，展示内容全部放在body中

head存放的内容：

<head>
    <meta charset="UTF-8">
    <title>射手座</title>

<!--    rel 标明link引入的是什么类型，href 引入文件的链接-->
    <link rel="shortcut icon" href="http://www.xxxx.cn/logo.jpg">
<!--    stylesheet 样式表 ，引入一个以.css后缀名结尾的文件-->
    <link rel="stylesheet" href="xxx.css">

<!--    引入样式表，一般写在单独的css文件中，但也可写在header中-->
    <style></style>

<!--    引入js文件，src属性表示引入js文件的地址，也可写在body内容的最后面-->
    <script src=""></script>
</head>

主动闭合标签：标签以一对的形式出现，如<span></span>

自闭标签：只有开头标签，没有结尾标签 <meta charset="UTF-8">

h标签：一般是h1-h6,依次变小

<h1></h1> 标题标签h1
<h2></h2> 标题标签h2
<h3></h3> 标题标签h3
<h4></h4> 标题标签h4
<h5></h5> 标题标签h5
<h6></h6> 标题标签h6

块级标签，标签可以无内容，会占满整行HTML的标签，特点是没有任何属性（可通过浏览器-检查-右侧style中查看），可通过css装饰后成为任意一种标签,伪白板标签

<div>这是div标签</div>

行内标签也叫内联标签，没有任何属性，必须要有内容，作用的长度就是内容的长度，可通过css装饰器变成任意一种标签，白板标签

<span>这是span标签</span>

标签属性：写在标签内部<>之前，必须在标签名之后，使用空格分隔，如<input >

<input>

　　文本框标签，包含多个属性，text、password、button、checkbox、radio、file、submit、reset

<!--placeholder提示作用，光标放在输入框文案消失-->
    <input type="text" placeholder="请输入用户名">

<!--value作用，文案不会消失，需手动删除-->
    <input type="text" value="请输入用户名">

<!--输入密码，不展示密码-->
    <input type="password" placeholder="请输入密码">

<!--按钮，点击什么作用都没有，需要绑定js事件-->
    <input type="button" value="登录">

<!--提交按钮，submit单独用没有任何效果，但和form连用，会触发事件-->
    <form method="get">
<!--        onlick绑定事件，传入方法，alert表示弹窗-->
        <input type="button" value="登录" onclick="alert(111)">
        <input type="submit" value="注册">

<!--        file按钮，上传文件-->
        <input type="file">

<!--        重置reset,必须要和form连用，否则没有意义-->
        <input type="text">
        <input type="reset">
    </form>

radio单选框，checkbox复选框

<!--    单选框radio，复选框checkbox-->
    <form method="get">
<!--        当radio使用name值相同时，会发生互斥，实现只能选一个，checked="checked"表示默认选中-->
        <span>男</span><input type="radio" name="sex" checked="checked">
        <span>女</span><input type="radio" name="sex" checked="checked">

<!--        使用checkbox实现多选，checked="checked"表示默认选中-->
        <span>篮球</span><input type="checkbox" checked="checked">
        <span>足球</span><input type="checkbox" checked="checked">
    </form>

　　和后台交互：

　　　　1、form表单方式

　　　　2、异步提交，常用的一种ajax

　　通过form标签来包裹，通常与input标签连用，实现向后端请求数据，form 有method属性，可实现get和post请求，get请求url上挂参数，post提交body中，input中有name属性，用来拼接参数实现接口传参　

<!--form实现向接口传参的一个例子-->
<!--    form可实现get和post请求，action传入接口地址-->
    <form method="get" action="/login">
<!--        每个标签都有name属性，form子层标签的name属性值会组装成k-v参数传给接口，
            如http:.../login/**.html?username=tangyuliang&password=123456-->
        <input type="text" name="username" value="tangyuliang">
        <input type="password" name="password" value="123456">
        <input type="submit" value="登录">
    </form>

<!--    文件类file，如果上传文件一定要在form中添加特殊属性enctype="multipart/form-data"，表示一点点的发给服务端-->
    <form method="get" action="/index" enctype="multipart/form-data">
        <input type="file" name="file">
    </form>

textarea 多行文本标签

<!-- 多行文本 textarea 默认值在标签之间-->
<textarea name="meno">默认值</textarea>

label 标签

<!-- label 标题标签 与input联合运用，增加input的点击范围 可直接点击文字就输入 for：映射到input的id-->
<label for="username">用户名</label>
<input id="username" type="text">

a标签

<!--    a标签,target="_blank"属性 实现新窗口打开地址-->
    <a href="http://www.baidu.com" target="_blank">跳转</a>

img图片标签

<!-- img 图片标签 src：图片的位置 图片跳转通过a标签 alt：当图片加载失败时显示alt的文案 title：鼠标悬浮在图片上显示的文字-->
<a href="http://www.imdsx.cn"><img src="1.png" style="height: 200px; 200px;" alt="html" title="大师兄html"></a>

select标签，实现下拉列表

<!-- select option 设置默认选项：option上增加selected="selected" ，size属性在选择框位置显示多少个  实现多选属性：multiple-->
    <select name="city" size="2" multiple="multiple">
        <option value="1">黑龙江</option>
        <option value="2" selected="selected">辽宁</option>
        <option value="3">北京</option>
        <option value="4">四川</option>
    </select>

<!--    select 使用optgroup实现带分组的下拉列表-->
<select name="city" id="city">
    <optgroup label="黑龙江">
        <option value="3">牡丹江</option>
        <option value="4">哈尔滨</option>
    </optgroup>
    <option value="1">北京</option>
    <option value="2">深圳</option>
</select>

ul、ol 列表标签（不常用）

<!--带黑圆点的列表标签：ul-->
<ul>
    <li>html</li>
    <li>css</li>
    <li>js</li>
</ul>

<!--带序号的列表标签：ol-->
<ol>
    <li>html</li>
    <li>css</li>
    <li>js</li>
</ol>

dl 带层次缩进的列表（常用）

<!--带缩进层次的列表，dt顶格第一层，dd缩进两个字符第二层-->
<dl>
    <dt>黑龙江</dt>
    <dd>哈尔滨</dd>
    <dd>牡丹江</dd>
</dl>

table列表

table 表格标签 thead：表头 th：表头行 tbody：内容 tr：行 td：列 boder：表格的边框 coslpan：td占几列 rowspan：tr占几列

<!--表格标签-->
<table border="1">
<!--    thead：表头，th表头每一列的名字-->
    <thead>
        <th>ID</th>
        <th >请求方式</th>
        <th>状态</th>
<!--        colspan 列合并，colspan="2"表示2个列单元格合并为1个单元格-->
        <th colspan="2">操作</th>
    </thead>

<!--    tbody：表体-->
    <tbody>
<!--        一对tr闭合标签，表示一行数据-->
        <tr>
<!--            td包裹每个数据-->
            <td>1</td>
<!--            rowspan 行合并，colspan="2"表示2个行单元格合并为1个单元格-->
            <td rowspan="2">post</td>
            <td>编辑</td>
            <td>删除</td>
            <td>成功</td>
        </tr>

<!--        第二行数据-->
        <tr>
            <td>2</td>
            <td>编辑</td>
            <td>删除</td>
            <td>成功</td>
        </tr>
    </tbody>
</table>

特殊字符

　　在实际工作中，有些时候希望在页面上展示 <input>这种不被浏览器解析成标签的内容，需要使用转义特殊符号

　　&lt -------- < 小于号

　　&gt--------- > 大于号

　　&nbsp ----- 空格符

    &lth1&gt&lt/h1&gt    ------->    <h1></h1>
    <div>射&nbsp&nbsp手&nbsp&nbsp座</div>