ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

常用标签介绍

2021-11-01 19:04:43  阅读:142  来源: 互联网

标签:常用 -- 标签 介绍 标题 nbsp 跳转 超链接


1. font字体标签

color:颜色
face:字体
size:大小

<!--font 是字体标签
可以通过属性修改文本格式
color属性修改颜色
size属性修改大小
face属性修改字体
-->

<font size="5" face="黑体" color="black">hello world</font>

2. 特殊字符

需用对应的实体名称将其转为实体,常用:
1. <:&lt;
2. >:&gt;
3. 空白字符:&nbsp;

<!--特殊字符需使用对应的实体名称将其转成实体
常用特殊字符:<、>、空白字符
<:&lt;
>:&gt;
空白字符:&nbsp;
-->
hello &lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world

3. 标题标签

1. <h1>--<h6>:h1最大,h6最小
2. 标题属性 align(对齐方式)= "left"		左对齐
							 "center"	居中
							 "right"		右对齐
<!--h1到h6都是标题标签,h1最大,h6最小
align属性设置对齐方式
left:左对齐
center:居中
right:右对齐
-->

<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4 align="left">标题4</h4>
<h5 align="left">标题5</h5>
<h6 align="left">标题6</h6>

4. 超链接

在网页中所有点击之后可以跳转的内容都是超链接
<a href=" " target=" "></a>
1. a 标签就是超链接
2. href 属性设置连接地址
3. target 属性设置跳转目标:_self	表示在当前页面跳转
					   _blank	表示打开新页面进行跳转
<!--在网页中所有点击之后可以跳转的内容都是超链接
使用 a 标签表示
href 属性设置连接地址
target 属性设置跳转目标
    _self 表示当前页面
    _blank 表示打开新页面来进行跳转
-->

<a href="localhost:3306">数据库</a>
<a href="localhost:3306" target="_self">数据库</a>
<a href="localhost:3306" target="_blank">数据库</a>

5. 列表标签

<!--列表标签分为有序列表(order list)和无序列表(unorder list)
ol:有序标签
ul:无序标签
li:列表项
type属性可以修改列表项前面的符号
-->
<ul type="none">
    <li>薛之谦</li>
    <li>毛不易</li>
    <li>李荣浩</li>
    <li>张敬轩</li>
</ul>
<ul>
    <li>薛之谦</li>
    <li>毛不易</li>
    <li>李荣浩</li>
    <li>张敬轩</li>
</ul>
<ol>
    <li>薛之谦</li>
    <li>毛不易</li>
    <li>李荣浩</li>
    <li>张敬轩</li>
</ol>

6. img标签

<!--图片标签,用于显示图片
src属性设置图片路径
alt属性设置未找到图片时显示的信息
相对路径
    .       表示当前文件所在mulu
    ..      表示当前文件所在的上一级目录
    文件名    表示当前文件所在目录文件,相当于 ./文件名

绝对路径
    正确的格式是:http://ip:port/工程名/资源路径
-->
<img src="../imgs/1.jpg" width="1024" height="600"/>

7. table标签

<!--做一个带表头的三行三列的表格,并显示边框
修改表格的宽度、高度、表格的对齐方式、单元格间距

table 标签是表格标签
tr 是行标签
td 是单元格标签
th 是表头标签(即单元格标签设置居中、加粗属性之后的标签)

b 是加粗标签

cellspacing属性设置单元格间距
-->
<table border="5" width="300" height="300" cellspacing="0">
    <tr>
        <td align="center"><b>1.1</b></td>
        <th>1.2</th>
        <th>1.3</th>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>

跨行跨列的实现

<!--新建一个五行,五列的表格,
第一行,第一列的单元格要跨两列,
第二行第一列的单元格跨两行,
第四行第四列的单元格跨两行两列

colspan属性设置跨列
rowspan属性设置跨行
-->

<table border="1" cellspacing="0" width="500" height="500">
    <tr>
        <td colspan="2">1.1</td>
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <tr>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </tr>
    <tr>
        <td>4.1</td>
        <td>4.2</td>
        <td>4.3</td>
        <td rowspan="2" colspan="2">4.4</td>
    </tr>
    <tr>
        <td>5.1</td>
        <td>5.2</td>
        <td>5.3</td>
    </tr>
</table>

8. iframe 框架标签(内嵌窗口)

<!--iframe 标签可以在一个html页面上开辟一个区域显示一个单独的页面
iframe和a标签组合使用的步骤:
1.在iframe标签中使用name属性定义一个名称
2.在a标签中的target属性设置iframe的name属性值
-->

<iframe src="0-标签语法.html" width="500" height="400" name="abc"></iframe>
<ul>
    <li><a href="1.1-font标签.html" target="abc">1.1-font标签</a></li>
    <li><a href="1.2-特殊字符.html" target="abc">1.2-特殊字符</a></li>
    <li><a href="1.3-标题标签.html" target="abc">1.3-标题标签</a></li>
    <li><a href="1.4-超链接.html" target="abc">1.4-超链接</a></li>

