HTML语言入门（常用标签集合）

HTML

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引擎)

HTML标签

• 我们可以将HTML标签理解为一套规则，一套浏览器认识的规则
• HTML不区分大小写
• 标签之间可以嵌套
• 存在的意义定位，CSS操作，JS操作

1.对于开发者：学习html规则
开发后台程序：写html文件（充当模板的作用）
数据库获取数据，然后替换到html文件指定位置（web框架）
2.本地测试：找到文件路径，直接浏览器打开
pycharm打开测试
3.编写html文件：doctype对应关系
html标签，标签内部可以写属性。——>html标签只能有一个
4.标签的分类：闭和标签 < meta charset=“UTF-8”>
主动闭合标签 < title>Title< /title >

head标签
类似于一个人的大脑，head里面的标签只有title是显示的。

编码

<meta charset="UTF-8">

自动刷新

<meta http-equiv="Refresh"content="3">

自动跳转

<meta http-equiv="refresh"content="3”;url=http:wwwbaidu.com ">

设置网页关键字

<meta name = "keywords" content = “汽车之家">

设置网页描述

<meta name="description"content="看车买车用车">

支持多版本IE

<meta http-equiv="x-ua-compatible" content="IE=IE9;IE=IE8">

body标签 展示出来的标签
图标，&nbsp(空格)；&gt(大于号)；&lt（小于号）
所有的标签分为：
—块级标签： div(白板) ；p标签（段落和段落之间有间距）；H系列（加大加粗）；ol；ul；dl；form ；table

—行内标签：a标签，span（白板），input，label

a标签：超链接标签：跳转

<ahref="http://www.baidu.com">百度一下</a>
自身跳转到百度首页
<ahref="https://www.oldboyedu.com/" target="_blank">老男孩</>
利用target属性中的_blank,可以加载一个新的网页（老男孩）
<a href="#d1">看一下第一天的内容</a>
在本网页跳转到id为d1的标签处

p标签:段落

<p> 为中华之崛起而读书</p>

br标签:换行

<br />

h标签：（h1-h6）标题标签，从大到小

<h1>西安工程大学</h1>

div 与 span：块级白板，行内白板

<div>
     <span></span>
</div>

form标签：表单；内嵌：input家族，select，textarea
直接将数据发送后端的标签；

<form action = "url"  method="GET">

<!-- action=“***（将数据发送的位置）”；-->
<!-- method= “GET || POST”;区别：GET：会将数据添加到URL上；POST：会将数据放在内容里。-->
<!-- enctype= "multipart/form-data",-->
    
    <input type="text" name ="user">
    <input type="password" name="">
    <!--他会把这个打包成一个字典，提交到后台-->
    <!--{'user':'用户输入的用户','paw':'用户输入密码'}-->
    
    <input type="button" value="点击">
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="file" name="over">
    <!--在form中加 enctype = "multipart/form-data"）-->
        
        <span>性别</span>
    <input type="radio" value="男"name="sex">男
    <input type="radio"value="女" name="sex" checked>女
    <!--checked表示默认值 -->
    <!--name必须相同 -->
       
        <span>喜欢吃什么</span>
    <input type="checkbox" value="牛肉面" name="food" checked>牛肉面
    <input type="checkbox" value="剁椒面" name="food" >剁椒面
    <input type="checkbox" value="鸡汤面" name="food" checked>鸡汤面
    <input type="checkbox" value="油泼面" name="food">油泼面
</form>

select,textarea:下拉框，文本框

<form action="url" method="post">
    <select name  ="city" size="5" multiple="multiple">
    <!-- multiple表示可多选 -->
        <option>渭南</option>
        <option>西安</option>
        <option>咸阳</option>
        
        <optgroup label="西安"><!--这是有标题的下拉框，父标题不能选择-->
            <option>临潼区</option>
            <option>未央区</option>
        </optgroup>
    </select>
    <textarea name="txt">多行文本输入默认值</textarea>
</form>

列表：ol(有序)，ul（无序），dl（有标题的）

<div>
    <ol>
        <li>刘德华</li>
        <li>张学友</li>
        <li>郭富城</li>
    </ol>
    
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    
    <dl>
    <dt>目录</dt>
    <dd>水浒</dd>
    <dd>西游</dd>
    <dd>三国</dd>
    </dl>
</div>

table:表格

<table border="1">
    <tr>
        <th>姓名</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>范德彪</td>
        <td>男</td>
    </tr>
    <tr>
        <td>玉芬</td>
        <td>女</td>
    </tr>
</table>

合并单元格

<table border="1">
    <tr>
        <th>姓名</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    <tr>
        <td>马大帅</td>
        <td colspan="2">男</td>
        <td rowspan="2">东北往事</td>
    </tr>
    <tr>      
        <td>玉芬</td>
        <td>女</td>
        <td>1</td>
    </tr>

label: 用于点击文件，使得关联的标签获取光标
通过属性for =“id”，input(的id)关联

<label for="txt1">用户名：</label>
<input type="text" id="txt1" >