时间戳

首页 > 技术文章 > 前端——html

前端——html

lizhihang 2020-03-28 22:21 原文

HTML

目录

html文档
html标签
标签分类
head中的标签
body中的基本标签
​    img标签
​    a标签
    ul、ol标签
​    dl标签
    特殊字符
​    表格标签
​    form、input标签
​    select标签
​    textarea标签
​    label标签

html文档

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>  </title>
</head>
<body>

</body>
</html>

html标签

自闭标签	<meta >
非自闭	<a href=''> </a>

标签分类

内敛标签（行内标签）：
	自身不独占一行
	只能嵌套内敛标签
		如：b/i/u/s/button/span/ima/a
块级标签（行外标签）：
	自身独占一行
	可以嵌套内敛标签与某些块级标签
		如：h1~6/br/hr/p/div

head中的标签

<title></title>		定义网页的标题
<meta />		定义网页的一些配置信息

body中的基本标签

<b></b>		加粗
<i></i>		斜体
<u></u>		下划线
<s></s>		删除线

<p></p>		段落标签，属块级标签

<h1></h1>	1级标签
<h2></h2>	2级标签
<h3></h3>	3级标签
<h4></h4>	4级标签
<h5></h5>	5级标签
<h6></h6>	6级标签，均为块级标签

<br/>		换行，块级标签
<hr/>		水平分割线，块级标签

img标签

img图片标签,内敛标签
	<img src='路径' title='鼠标悬浮提示' alt='加载失败提示' width='宽度' height='高度' >

a标签

a超链接标签，内敛标签
	<a href='http://www.baidu.com' target='_blank'>百度</a>
	
	
	属性href：超链接路径
	属性target：是否新开窗口
	    新开窗口：_blank
	    自身窗口：_self

ul、ol标签

ul无序列表标签，块级标签
    <ul typt='none'>
        <li>第一行</li>
	<li>第二行</li>
	<li>第三行</li>
    </ul>
	
ol有序列表标签，块级标签
    <ol type='a' start='3'>
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
    </ol>
	
	
    属性type：决定序列样式，如'1'表示数字序号，'a'表示小写字母序号等等
    属性start：决定序列序号从第几个开始

dl标签

<dl>
    <dt>标题</dt>
    <dd>内容第一行</dd>
    <dd>内容第二行</dd>
    <dd>内容第三行</dd>
</dl>
	
    标题与内容间有缩进

特殊字符

空格：	&nbsp;
小于号： &lt;
大于号： &gt;
&符号： &amp;
......

表格标签

table标签，块级标签
    <table border='1' cellpadding='10' cellspacing='10'>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>爱好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>川普</td>
                <td>55</td>
                <td>吹牛</td>
            </tr>
        </tbody>
    </table>
	
	
    属性border：表格边框厚度
    属性cellpadding：表格中内容与框间距
    属性cellspacing：格与格之间的距离
    <tr></tr>表示一行
    <th></th>表示表头行中的一格
    <td></td>表示非表头行中的一格

form、input标签

form表单标签，块级标签，用于提交用户数据
input标签（自闭），内敛标签，拥有各种type用于各种用户交互

    <form action="数据提交路径">
        用户名：<input type='text'/>
		
        密码：<input type='password'/>
		
        日期：<input type='date'/>
		
        男<input type='radio' name='sex' value='1'/>
        女<input type='radio' name='sex' value='2' checked />
		
        篮球<input type='checkbox' name='hobby' value='a'/>
        足球<input type='checkbox' name='hobby' value='b'/>
        羽毛球<input type='checkbox' name='hobby' value='c' checked/>
		
        注册<input type='submit'/>
		
        重置<input type='reset'/>
		
        <button>普通按钮在form标签中同submit相同</button>
		
        隐藏输入框<input type='hidden'/>
		
        文件上传<input type='file'/>
		
    </form>
	
	
    input中
    属性checked：默认选中
    readonly：针对输入框只读，但数据可提交至后台
    disable：不允许对input标签操作，数据不可提交后台

select标签

select下拉选择框标签,内敛标签
    <select name='city' multiple>
        <option value='1'>北京</option>
        <option value='2'>上海</option>
    </select>
	
	
    属性multiple：允许ctrl多选

textarea标签

textarea多行文本输入框标签，内敛标签
    <textarea name='comment' id='comment' cols='20' rows='10'>
        请输入评论
    </textarea>
	
	
    属性rows：行数（高度）
    属性cols：列数（宽度）
    属性disabled：禁用，不提交数据

label标签

label标识标签，用于对标签进行功能标识
方式1：
    <label for='username'>用户名</label>
    <input type='text' id='username' name='name' value='张三'> 
	
方式2：
    <label>
        密码：<input type='password' name='password' value='123456'>
    </label>

推荐阅读