阅读模式:

html常用标签

阅读量:12  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:常用的标签字体标签我是字体标签<font> 我是字体标签</font>我是红色<font color="red">我是红色&......

html常用标签

常用的标签

字体标签

我是字体标签

<font>
    我是字体标签
</font>

我是红色

<font color="red">
我是红色
</font>

我是楷体

<font face="楷体">
    我是楷体
</font>

我是4号字体

<font size="4">
    我是4号字体
</font>

font标签时字体标签,它可以用来修改文本的字体、颜色、大小
color属性修改颜色
face属性修改字体
size属性修改文本大小

<font color="red" face="楷体" size="4">这是愷龍的博客</font>

这段代码表示“这时愷龍的博客”这几个字时红色、楷体、大小为4的字

特殊字符

在一般的编程语言中我们都是用转义字符来实现换行,最典型的就是\n
但是在HTML语言中\n是不能实现换行的
我们来看一下如果用\n

我想\n换行

结果:
我想<br>换行

结果:
显示<br>

结果:

所以我们就可以用下面的代码来显示<br>

显示&lt;br&gt;

结果:
标题标签

标题标签是h1到h6
例:显示标题1到标题6

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

结果:
<h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <h7>标题7</h7>

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

结果:
超链接

在网页中所有点击之后可以跳转的内容都是超链接。
例:实现点击“百度”两个字即可跳转百度搜索网页

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

结果:
<a href="www.baidu.com">百度</a> <a href="www.baidu.com" target="_self">百度</a> 表示当前页面 <a href="www.baidu.com" target="_blank">百度</a> 表示打开新页面来实现跳转

a标签是超链接
  href属性设置超链接的地址
  target属性设置哪个目标进行跳转
    _self  表示当前页面,_self表示“相同窗口”。点击链接后,地址栏不变。在网页中没有做设置时,网页链接默认的窗口为_self。
    _blank  _blank是最常见的链接方式,表示超链接的目标地址在新建窗口中打开。

列表标签

列表标签分为:无序列表、有序列表、定义列表
例:把罗志祥、李云迪、吴亦凡、王力宏以无序,列表的方式展示出来

<ul>
    <li>罗志祥</li>
    <li>李云迪</li>
    <li>吴亦凡</li>
    <li>王力宏</li>
</ul>

结果:
<ol> <li>罗志祥</li> <li>李云迪</li> <li>吴亦凡</li> <li>王力宏</li> </ol>

结果:
<ul type="none"> <li>罗志祥</li> <li>李云迪</li> <li>吴亦凡</li> <li>王力宏</li> </ul>

结果:
img标签

例:使用img标签显示一张美女的照片。并修改宽高、和边框属性。(先给大家看一下我的文件目录,方便大家理解)
<img src="../imgs/赵今麦.png">

结果:
<img src="../imgs/赵今麦.png" width="200" height="300">

结果:
<img src="../imgs/赵今麦.png" width="200" height="300"> <img src="../imgs/赵今麦1.png" width="200" height="300"> <img src="../imgs/赵今麦2.png" width="200" height="300"> <img src="../imgs/赵今麦3.png" width="200" height="300">

结果:
<img src="../imgs/赵今麦.png" width="200" height="300" border="1"> <img src="../imgs/赵今麦1.png" width="200" height="300" border="1"> <img src="../imgs/赵今麦2.png" width="200" height="300" border="1"> <img src="../imgs/赵今麦3.png" width="200" height="300" border="1">

结果:
<img src="../imgs/赵今麦8.png" width="200" height="300" border="1" alt="美女找不到"> <img src="../imgs/赵今麦1.png" width="200" height="300" border="1"> <img src="../imgs/赵今麦2.png" width="200" height="300" border="1"> <img src="../imgs/赵今麦3.png" width="200" height="300" border="1">

结果:
table(表格)标签

看下面的代码:

<table>
    <tr>
        <td>第1行第1列</td>
        <td>第1行第2列</td>
        <td>第1行第3列</td>
    </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>

结果:
<table border="1"> <tr> <td>第1行第1列</td> <td>第1行第2列</td> <td>第1行第3列</td> </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>

结果:
<table border="1" width="300" height="300"> <tr> <td>第1行第1列</td> <td>第1行第2列</td> <td>第1行第3列</td> </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>

结果:
<table border="1" width="300" height="300"> <tr> <td align="center"><b>第1行第1列</b></td> <td>第1行第2列</td> <td>第1行第3列</td> </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>

