HTML常用标签

基本的标签

h：<h1>这是一个标题。</h1>
p：<p>这是一个段落 </p>
img：<img src=”图片的来源” alt=”替换文本” title=”提示文本” width=”宽” height=”高”>
a：<a href=”去往的路径” title=”提示文本” target=”_self | _blank”>链接文本</a>

br： 插入一个换行
hr：定义水平线
pre：预格式化标签
span：行内元素，表示一行中的一小段内容，没有具体的语义。

文本格式化标签

em： 定义强调文本（斜体）
strong： 定义html文档语气更为强烈的强调文本（加粗）
sup ： 定义上标文本
sub： 定义下标文本
bdo： 定义文本显示的方向
b： 定义粗体文本
font： 定义文字的字体、尺寸和颜色
i： 定义斜体文本
big： 定义大号字体文本
small： 定义小号字体文本
u： 定义下划线文本

特殊字符

   空格
&lt;    <
&gt;    >
...

列表

无序列表

<ul>
    <li><a href="#">新闻标题一</a></li>
    <li><a href="#">新闻标题二</a></li>
    <li><a href="#">新闻标题三</a></li>
</ul>

有序列表

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

自定义列表

<dl>
    <dt>html</dt>
    <dd>负责页面的结构</dd>

    <dt>css</dt>
    <dd>负责页面的表现</dd>

    <dt>javascript</dt>
    <dd>负责页面的行为</dd>

</dl>

表单

表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：

1、<form>标签 定义整体的表单区域

action属性 定义表单数据提交地址 不写相当于提交本地
method属性 定义表单提交的方式，一般有“get”方式和“post”方式

• post方式： 大量/有敏感信息用post
• get方式： https://www.baidu.com/?username=1523456777&password=12212&gender=0&like=python&like=dance会显示出来

2、<label>标签 为表单元素定义文字标注

• <label for="id"> 实现点击文字激活输入框效果
• 不用<label>标签 直接写文字 也可以显示，只是无法实现激活效果。所以单选框想实现 <label for="id"> 只需要给男加个label标签，然后…

3、<input>标签 定义通用的表单元素

type属性

• type=“text” 定义单行文本输入框
• type=“password” 定义密码输入框
• type=“radio” 定义单选框
• type=“checkbox” 定义复选框
• type=“file” 定义上传文件
• type=“submit” 定义提交按钮
• type=“reset” 定义重置按钮
• type=“button” 定义一个普通按钮
• type=“image” 定义图片作为提交按钮，用src属性定义图片地址（不建议用 可能出现提交两次的bug）
• type=“hidden” 定义一个隐藏的表单域，用来存储值（不在页面上显示）

value属性 定义表单元素的值

• 输入类型的表单控件不需要写value 因为输入内容就是value值
• 单选框和多选框需要写value

name属性 定义表单元素的名称，此名称是提交数据时的键名 必须写

• 所有表单控件都要给name值
• https://www.baidu.com/?username=1523456777&password=12212&gender=0&like=python&like=dance

4、<textarea>标签 定义多行文本输入框

5、<select>标签 定义下拉表单元素

• name属性写在select标签
• value属性写在option标签

<select name="city">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="sz">深圳</option>
 </select>

6、<option>标签 与标签配合，定义下拉表单元素中的选项、

表单实例

<h1>注册表单</h1>
<form action="https://www.baidu.com/">
    <div>
        <label for="username">账号：</label>
        <input type="text" name="username" id="username">
    </div>
    <br>
    <div>
        <label>密码：</label>
        <input type="password" name="password">
    </div>
    <br>
    <div>
        <label>性别：</label>
        <input type="radio" name="gender" value="0">男
        <input type="radio" name="gender" value="1">女
    </div>
    <br>
    <div>
        <label>爱好：</label>
        <input type="checkbox" name="like" value="python">编程
        <input type="checkbox" name="like" value="sing">唱歌
        <input type="checkbox" name="like" value="dance">跳舞
    </div>
    <br>
    <div>
        <label>上传照片：</label>
        <input type="file">
    </div>
    <br>
    <div>
        <lable>个人介绍：</lable>
        <textarea name="introduce" id="" cols="30" rows="3"></textarea>
    </div>
    <br>
    <div>
        <lable>籍贯</lable>
        <select name="city">
            <option value="bj">北京</option>
            <option value="sh">上海</option>
            <option value="sz">深圳</option>
        </select>
    </div>
    <br>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>