</ul>

9. 表单标签

<!--form 标签就是表单
input type="text" 是文本输入框,value值设置文本框的默认值
input type="password" 是密码输入框,value值设置文本框的默认值
input type="radio" 是单选框 通过设置name属性可以进行分组 checked="checked"表示默认选中
input type="checkbox" 是复选框 checked="checked"表示默认选中
input type="reset" 是重置按钮 value属性修改按钮上的文本
input type="submit" 是提交按钮 value属性修改按钮上的文本
input type="button" 是按钮 value属性修改按钮上的文本
input type="file" 是文件上传域
input type="hidden" 是隐藏域,当我们要发送某些信息,而这些信息,不需要用户参与,就可以使用隐藏域(提交的时候同时发送给服务器)


select 标签是下拉列表框
    option 标签是下拉列表框中的选项 selected="selected"表示默认选中

textarea 标签是多行文本输入框(起始标签和结束标签中的内容为默认值)
    rows属性设置行高
    cols属性设置宽度
-->

<form>
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td>用户名称:</td>
            <td><input type="text" value="默认值"/></td>
        </tr>
        <tr>
            <td>用户密码:</td>
            <td><input type="password" value="123456"/></td>
        </tr>
        <tr>
            <td>确认密码:</td>
            <td><input type="password" value="123456"/></td>
        </tr>
        <tr>
            <td>性别:</td>
            <td><input type="radio" name="sex" checked="checked"/>男
                <input type="radio" name="sex"/>女
            </td>
        </tr>
        <tr>
            <td>爱好:</td>
            <td><input type="checkbox" checked="checked"/>java
                <input type="checkbox"/>javascript
                <input type="checkbox"/>c++
            </td>
        </tr>
        <tr>
            <td>国籍:</td>
            <td>
                <select>
                    <option>--请选择国籍--</option>
                    <option selected="selected">中国</option>
                    <option>美国</option>
                    <option>日本</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价:</td>
            <td><textarea rows="10" cols="20">默认值</textarea></td>
        </tr>
        <tr>
            <td><input type="reset" value="重置"></td>
            <td><input type="submit"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td><input type="button" value="按钮"></td>
            <td><input type="file"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
    <input type="hidden" name="abc" value="abcvalue">
</form>

表单提交的细节

<!--
form标签是表单标签
    action属性设置提交的服务器地址
    method属性设置提交的方式GET(默认值)或POST

表单提交的时候,数据没有发送给服务器的三种情况
    1.表单项没有name属性值
    2.单选、复选(下拉列表中的option标签)都需要添加value属性,以便发送给服务器
    3.表单项不在提交的form标签中

GET请求的特点是:
    1.浏览器地址栏中的地址是:action属性[+?+请求参数]
    2.不安全
    3.有数据长度限制

POST请求的特点是:
    1.浏览器地址中只有actions属性值
    2.相对于GET请求要安全
    3.理论上没有数据长度的限制
    -->
<form  action="http://localhost:8080" method="post">
    <h1 align="center">用户注册</h1>
    <input type="hidden" name="action" value="login">
    <table align="center">
        <tr>
            <td>用户名称:</td>
            <td><input type="text" name="username"/></td>
        </tr>
        <tr>
            <td>用户密码:</td>
            <td><input type="password" name="password"/></td>
        </tr>
            <td>性别:</td>
            <td><input type="radio" name="sex" value="男" checked="checked"/>男
                <input type="radio" name="sex" value="女"/>女
            </td>
        </tr>
        <tr>
            <td>爱好:</td>
            <td><input type="checkbox" name="hobby" value="java" checked="checked"/>java
                <input type="checkbox" name="hobby" value="js"/>javascript
                <input type="checkbox" name="hobby" value="cpp"/>c++
            </td>
        </tr>
        <tr>
            <td>国籍:</td>
            <td>
                <select>
                    <option name="country" value="none">--请选择国籍--</option>
                    <option name="country" value="cn" selected="selected">中国</option>
                    <option name="country" value="america">美国</option>
                    <option name="country" value="jp">日本</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价:</td>
            <td><textarea rows="10" cols="20" name="desc"
            ></textarea></td>
        </tr>
        <tr>
            <td><input type="reset" value="重置"></td>
            <td><input type="submit"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td><input type="button" value="按钮"></td>
            <td><input type="file"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</form>

10. 其他标签

<!--
div、span、p标签的演示

div标签       默认独占一行
span标签      它的长度为封装数据的长度
p段落标签      默认在段落的上方或下方各空出一行来(如果已有就不再空

-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
<p>p标签1</p>1
<p>p标签2</p>1

标签:常用,--,标签,介绍,标题,nbsp,跳转,超链接
来源: https://blog.csdn.net/A_JOKER___/article/details/121051798

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有