结果:
<table border="1" width="300" height="300"> <tr> <th>第1行第1列</th> <td>第1行第2列</td> <td>第1行第3列</td> </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>

结果:
<table align="center" border="1" width="300" height="300" cellspacing="0"> <tr> <th>第1行第1列</th> <th>第1行第2列</th> <th>第1行第3列</th> </tr> <tr> <th>第2行第1列</th> <th>第2行第2列</th> <th>第2行第3列</th> </tr> <tr> <th>第3行第1列</th> <th>第3行第2列</th> <th>第3行第3列</th> </tr> </table> 跨行跨列表格

有时候我们的数据可能要占两个单元格这样该怎么设置呢?
看下面的代码

<table  border="1" width="500" height="500" cellspacing="0">
    <tr>
        <td colspan="2">1.1</td>
        <td>1.2</td>
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <tr>
        <td>3.1</td>
        <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>4.4</td>
        <td>4.5</td>
    </tr>
    <tr>
        <td>5.1</td>
        <td>5.2</td>
        <td>5.3</td>
        <td>5.4</td>
        <td>5.5</td>
    </tr>
</table>

结果:
<table border="1" width="500" height="500" cellspacing="0"> <tr> <td colspan="2">1.1</td> <td>1.3</td> <td>1.4</td> <td>1.5</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> <td>2.5</td> </tr> <tr> <td>3.1</td> <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>4.4</td> <td>4.5</td> </tr> <tr> <td>5.1</td> <td>5.2</td> <td>5.3</td> <td>5.4</td> <td>5.5</td> </tr> </table>

结果:
<table border="1" width="500" height="500" cellspacing="0"> <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>4.4</td> <td>4.5</td> </tr> <tr> <td>5.1</td> <td>5.2</td> <td>5.3</td> <td>5.4</td> <td>5.5</td> </tr> </table>

结果:
<table border="1" width="500" height="500" cellspacing="0"> <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 colspan="2" rowspan="2">4.4</td> </tr> <tr> <td>5.1</td> <td>5.2</td> <td>5.3</td> </tr> </table>

结果:
iframe框架标签(内嵌窗口)

iframe标签可以在html页面上打开一个小窗口去加载一个单独的页面。
例:

我是一个单独的完整的页面<br></br>
<iframe src="赵今麦.html"/>

这里放一下"赵今麦.html"的源码

<img src="../imgs/赵今麦.png" width="200" height="300" border="1">
<img src="../imgs/赵今麦1.png" width="200" height="300" border="1">
<img src="../imgs/赵今麦2.png" width="200" height="300" border="1">
<img src="../imgs/赵今麦3.png" width="200" height="300" border="1">

结果:
我是一个单独的完整的页面<br></br> <iframe src="赵今麦.html" width="500" height="400"/>

结果:
我是一个单独的完整的页面<br></br> <iframe src="赵今麦.html" width="500" height="400" name="abc"></iframe> <br/> <br/> <ul> <li> <a href="愷龍的网络日志.htm" target="abc" >愷龍的网络日志</a></li> </ul>

结果(我是保存了一个我的博客的页面(kohler19.gitee.io)):

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

表单标签

什么是表单?
  表单就是html页面中用来收集用户的信息的所有元素的结合,然后把这些信息发到服务器
最简单的表单举例:
<form> 用户名称:<input type="text" value="默认值"/> <br/> 用户密码:<input type="password" value="abc"/> <br/> 确认密码:<input type="password" value="abc"/> <br/> 性别:<input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女<br/> 兴趣:<input type="checkbox" checked="checked"/>Java<input type="checkbox"/>C++<input type="checkbox"/>python<br/> 国籍:<select> <option>---请选择国籍---</option> <option selected="selected">中国</option> <option>美国</option> </select><br/> 自我评价:<br/><textarea rows="10" cols="20">默认值</textarea><br/> <input type="reset" value="重置"/> <input type="submit"/> <input type="button" value="按钮"/> <input type="file"/> <input type="hidden"> </form>

结果:

表单格式化

刚才我们制作了简单的表格,但是它的各部分的排列不是很美观,接下来我们就整理一下

