HTML语言

最新推荐文章于 2022-07-29 13:23:06 发布

Rocky000000

最新推荐文章于 2022-07-29 13:23:06 发布

阅读量685

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/Victory_Lei/article/details/73187730

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

第一个例子：文字标签
需求：在页面上需要显示“Welcome to join us!”这一句话而且字体颜色为蓝色的？

<font style=font:58pt face="Arial, Helvetica, sans-serif" color=blue>
Welcome to join us!
</font>

显示结果如下：

Welcome to join us!

代码详解如下：

<font style=font:58pt face="Arial, Helvetica, sans-serif" color=blue>
Welcome to join us!
</font>

<>代码的第一行标签名属性内容依次是：字号大小什么字体以及颜色
<> 代码第二行文字内容
<> 代码第三行尾标签

第二个例子：img标签
需求：在页面中显示一张名为高圆圆的图片

<img src="../../Desktop/1.jpg" alt="欢迎大家到来" width="400" height="800" border="0" usemap="#Map" title="高圆圆" />

结果显示如下：
这里写图片描述

代码详解如下：
<>代码第一行标签名 src 图片连接的位置
width 图片的宽度
height 图片的高度
alt 提示文本，当src属性是小的时候，alt才会生效
title 当鼠标放在上卖弄会有一个文字提示

第三个例子：表格标签
需求：创建一个学生的成绩登记表单

<table border="2" align="center" width="400" height="300">
<caption><h1>学科成绩统计表<h1></caption>
<tr align="center">
<th>姓名</th>
<th>学科</th>
<th>成绩</th>
</tr>
<tr align="center">
<td rowspan="2">狗娃</td>
<td>音乐</td>
<td>90</td>
</tr>
<tr align="center">
<td>java</td>
<td>60</td>
</tr>
<tr align="center">
<td>狗剩</td>
<td>java</td>
<td>70</td>
</tr>
<tr align="center">
<td>狗蛋</td>
<td>java</td>
<td>80</td>
</tr>
<tr align="center">
<td colspan="2">平均分</td>
<td>70</td>
</tr>
</table>

结果如下图所示：
这里写图片描述

代码详解如下：
table:整张表就用一个table来表示
caption:表的标题
tr:代表表中的一行
td:表中的一个单元格
th:表头，一般用于加粗显示字段名称
border:table标签的一个属性，用来调整表框的宽度
width:调整表的宽度
height:调整表格的高度
align:调整表格的位置
行合并和列合并：
行合并：rowspan
列合并：colspan

第四个例子：下拉列表选择标签
需求：设置一个简单的家庭住址的下拉列表标签，实现选择？
代码如下：

<select name="place">
<option value="beijing">北京</option>
<option value="sahngahi">上海</option>
<option value="guangdong">广东</option>
</select><br />

结果显示如下：

代码详解如下：
下拉选项
option就是一个选项
value表示当前选项的值

第五个例子：转义字符标签
需求：使用转义字符

&lt;h1&gt;标题1&lt;/h1&gt;<br/>
&amp;  <br />
<hr />
NBA篮球&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;赛事火热进行中!<br/>
</hr>
加多宝<sup>&reg;</sup>
<hr />
加多宝<sup>&copy;</sup>
<hr/>
<hr/>

结果如下
这里写图片描述

代码详解如下：

这里写图片描述

第六个例子：超链接的标签
代码如下：

 <a name="top" ></a>
  <a href="http://www.baidu.com" target="_blank">超链接</a><br/>
  <a href="thunder://www.movie.com/shujiaobababa.avi">摔跤吧爸爸_爱奇艺专享用户通道</a><br />
  <a href="mailto:156789090@qq.com">发送邮件</a>
</p>
<hr />
<p><a href="#content1">第一章节</a>

结果显示如下：
这里写图片描述

代码详解如下：
这里写图片描述
两个属性： href:设置这个超链接需要链接的资源
target：设置打开资源的方式
超链接：默认的协议为 file://
协议：
file:// 本地文件协议
http:// 网络上我们一般请求都使用的是htpp://，这个协议是基于请求和相应的】
thunder:// 迅雷下载的协议
mailto: 发送邮件的协议
协议的执行流程：
thunder://www.movie.com/shujiaoba.avi：会将这个超链接分为两个部分
一个是资源地址，一个是协议名称，因为我们在安装每一个软件的时候，每一个软件都会在我们注册表中注册相应的协议，找你的注册表中有哪些软件注册了该协议那个软件注册了，就会打开来那个软件。

