html标签用法及相关内容

HTML一些标签的用法

<!DOCTYPE html> <!-- 标签对应关系，这是个标准类型 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

一、<html>标签，里面可以写一些属性，并且只能有一个

　　具体属性不再描述，后期了解了再补

二、<head>标签

　　具体属性不再描述，后期了解了再补

　　1、<meta>标签,是自闭合标签

　　　　功能：编码、跳转、刷新、关键词、描述、IE兼容   

　　　　如：

　　　　　　<meta charset="UTF-8" > #编码

　　　　　　<meta http-equiv="Refresh"  content="3"> #间隔3秒刷新一次

　　　　　　<meta http-equiv="X-UA-Compatible"  content="IE=IE9;IE=IE8"> #兼容浏览器

　　　　　　<meta http-equiv="Refresh"  content="3;Url=http://www.baidu.com" /> #3秒后跳转该网址

　　　　　　<meta name="keywords"  content="土豆，蔬菜，青椒，肉"> #关键词

　　2、<title>标题标签

　　　　功能

　　3、<link>标签

　　　　功能：搞图标icon、引入文件

　　　　如：

　　　　　　<link rel="shortcut icon" href="image/favicon.ico"> # shortcut icon 这个词是专门搞图标的

　　　　　　

　　　　如：

　　　　　　<link rel="stylesheet" href="test.css" />

 　　　　　　

三、<body>标签

　　具体属性不再描述，后期了解了再补

　　<br/>:换行 #建议加上闭合字符/

　　<a>标签：

　　　　超链接: 跳转指定地址

　　　　　　<a href="http://www.baidu.com">百度</a>

　　　　锚: 跳转到指定位置  href="#加指定位置的id"  id不允许重复

　　　　　　<a href="#a3">3</a>

　　　　　　<div id="a3">hello</div>

　　img标签：

　　　　src：图片地址

　　　　title：鼠标放上去显示的文字提示

　　　　style：图片样式

　　　　alt：图片加载失败显示的提示文字

　　　　

　　块级标签：

　　　　p :表示段落 #段落与段落之间有间距

　　　　h1-h6: 表示标题 #字体从大到小，加大加粗

　　　　div : 白板标签

　　行内标签（内敛标签）：

　　　　<span>：白板标签，没有自带样式

　　　　<input>:   输入框　　

　　　　　　　　type属性：

　　　　　　　　　　text：文本

　　　　　　　　　　password：密码类型，加密

　　　　　　　　　　button：普通按钮

　　　　　　　　　　submit：提交

　　　　　　　　　　reset：重置

　　　　　　　　　　radio：单选按钮

　　　　　　　　　　　　多个radio按钮情况下，name属性值相同会互斥，只会选择一个，value可以给后台传不同的值

　　　　　　　　　　checkbox：多选按钮

　　　　　　　　　　　　多个CheckBox按钮情况下，name属性值相同不会互斥

　　　　　　　　　　file：上传文件按钮

　　　　　　　　　　　　file属性依赖form表单中的一个属性enctype,需要在form标签中加上 enctype="multipart/form-data" 后，提交表单才会把上传的文件一点一点传给后台

　　　　　　　　checked属性：

　　　　　　　　　　单选、多选按钮中，checked = "checked",所表示该值默认被选中

　　　　　　　　name属性：

　　　　　　　　　　用户提交后，后台可根据name属性获取到具体的值

　　　　　　　　value属性：

　　　　　　　　　　输入框中的默认值

　　　　　　　　　　按钮上所显示的内容　

　　textarea 文本域标签：

　　　　可提交后台，通过name属性让后台获取值，默认值是写在标签中间<textarea name="textfile">默认值</textarea >

　　select 下拉框标签：

　　　　name：后台获取name值

　　　　size：默认显示几个

　　　　multiple：可多选

　　　　<optgroup>标签：分组

　　　　selected="selected"：默认选中

 <select name="city" size="10" multiple="multiple">
        <optgroup label="一线">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3" selected="selected">广州</option>
            <option value="4">深圳</option>
        </optgroup>
        
    </select>

　　

　　form表单标签：

　　　　action：提交地址

　　　　method：提交方式

　　　　　　GET：提交的数据会在请求头上显示

　　　　　　POST：提交的数据会在请求体中

　　列表标签：

　　　　ul ：点列表

　　　　ol：数字列表

　　　　dl：自定义列表

　　　　

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <dl>
        <dt>自定义标题1</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
        <dt>自定义标题2</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
    </dl>

　　table表格：

　　　　tr：行

　　　　td：列

<table>
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
</table>

 　　　　还有一种写法

　　　　thead 写表头，tbody 写内容

 

　　　　合并单元格：colspan="2" 表示跨两行    rowspan="2" 表示跨两列

　　　　建议用这种写法

<table border="1">
        <thead>
            <tr>
                <th>a</th>
                <th>b</th>
                <th>c</th>
                <th>d</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
        </tbody>
 </table>

　　输出结果：

　　

 

 　　label 标签的用法：

　　　　通过点击label标签，让输入框获取光标

<label for="username">用户名：</label>
<input id="username" type="text" name="user">

　　fieldset标签的用法

　　　　

 <fieldset>
            <legend>登陆</legend>
            <label for="username">用户名：</label>
            <input id="username" type="text" name="user"><br/>
            <label for="password">密码：</label>
            <input id="password" type="text" name="pass">
</fieldset>

　　显示结果：

　　

四、特殊字符

　　空格 ： &nbsp;

　　> ：&gt;

　　< ：&lt;

　　其他还有很多字符，不再记录，直接网上查　　

posted @ 2020-04-08 21:31  路索丶  阅读(266)  评论(0)    收藏  举报