<form>
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td>
                用户名称:
            </td>
            <td>
                <input type="text" value="默认值"/> <br/>
            </td>
        </tr>
        <tr>
            <td>
                用户密码:
            </td>
            <td>
                <input type="password" value="abc"/> <br/>
            </td>
        </tr>
        <tr>
            <td>
                确认密码:
            </td>
            <td>
                <input type="password" value="abc"/> <br/>
            </td>
        </tr>
        <tr>
            <td>
                性别:
            </td>
            <td>
                <input type="radio" name="sex" checked="checked"/>男
                <input type="radio" name="sex"/>女<br/>
            </td>
        </tr>
        <tr>
            <td>
                兴趣:
            </td>
            <td>
                <input type="checkbox" checked="checked"/>Java
                <input type="checkbox"/>C++
                <input type="checkbox"/>python<br/>
            </td>
        </tr>
        <tr>
            <td>
                国籍:
            </td>
            <td>
                <select>
                    <option>---请选择国籍---</option>
                    <option selected="selected">中国</option>
                    <option>美国</option>
                </select><br/>
            </td>
        </tr>
        <tr>
            <td>
                自我评价:
            </td>
            <td>
                <br/><textarea rows="10" cols="20">默认值</textarea><br/>
            </td>
        </tr>
        <tr>
            <td><input type="reset"/></td>
            <td align="center"><input type="submit"></td>
        </tr>
    </table>
</form>

结果:
表单提交的细节

例:

<form action="http://www.baidu.com" method="GET">
    <input type="hidden" name="action" value="login"/>
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td>
                用户名称:
            </td>
            <td>
                <input type="text" value="默认值"/> <br/>
            </td>
        </tr>
        <tr>
            <td>
                用户密码:
            </td>
            <td>
                <input type="password" value="abc"/> <br/>
            </td>
        </tr>
        <tr>
            <td>
                确认密码:
            </td>
            <td>
                <input type="password" value="abc"/> <br/>
            </td>
        </tr>
        <tr>
            <td>
                性别:
            </td>
            <td>
                <input type="radio" name="sex" checked="checked"/>男
                <input type="radio" name="sex"/>女<br/>
            </td>
        </tr>
        <tr>
            <td>
                兴趣:
            </td>
            <td>
                <input type="checkbox" checked="checked"/>Java
                <input type="checkbox"/>C++
                <input type="checkbox"/>python<br/>
            </td>
        </tr>
        <tr>
            <td>
                国籍:
            </td>
            <td>
                <select>
                    <option>---请选择国籍---</option>
                    <option selected="selected">中国</option>
                    <option>美国</option>
                </select><br/>
            </td>
        </tr>
        <tr>
            <td>
                自我评价:
            </td>
            <td>
                <br/><textarea rows="10" cols="20">默认值</textarea><br/>
            </td>
        </tr>
        <tr>
            <td><input type="reset"/></td>
            <td align="center"><input type="submit"></td>
        </tr>
    </table>
</form>

结果:
<tr> <td> 用户名称: </td> <td> <input type="text" name="username" value="默认值"/> <br/> </td> </tr>

用户名称输入赵今麦,性别输入女 看一下结果:
https://www.baidu.com/?action=login&username=赵今麦&userpassword=123456&sex=on&country=中国
但是性别没有显示
我们再改一下:

<tr>
            <td>
                性别:
            </td>
            <td>
                <input type="radio" name="sex"  value="男" checked="checked"/>男
                <input type="radio" name="sex" value="女"/>女<br/>
            </td>
        </tr>

结果:
https://www.baidu.com/?action=login&username=赵今麦&userpassword=123&sex=女&country=中国
这次就显示了,也就是说你网页里的单选、复选、(下拉列表中的option标签)都需要添加value属性,以便发送给服务器

表单提交的时候,数据没有发送给服务器的三种情况:   
    1.表单项没有name属性值
    2.单选、复选、(下拉列表中的option标签)都需要添加value属性,以便发送给服务器
    3.表单项不在提交的form标签中(在form标签外的不会发给服务器)
GET请求的特点是:
    1.浏览器地址栏中的地址是action属性[+?+请求参数]
        请求参数的格式是:name=value&name=value
        例:username=赵今麦&userpassword=123456
    2.不安全  所有数据都显示出来,容易泄露
    3.它有数据长度的限制  method="get":此方法可传送 URL 中的表单内容:URL?name=value&name=value。
      注释:如果表单值包含非 ASCII 字符或者超过 100 个字符,您则必须使用 method="post"。
POST请求的特点是:
    1.浏览器地址栏中只有action属性值
    2.相对于GET请求更安全
    3.理论上没有数据长度的限制

其他标签

例:

      <div>div标签1</div>
      <div>div标签2</div>
      <span>span标签1</span>
      <span>span标签2</span>
      <p>p段落标签1</p>
      <p>p段落标签2</p>

结果:

欢迎关注我的公众号,共同学习

分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: