HTML

最新推荐文章于 2024-10-07 21:52:50 发布

埋首沉迷.

最新推荐文章于 2024-10-07 21:52:50 发布

阅读量141

点赞数 1

分类专栏： Web前端文章标签： HTML 表单标签

本文链接：https://blog.youkuaiyun.com/weixin_45335208/article/details/102952660

版权

Web前端专栏收录该内容

3 篇文章

订阅专栏

HTML

注释

<!-- 在此处写注释 -->

标题标签

<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>

段落标签

<p></p>

加粗标签

<b></b> <strong></strong>

倾斜标签

<i></i> <em></em>

列表标签

无序列表

项目符号：type
disc（默认值）实心圆点	circle 空心圆	square 实心方块	none 取消项目符号

<ul>
 <li>苹果</li>
 <li>香蕉</li>
</ul>

有序列表

项目符号：type
1 默认值	a	A	i	I

<ol type="A">
 <li>柠檬</li>
 <li>桔子</li>
</ol>

自定义列表

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置</dd>
</dl>

盒子标签

<div></div>

文字标签

<span></span>

图片标签

<img src='图片路径' alt='图片不显示替换文本' width='图片原始宽' height='图片原始高' title='图片标题'>

超链接标签

<a href='创建另一个文档链接' target='属性定义网页打开方式' title='鼠标滑过的提示文本'>显示文本</a>
<!--href="http://www.w3school.com.cn/"		链接到W3C网站-->   
<!--href=""		表示链接至本页，相当于刷新-->
<!--href="#"	表示链接至本页，不会刷新页面,但是会改变页面的url，自动在url末尾添加#-->
<!--href="JavaScript：void(0);"	死链，不会造成页面，刷新，也不会改变url，只是有a标签样式-->
<!--target="_self"		默认值，原窗口打卡-->
<!--target ="_blank"	该链接会在新窗口中打开-->
<!--target="_top"		跳出框架，假如页面被固定在框架之内-->

<!--超链接到本页某位置-->
<html>
<body>
    <p>
    <a href="#C3">查看 Chapter 3。</a>
    </p>
    <h2>Chapter 1</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 2</h2>
    <p>This chapter explains ba bla bla</p>
    <h2> <a id="c3">Chapter 3</a></h2>
    <p>This chapter explains ba bla bla</p>
</body>
</html>

特殊符号

字符实体	描述	显示结果
& emsp;	字符空白
& nbsp;	空格
& lt;	小于号	<
& gt;	大于号	>

表格标签

<!--表格-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
        th,td{
            border:1px solid black;
            width:50px;
        }
        table{
            border-collapse:collapse;	<!--合并边框-->
        }
    </style>
</head>
<body>
    <table>			<!--定义表格-->
        <caption>表格名</caption>		<!--表格标题-->
        <thead>		<!--表格头部-->
        <tr>		<!--表格行-->
            <th>name</th>		<!--表格头单元格-->
            <th>age</th>
            <th>sex</th>
        </tr>
        </thead>
        <tbody>		<!--表格身体-->
        <tr>
            <td colspan="3">1</td>		<!--合并行-->
        </tr>
        <tr>
            <td rowspan="2">4</td>		<!--合并列-->
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>8</td>		<!--内容单元格-->
            <td>9</td>
        </tr>
        </tbody>
    </table>
</body>
</html>

表单标签

<!--表单-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>

</head>
<body>
<!--form定义表单 属性action规定向何处提交表单的地址（URL）；method规定在提交表单时所用的 HTTP 方法（默认：GET）；enctype规定被提交数据的编码（默认：url-encoded）；enctype="multipart/form-data"时可上传文件-->
    <form action="" method="post" enctype="multipart/form-data">
<!--fieldset元素组合表单中的相关数据-->
        <fieldset>
            <legend>注册</legend>		<!--legend 为fieldset元素定义标题-->
        <p>
<!--label元素为 input 元素定义标注（标记），"for" 属性可把 label 绑定到另外一个元素，应把 "for" 属性的值设置为相关元素的 id 属性的值-->
            <label for="user">用户名： </label>		
<!--定义用于文本输入的单行输入字段 属性placehoder显示提示文本-->
            <input type="text" id="user" name="user" placehoder="请输入用户名">
        </p>
        <p>
            <label for="password">密&emsp;码：</label>
<!--定义密码字段-->
            <input type="password" id="password" name="password" placehoder="请输入密码">
        </p>
        <p>性&emsp;别：
<!--定义单选按钮 属性name值一样，不然认为多个选题-->
            <input type="radio" id="man" name="sex" value="man">
            <label for="man">男</label>
            <input type="radio" id="woman" name="sex" value="woman">
            <label for="woman">女</label>
            <input type="radio" id="none" name="sex" value="none">
            <label for="none">保密</label>
        </p>
        <p>爱&emsp;好：
<!--定义复选框-->
            <input type="checkbox" id="sing" name="hobby" value="sing">
            <label for="sing">唱歌</label>
            <input type="checkbox" id="dance" name="hobby" value="dance">
            <label for="dance">跳舞</label>
            <input type="checkbox" id="drawing" name="hobby" value="drawing">
            <label for="drawing">画画</label>
        </p>
<!--定义上传文件-->
        <p>上传头像：<input type="file" name="file"></p>
<!--select元素定义下拉列表-->
        <p>地&emsp;址：
            <select name="addr">
                <optgroup label="河北省">
                    <option value="tangshan" selected>唐山市</option>
                    <option value="chengde">承德市</option>
                    <option value="baoding">保定市</option>
                </optgroup>
                <optgroup label="辽宁省">
                    <option value="dalian">大连市</option>
                    <option value="shenyang">沈阳市</option>
                    <option value="yingkou">营口市</option>
                </optgroup>
            </select>
        </p>
<!--textarea元素定义多行输入字段（文本域）-->
        <p>个人简介： <textarea name="text" cols="20" rows="5"></textarea></p>
        <p>
<!--定义提交按钮（提交表单）-->
            <input type="submit" value="提交">
<!--定义重置按钮-->
            <input type="reset" value="重置">
        </p>
        </fieldset>
    </form>
</body>
</html>

内联框架标签

不建议使用

<iframe src='www.baidu.com' width='200px' height='200px' frameborder='1' scrolling='yes'></iframe>
<!--frameborder = “0” / “1” :无边框 / 有边框
scrolling 规定是否显示滚动条 yes/no/auto-->