主要的html标签

来源：互联网发布：mac 双系统默认启动编辑：程序博客网时间：2024/05/18 01:47
最近前端旷课太多觉得得补补就照着慕课网的教程突击了一下html和css 可惜了
css没保存内容丢失了只剩下html虽然这也是网上找的然后加了点主要是给自己看的
<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（在当前的整个浏览器中打开）"锚点链接：  2.3. 同一个页面不同部分的跳转，锚点的写法            目标元素：<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代替）
阅读全文
0 0