程序博客网 > 摩天手无线鼠标 知乎

HTML标签

来源：互联网 发布：摩天手无线鼠标 知乎 编辑：程序博客网 时间：2024/05/17 07:34

HTML标签

1.文档结构标签:主要用来标识文档的基本结构

a) <html></html>:标识HTML文档的起始和终止

b) <head></head>:标识HTML文档的头部区域

c) <body></body>:标识HTML文档的主体区域

2.文本格式标签:主要用来标识文本区块,并附带一定的显示格式

a) <title></title>:表识网页标题

b) <hi></hi>:标识标题文本,其中i表示1~6,分别表示一级、二级等标题

c) <p></p>:标识段落文本

d) <pre></pre>:标识预定义文本

e) <blockquote></blockquote>:标识引用文本

3.字符格式标签:主要用来标识部分文本字符的语义,如加粗/斜体/下划线显示

a) <b></b>:标识强调文本,以加粗效果显示

b) <i></i>:标识引用文本,以斜体效果显示

c) <blink></blink>:标识闪烁文本,以闪烁效果显示(IE浏览器不支持该标签)

d) <big></big>/<small></small>:标识放大/缩小文本,以放大/缩小效果显示

e) <sup></sup>:标识上文本,以上标效果显示

f) <sub></sub>:标识下文本,以下标效果显示

g) <cite></cite>:标识引用文本,以引用效果显示

使用各种字符格式标签显示一个数学方程式的解法

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>字符格式标签</title>
</head>
<body>
<p>针对下面这个一元二次方程:</p>
<p><i>x</i><sup>2</sup>-<b>5</b><i>x</i>+<b>4</b>=0</p>
<p>我们使用<big><b>分解因式法</b></big>来演示解题如下:</p>
<p><small>由:</small>(<i>x</i>-1)(<i>x</i>-4)=0</p>
<p><small>得:</small><br/><i>x</i><sub>1</sub>=1
                     <br/><i>x</i><sub>2</sub>=4</p>
</body>
</html>

 

4.列表标签:在HTML中列表结构可以分为两种类型:有序列表和无序列表.无序列表使用项目符号来标识列表,而有序列表则是用编号来标识列表的项目顺序.

a) <ul><li>...</li></ul>:标识无序列表.<li></li>:标识列表项目

b) <ol><li>...</li></ol>:标识有序列表.<li></li>:标识列表项目

i. 使用无序列表和有序列表分别显示一元二次方程求解的4种方法

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<h1>解一元二次方程</h1>
<p>无序列表列出4种方法:</p>
<ul>
    <li>直接开平方法</li>
    <li>配方法</li>
    <li>公式法</li>
    <li>分解因式法</li>
</ul>
<p>有序列表列出4种方法:</p>
<ol>
    <li>直接开平方法</li>
    <li>配方法</li>
    <li>公式法</li>
    <li>分解因式法</li>
</ol>
</body>
</html>

 

c) <dl><dt>...</dt><dd>...</dd></dl>:自定义列表,包括词条和解释两部分内容.

i. <dl></dl>标识定义列表;<dt></dt>:标识词条;<dd></dd>:标识解释

ii. 使用定义列表显示两个成语的解释

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>列表标签</title>
</head>
<body>
<dl>
    <dt>知无不言,言无不尽</dt>
    <dd>知道的就说，要说就毫无不保留</dd>
    <dt>智者千虑,必有一失</dt>
    <dd>不管多聪明的人,在很多的考虑中,也一定会出现个别错误</dd>
</dl>
</body>
</html>

 

5.链接标签:实现把多个网页联系在一起

a) <a></a>:标识超链接.还可以定义锚点.锚点是一类特殊的超链接,它可以定位带网页中某个具体的位置.例如在下面实例中单击超链接文本,就可以跳转到页面的顶部.

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<spanid="top">底部锚点位置</span>
<divid="box"style="height:2000px;border:solid1px red">撑开浏览器的滚动条</div>
<ahref="#top">单击返回顶部</a>
</body>
</html>

 


6.多媒体标签:主要用于引入外部多媒体文件进行显示.

a) <img></img>:嵌入图像

b) <embed></embed>:嵌入多媒体

c) <object></object>:嵌入多媒体

7.表格标签:用来组织和管理数据.

a) <table></table>:定义表格结构

b) <caption></caption>:定义表格标题

c) <th></th>:定义表头

d) <tr><td>...</td></tr>:<tr></tr>定义表格行;<td>...</td>定义表格单元格

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>表格</title>
</head>
<body>
<tablesummary="使用表格结构显示3行2列数据集"border="1">
    <caption>ASCII字符集</caption>
    <tr>
        <th>十进制</th>
        <th>十六进制</th>
    </tr>
    <tr>
        <td>9</td>
        <td>9</td>
    </tr>
    <tr>
        <td>10</td>
        <td>A</td>
    </tr>
</table>
</body>
</html>

 

8.表单标签:主要用来制作交互式表单.

a) <form></form>:定义表单结构

b) <input/>:定义文本域、按钮和复选

c) <textarea></textarea>:定义多行文本框

d) <select></select>:定义下拉列表

e) <option></option>:定义下拉列表中选择项目

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <title>表单</title>
</head>
<body>
<formaction=""method="post">
    <p>单行文本域:<inputtype="text"/></p>
    <p>密码域:<inputtype="password"/></p>
    <p>多行文本域:<textareaname="textareafield"value=""></textarea></p>
    <p>复选框:<br>复选框1<inputtype="checkbox"name="box1"value=""/>跳舞<br>
                 复选框2<inputtype="checkbox"name="box2"value=""/>唱歌<br>
    </p>
    <p>单选按钮:
        <inputtype="radio"name="radio"value="nan">按钮1
        <inputtype="radio"name="radio"value="nv">按钮2<br>
    </p>
    <p>下拉菜单:
        <selectname="selectlist">
            <optionvalue="1">选项1</option>
            <optionvalue="2">选项2</option>
            <optionvalue="3">选项3</option>
        </select>
    </p>
    <p><inputtype="submit"name="button"id="button"value="提交"/></p>
</form>
</body>
</html>

 

阅读全文
0 0
摩天手无线鼠标 知乎 摩天手无线鼠标 知乎
原创粉丝点击
热门IT博客
九维网络账号注册九维网络账号注册
剑网三网络剧剑网三网络剧
apk源码反编译工具
淘宝红包雨怎么玩
head first java多少钱
gta5ol女角色捏脸数据
海思自动对焦算法
淘宝上怎么开直播
魅蓝note3网络制式
淘宝手机店铺首页尺寸
dearcocoli大连知乎
靠谱助手mac版
域名注册量查询
黄多多心机知乎
怎么登陆阿里云服务器
美工图片
淘宝如何设置优惠券
淘宝上卖衣服利润
阿里云ssl证书
linux tail 指定行
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 壁虎尾巴的作用 壁虎会咬人吗 壁虎能活多久 壁虎有毒吗它咬人吗 壁虎的尾巴有什么作用 壁虎咬人吗有毒吗 被壁虎咬了怎么办 壁虎尿有毒吗 白色壁虎有毒吗 壁虎的尿有毒吗 壁虎的功效与作用 壁虎的尾巴像什么 小壁虎借尾巴原文 小壁虎借尾巴教案 车标是壁虎的是什么车 壁虎为什么会断尾巴 壁虎标志是什么车 壁虎的尾巴断了 壁虎屎是什么样的 小壁虎借尾巴简笔画 小壁虎借尾巴板书设计 蜥蜴和壁虎的区别 小壁虎借尾巴教学设计 车上贴壁虎是什么意思 小壁虎借尾巴ppt 车尾贴壁虎什么意思 壁虎用英语怎么说 汽车后面贴壁虎是什么意思 壁虎车标是什么车 梦见壁虎在墙上爬 车后贴壁虎是什么意思 壁虎贴车尾方法讲究 壁虎养殖前景 小壁虎借尾巴故事图片 屋里有壁虎怎么办 壁虎开关插座怎么样 车后面贴壁虎什么意思 壁虎尾巴断了 家里进了壁虎怎么办 壁虎的尾巴图片 壁虎对人有害吗

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里