Html常用标签

简介: 标题 :可以是h1到h7一段话强制换行是引用一句话是对长文本的引用这两者引用都不用加分号粗体,斜体,下划线,删除线,上标,下标,删除线,设置成打印机字体&nbsp是空格的意思是下划线隔行是地址标签 显示...
<h1>标题</h1> :可以是h1到h7

<p>一段话</p>

<br>强制换行
<q></q>是引用一句话
<blockquote>是对长文本的引用
这两者引用都不用加分号
<b>粗体</b><i>斜体</i><u>下划线</u><s>删除线</s><sup>上标</sup><sub>下标<sub><strike>删除线</strike><tt>设置成打印机字体</tt>
&nbsp是空格的意思
<hr/>是下划线隔行
<address a href="www.baidu.com">是地址标签 显示的是斜线</address>    配合着超链接一起使用
<code>代码标签</code> 显示一行代码  如果是多行代码  要用<pre>标签  而且pre是原样输出保留空格和回车键
逻辑字体:<em>强调文字</em>

                  <strong>字体加重</strong>

     <code>显示编程代码</code>

     <samp>显示示例文字</samp>

     <kbd>显示键盘按键文字</kbd>

     <var>斜体字渲染</var>

     <small>缩小字体</small>

     <big>放大字体</big>

<p>可单独使用,表示换行。但记住标准的强制换行符是<br>

<nobr>永不换行</nobr>

文字及其它对象对齐方式:align=”left/center/right”

<center>居中</center>

在网站的新闻列表中,新闻标题前会出现一个小圆点,而有的是有序号的数字,前者表示无序列表,后者表示有序列表。

无序列表:<ul>

     <li>表项一</li>

     <li>表项二</li>

     <li>表项三</li>

     </ul>

有序列表:

     <ol type="A/a/I/1等">

     <li>表项一</li>

     <li>表项二</li>

     <li>表项三</li>

     </ol>
<pre>预格式化文字(空格等都原样输出)</pre>
<div> 用div划分独立的版块</div>  <div id="hotList">div相当于划分成一个个房间,id就是房间号了
<xmp>文本(与pre标签相似,但xmp连文本中的HTML标签都输出)</xmp>
<img src="图像地址"> 注:img标签只能放在body标签中
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
<a href="http://www.baidu.com"><img src="cn.jpg" alt="风景"></a>  
 注:alt表示图像没有下载完时显示的文字

图像与文字这两者之间的对齐方式:

<img src="#" align="#">文本  注:align的值可以是top(顸),right(右),bottom(底),left(左),middle(中间)默认方式是底部对齐。

图像大小:

<img src="图像地址" alt="图像示显示完时显示的文字" width="400px" height="300px">

图像边框:

<img src="图像地址" border="0px">

设置图像映射图:

<img src="图像地址" usemap="#face">

<map name="face">

<area shape="rect" href="page.html" coords="140,20,280,60">

</map>

注:coords中的坐标范围表示区域,热点区域在dreamweaver软件中很好做,这个标签不常用,可以不看。

超级链接:

<a href="http://www.baidu.com" target="#" title="鼠标指向时显示的文字">百度一下</a>

注:target=”_blank(新窗口中打开),_parent(你窗口中打开),_self(同一窗口中打开),top(在当前的整个浏览器中打开)”

锚点链接:

 同一个页面不同部分的跳转,锚点的写法

            目标元素:<p id="test"></p>     锚点超链接:<a href="#test"></a>
             2.4. 不同页面跳转,同时存在锚点

           目标元素:a.html页面的<div id="test"/>   锚点超链接:<a href="a.html#test"></a>

           (先跳到a.html页面,然后再寻找id=test的元素)
<body>

<a href="#html">单击到锚点链接</a>

<br>

<a name="html">锚点链接</a>

</body>

邮箱链接:

<a href="mailto:bigbao@yahoo.cn">作者的邮箱</a>
Mailto后为收件人地址,cc后为抄送地址,bcc后为密件抄送地址,subject后为邮件的主题,body后为邮件的内容,
如果Mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的每一个都以“&”开头。
下面是一个完整的实例:Mailto:aaa@xxx.com?cc=bbb@yyy.com&bcc=ccc@zzz.com&subject=主题&body=邮件内容

<a href="mailto:yy@imooc.com"?subject="观了不起的盖茨比有感"&body="你好,对此评论有些想法">
对此影评有何感想,发送邮件给我</a>

相对路径:

../表示源泉文件所在目录的上一级目录

../../表示上上级目录,依此类推

表单:

<form   method="传送方式"   action="服务器文件">
<form>

<input type="radio" value="1" name="gender" checked="checked" /> 是单选框 value:提交数据到服务器的值(后台程序PHP使用)
name:为控件命名,以备后台程序 ASP、PHP 使用 checked:当设置 checked=”checked” 时,该选项被默认选中
注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用

举例 创造了一个text框和密码框

<form> 
  姓名:  // name:为文本框命名,以备后台程序ASP 、PHP使用。
  <input type="text" name="myName" value="xx" />    //value是初始化
  <br/>
  密码:
  <input type="password" name="pass" />
</form>


<input type="#">

</form>

例子

<form>
    <label>你对什么运动感兴趣</label>
    <br />
   <label for="male">慢跑</label>
   <br/>
  <input type="radio" name="gender" id="male" />

  <label for="female">登山</label>
  <input type="radio" name="gender" id="female" />
  <br />
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
  <label for="控件id名称">
