1-day（HTML标签）

最新推荐文章于 2024-06-20 11:15:00 发布

約禮

最新推荐文章于 2024-06-20 11:15:00 发布

阅读量507

点赞数 1

分类专栏： DayLearn 文章标签： DayLearn

本文链接：https://blog.csdn.net/Bowen90/article/details/77184805

版权

DayLearn 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML

HTML语言：超文本标记语言 — Hypertext Markup Language

IE浏览器是微软开发的
2013-5-6 发布HTML5草案
XHTML 符合xml语法的HTML

排版标签

<p align = "center">代表段落，单独占据一行</p>  
<br>换号标记
<hr width = "50%" color = "red" size = "10">线,单位：像素
<pre>预先格式化，可显示空格</pre>
<div id = "d" align = "center">块级标签，将对象作为块来对待，单独占据一行</div>
<span>也是块级标签，不同点是不换行</span>

字体标签

闫博文

<h1 align = "center">字体标签，h后数字可修改</h1>
<font face = "宋体" size = "1-7" color = "blue">红FF0000绿00FF00</font>

将标签作为文本书写时，如下： <p>

图片标签

相对路径：相对当前页面的路径 ..相对于当前路径的上一级路径 .当前路径
绝对路径： a.以逻辑盘符开始的路径 ---- b.网络路径 http://www.baidu.com/images/2.jpg
border可做相框
title公共属性：提示性文本
align:是指图片和周围文字的相对位置
如下：

<img src = "images/1.jpg" width = "100" height = "100" alt = "美女" border = "10" title = "提示性文本">

超链接

超链接
 回到顶部

 <a href = "out.html" name = "out">超链接</a>
 <a href = "#a">回到顶部</a>

外部链接：链接到一个外部文件
锚链接：链接到本页面或者其他页面的特定位置（如：网页下拉后置顶）

热点问题

热点问题：指对图片的局部区域加超链

清单标签

无序清单：type:取值：disc,square,circle
- 中国
- 美国
- 日本
<ul type = "disc"> <li>中国</li> <li type = square>美国</li> <li>日本</li> </ul>
有序清单：type：取值：1,a,A,i,I
1. 中国
2. 美国
3. 日本
<ul type = "I" start = "10"> <li>中国</li> <li>美国</li> <li>日本</li> </ul>
定义清单： dt:清单标题

第一条
做一个勇敢的人

做一个快乐的人
第二条
做一个勇敢的人

做一个快乐的人

<dl> <dt>第一条</dt> <dd>做一个勇敢的人</dd> <dd>做一个快乐的人</dd> <dt>第二条</dt> <dd>做一个勇敢的人</dd> <dd>做一个快乐的人</dd>

表格标签

刘德华	51	香港	男
郭靖貂蝉	27	汴梁	男
郭靖貂蝉	22	洛阳	女

<table border = "1" width = "500" height = "300" align = "center" cellpadding = "20" cellspacing = "10" bordercolordark = "red" bordercolorlight = "blue" bgcolor = "#ffcccc" background = "images/1.jpg" dir = "rtl"> <tr bgcolor = "#00cc00"> <td valign = "bottom">刘德华</td> <td>51</td> <td>香港</td> <td>男</td> </tr> <tr> <td>郭靖</td> <td>27</td> <td align = "center">汴梁</td> <td>男</td> </tr> <tr> <td>貂蝉</td> <td>22</td> <td>洛阳</td> <td>女</td> </tr> </table>

框架集

<frameset rows = "200,*" bordercolor = "red">
    <frame src = "out.html" noresize scrolling = "no"></frame>
    <frameset cols = "100,*">
        <frame src = "left.html"></frame>
        <frame src = "in.html"></frame>
    </frameset>
</frameset>

分块后属性 noresize控制是否可以拖动
scrolling 是否可以滑动
bordercolor 分框颜色

表单标签

<form>
    姓名：<input type = "text" value = "请输入姓名" size = "50" readonly><br>
    密码：<input type = "password" value = "请输入姓名" size = "50" ><br>
    隐藏框：<input type = "hidden" value = "请输入姓名" size = "50" ><br>
    性别：<input type = "radio" name = "gender" value = "male" checked>男<input type = "radio" name = "gender" value = "female">女<br>
    国籍：<input type = "radio" name = "country" value = "china" checked>中国<input type = "radio" name = "country" value = "american">美国<br>
    爱好：<input type = "checkbox" name = "love" value = "eat" checked>吃饭<input type = "checkbox" name = "love" value = "sleep" checked>睡觉<input type = "checkbox" name = "love" value = "study" checked>学Java<br>
    学历：<select name = "xueli">
                <option value = "大学">大学</option>
                <option value = "高中">高中</option>
                <option value = "小学">小学</option>
         </select><br>
    备注：<textarea rows = "5" cols = "20">留言留言留言</textarea><br>
    <input type = "button" value = "普通按钮" onclick = "alert(this.value)"><br>
    <input type = "submit" value = "提交按钮"><br>
    <input type = "reset" value = "重置按钮"><br>
    <input type = "image" src = "images/1.jpg" width = "80" height = "30"><br>
</form>

readonly :只读无法输入
disabled :点击都不行
value ：文本框内容，传递给服务器的值
multiple:多选
姓名：
密码：
隐藏框：
性别：男女
国籍：中国美国
爱好：吃饭睡觉学Java
学历：大学高中小学
备注：留言留言留言

表单语义化

<fieldset>
    <legend>选填信息</legend>
    姓名：<input type = "text" value = "请输入姓名" size = "50" readonly><br>
</fieldset>
<fieldset>
    <legend>选填信息</legend>
    姓名：<input type = "text" value = "请输入姓名" size = "50" readonly><br>
</fieldset>

<fieldset>标签是添加边框；<legend>标签是添加文字；

选填信息
姓名：

选填信息
姓名：

多媒体标签

<bgsound src = "http://cdn.y.baidu.com/2353657f691b51f88ccc5a301ac88b88.mp3"></bgsound>
<video src = "http://cdn.y.baidu.com/2353657f691b51f88ccc5a301ac88b88.mp3" autostart = "true"></video>

* loop播放次数
* embed播放视频
* video是HTML5最新播放视频
* autostart是否自动开始

http://cdn.y.baidu.com/2353657f691b51f88ccc5a301ac88b88.mp3”>
http://cdn.y.baidu.com/2353657f691b51f88ccc5a301ac88b88.mp3” autostart = “true”>
我来了
我来了
我来了