第七个例子：应用实战
form与table的混用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head> 
<body>
<table align="center" width="600" height="400" border="2">
<caption> <h1> 今日之星选手报名表<h1></caption>
<form action="" method="get"/>
<tr align="center">
<td>用户名</td>
<td><input type="text" name="username" value="请输入用户名"/></td>
</tr>
<tr align="center">
<td>密码</td>
<td><input type="password" name="password"/></td>
</tr>
<tr align="center">
<td>性别</td>
<td><input type="radio" value="男" name="gender"/>男<input type="radio" value="女" name="gender"/>女</td>
</tr>
<tr align="center">
<td>出生日期</td>
<td>
<head> 
        <script type="text/javascript"> 
            function createSelect(ActionFlag) { 
                var selYear = document.getElementById("tYEAR"); 
                var selMonth = document.getElementById("tMON"); 
                var selDay = document.getElementById("tDAY"); 
                var dt = new Date(); 

                if(ActionFlag == 1) { 
                    MinYear = dt.getFullYear()-20; 
                    MaxYear = dt.getFullYear(); 

                    for(var i = MinYear; i <= MaxYear; i++) { 
                        var op = document.createElement("OPTION"); 
                        op.value = i; 
                        op.innerHTML = i; 
                        selYear.appendChild(op); 
                    } 
                    selYear.selectedIndex = 0; 

                    for(var i = 1; i < 13; i++) { 
                        var op = document.createElement("OPTION"); 
                        op.value = i; 
                        op.innerHTML = i; 
                        selMonth.appendChild(op); 
                    } 
                    selMonth.selectedIndex = dt.getMonth(); 
                } 

                var date = new Date(selYear.value, selMonth.value, 0); 
                var daysInMonth = date.getDate(); 
                selDay.options.length = 0; 

                for(var i = 1; i <= daysInMonth ; i++) { 
                    var op = document.createElement("OPTION"); 
                    op.value = i; 
                    op.innerHTML = i; 
                    selDay.appendChild(op); 
                } 
                selDay.selectedIndex = dt.getDate() - 1; 
            } 
        </script> 
    </head> 
    <body> 
        <select id="tYEAR" size="1" onChange="createSelect()"></select> 
        <select id="tMON" size="1" onChange="createSelect();"></select> 
        <select id="tDAY" size="1" ></select> 
        <script type="text/javascript">createSelect(1);</script> 
    </body> 
</td>
</tr>
<tr align="center">
<td>兴趣</td>
<td><input type="checkbox" name="hobby" value="篮球"/>篮球<input type="checkbox" name="hobby" 
value="足球"/>足球<input type="checkbox" name="hobby" value="乒乓球"/>乒乓球<input type="checkbox"

name="hobby" value="排球"/>排球 </td>
</tr>
<tr align="center">
<td>联系电话</td>
<td><input type="text" name="phoneNumber" value="请输入联系电话"/></td>
</tr>
<tr align="center">
<td>家庭住址</td>
<td>
<select name="place">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option value="guangdong">广东省</option>
<option value="tianjinshi">天津市</option>
<option value="shanxisheng">山西省</option>
<option value="guizhousheng">贵州省</option>
<option value="hunan">湖南省</option>
<option value="hainansheng">海南省</option>
<option value="hubeisheng">湖北省</option>
<option value="jiangsusheng">江苏省</option>
<option value="jiangxisheng">江西省</option>
<option value="zhejiangsheng">浙江省</option>
<option value="henansheng">河南省</option>
<option value="hebeisheng">河北省</option>
<option value="xizang">西藏</option>
<option value="xinjiang">新疆</option>
<option value="xainggang">香港</option>
<option value="aomen">澳门</option>
<option value="shandongsheng">山东省</option>
<option value="anhuisheng">安徽省</option>
<option value="sichaunsheng">四川省</option>
<option value="yunnansheng">云南省</option>
<option value="ningxia">宁夏</option>
<option value="qinghaisheng">青海省</option>
<option value="fujainsheng">福建省</option>
<option value="heilongjiangsheng">黑龙江省</option>
<option value="jilinsheng">吉林省</option>
<option value="qita">其他</option>
</select><br />
    </td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" value="注册"/><input type="reset" value="重置"/></td>
</tr>
</form>
</table>
</body>
</html>

显示结果如下：
这里写图片描述

Rocky000000

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML语言

HTML超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添
复制链接

扫一扫