注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
</form>
注:#可以是"ext,password,checkbox,radio,hidden,submit,reset,button“。radio表示单选框,checkbox表示复选框。
<input   type="submit"   value="提交">   是提交按钮   type是按钮提交   value是按钮上显示的文字  
<input type="reset" value="重置">   重置作用
<textarea>文本域</textarea>  

 <textarea cols="50" rows="10">在这里输入内容...</textarea>   cols是列数  rows是行数

表单中的下拉表:

<form>

<select name="" size="" multiple="multiple"> multiple可以实现多选

<option value="">选项一</option>

<option value="">选项二</option>

<option value="" selected="selected">选项三</option>   是默认选项

</select>

注:<select>里的属性可以由name代表这个下拉表的名称,size表示下拉表可视选项数目,multiple表示可以多选,没有则表示不可以多选,<option>中的selected表示默认选项。

表单中的复选框:

<form>

<input type="checkbox" name=book value="">姓名              

<input type="checkbox" name=book value="" checked>性别

</form>

注:<input>中的checked表示为默认选中状态。

表单中的单选框:

<form>
注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。
<input type="radio" name=reg>姓名

<input type="radio" name=reg checked>性别

</form>

表格:

<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
为th,td单元格添加粗细为一个像素的黑色边框。
<td>erban</td>  是列标题  是 在<tr>里面的  

<table summary="表格简介文本">  摘要的内容是不会在浏览器中显示出来的。
它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,
还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
<table border="1" width="300" height="200" align="right/center/left" >
 <caption>xx</caption> 是表格标题 出现在表格上方
<tr><td align="left/right/center">单元格一</td><td>单元格二<td></tr>

<tr><td>单元格三</td><td>单元格四</td></tr>

</table>

跨多行:<td rowspan=3></td>

跨多列:<td colspan=3></td>

框架:

<html>

<head><title>标题</title></head>

<frameset cols="25%,50%,25%">

<frame src="*.htm" noresize="noresize">

<frame src="*.htm">

<frame src="*.htm">

</frameset>

</html>

注:frameset不能与body并列,所以应去掉body标签,noresize用于设置框架大小是否可调。

隐藏框架边框:<frameset frameborder="no">

                         </frameset>

滚动条:<frameset cols="40%,60%">

              <frame src="#" scrolling="auto/yes/no">

              <frame src="#">

               </frameset>

导航框架:(例)

<a href="http://www.baidu.com " target="myForm1">在另一个文件中设置如下

<frameset>

<frame name="myForm1">

</frameset>

注:scrolling只能在frame标签中用,frameborder在frameset和frame中均可使用。

内联框架:

<iframe></iframe><iframe/>表示,放在<body></body>之间。

移动的文字和图像:

<marquee>将要移动的文字或图片对象</marquee>

例:

<marquee direction="right/up/down">向哪个方向移动</marquee>

<marquee behavior="scroll/slide/alternate">怎么动</marquee>

<marquee scrollamount=25>运动速度</marquee>

<marquee scrolldelay=1000>走一走,停一停</marquee>

<marquee width=200 height=200 bgcolor=green direction=down>限定移动的面积</marquee>

注:scroll:循环移动。slide:只移动一个回合。alternate:来回移动。scrollamount的值越大,速度越快。scrolldelay的值1000代表1000毫秒,等于一秒。

多媒体标记:

<embed src="*.mp3" autostart="true/false" loop="true/false/次数">

loop:循环。autostart:自动播放。

隐藏面板:<embed src="url" hiden="true/false">

面板大小:<embed src="url" height="200" width="200">默认单位是像素px,也可以写成height="200px",width="200px"。

对齐方式align:<embed src="url" align="top/bottom/center.......">

(HTML其它标签属性都不需要记住,因为现在都用CSS代替)
目录
相关文章
|
1月前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
50 5
|
3月前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
53 0
|
12天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
12天前
|
存储 移动开发 前端开发
|
1月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
39 2
|
1月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
33 1
|
2月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
111 1
|
2月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
220 1
|
2月前
|
存储 JavaScript Java
使用NekoHTML解析HTML并提取META标签内容
关于NekoHTML的代码样例,这里提供一个简单的示例,用于展示如何使用NekoHTML来解析HTML文档并提取其中的信息。请注意,由于NekoHTML的具体实现和API可能会随着版本更新而有所变化,以下代码仅供参考。 ### 示例:使用NekoHTML解析HTML并提取META标签内容 ```java import org.cyberneko.html.parsers.DOMParser; import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.dom.NodeList; import org.xml
|
2月前
|
XML JavaScript Java
NekoHTML 是一个基于Java的HTML扫描器和标签补全器
**NekoHTML** 是一个基于Java的HTML扫描器和标签补全器(tag balancer),由J. Andrew Clark开发。它主要用于解析HTML文档,并能够“修正”许多在编写HTML文档过程中常犯的错误,如增补缺失的父元素、自动用结束标签关闭相应的元素,以及处理不匹配的内嵌元素标签等。这使得程序能够以标准的XML接口来访问HTML文档中的信息。 ### NekoHTML的主要特点包括: 1. **错误修正**:能够自动修正HTML中的常见错误,如未闭合的标签等。 2. **DOM树生成**:将HTML源代码转化为DOM(Document Object Model)结构,便

热门文章

最新文章