HTML5从入门到精通学习札记(html各种标签及其属性的使用实例)

原创 2018年04月15日 22:32:31
  1. 在每个·HTML标签中不区分大小写
  2. 现在的浏览器都可以自动识别HTML文件,并不要求有< html>标签,也不对该标签进行任何的操作
  3. meta元素提供的信息是用户不可见的,属性有两种:name和http-equiv,其中name属性用于描述网页,以便搜索引擎查找和分类,name设置关键字属性,而在content中定义了具体的关键字内容
  4. content可取的值ALL(表示能搜索当前页面及其链接的网页),Index表示能搜索当前页面,Nofollow(表示不能搜索当前页面的链接接网页),Noindex(表示不能搜索当前页面),None(表示不能搜索当前页面及其连接网页)
  5. 列表分为3类,包括无序列表,有序列表,定义列表,ul无序列表,ol有序列表,dir目录列表,dl定义列表,menu菜单列表。dt,dd定义列表的标记,li列表项目的标记。
  6. 如果要链接到同一级目录下的文件,只需输入链接文档的名称,要链接到下一目录下的文件,输入文件名加/再输入文件名,若要链接到上一级目录中的文件,先输入…/再输入目录名再添加文件名。
  7. 如果不使用< br>或< p>进行显示换行,图像与文字之间的水平距离可以通过hspace参数进行调整。
  8. 图像的提示文字alt作用,当图像未加载时可以显示提示文字,当图像下载玩时,光标在图像上时显示提示文字
  9. 表格的表头标记thead,其中可以设置背景颜色,文字的水平对齐方式,文字的垂直对齐方式。表格的表主体标记tbody,表格的表尾标记tfoot
  10. div元素是用来为HTML文档内大块的内容提供结构和背景的,div起始标签的和结束标签之间的所有内容都是用来构成块的,div经常用到的属性align(标签中的对齐方式),class,style
  11. span是行内元素,span的前后是不会换行的其没有结构的意义。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的第一个HTML页面</title>
    </head>
        <body 
        text="green"
        bbgcolor="black"
        background="img/beijing.jpg"
        link="red"
        alink="green"
        > 
        <a href="http://www.baidu.com">此处为跳转到百度的链接</a>
        <!--标题文字共包含6种文字,其中1号标题最大,6号标题最小-->
        <h1 align="center">标题1</h1><!--设置标题文字居中对齐-->
        <h2 align="right">标题2</h2><!--设置标题文字居右对齐-->
        <h3 align="middle">标题3</h3><!--设置标题文字正中对齐-->
        <h4 align="left">标题4</h4><!--设置标题靠左对齐-->
        <h5>标题5</h5>
        <h6>标题6</h6>
        <!--文字格式标记font的字体大小size共有7种1~7,逐渐增大-->
        &nbsp;&nbsp;&nbsp;&nbsp;<!--在行前添加4个空格 其他特殊符号的表示均以&符号开始-->
        <font size="1" color="blue">1</font><!--设置字体颜色为蓝色-->
        <font size="2"><strong>2</strong></font><!--为字体加粗-->
        <font size="3"><em>3</em></font><!--斜体-->
        <font size="4"><u>4</u></font><!--下划线-->
        <font size="5"><sup>2</sup>5</font><!--上标-->
        <font size="6">6<sub>2</sub></font><!--下标-->
        <font size="7"><strike>7</strike></font><!--删除线效果-->
        <p><font size="5"><nobr>这是一段写在p标签内部的文字,一般情况下,长段落的文字都会被浏览器换行显示,为了前置浏览器不要换行显示需要用到< nobr ></nobr><font></p>
        <!--<pre></pre>标签可以保留原始排版方式的标记-->
        <center>此行文字使用了center标签,将显示在屏幕中间位置</center>
        <blockquote>此处文字使用了向右缩进标记blockquote,标记每使用一次段落向右缩进一次</blockquote>
        <!--网页中输入一个<hr />标记就添加一个默认样式的水平线·-->
        <hr color="crimson"/><!--设置水平线的颜色-->
        <br />
        <hr width="100px" align="center" color="blue"/><!--设置水平线宽度,并让其居中对齐-->
        <p><ruby>这段文字被用来显示文字标注标记样式<rt>此处显示标注</rt></ruby></p>
        <ul type="circle"><!--无序列表,空心圆形开始-->
            <li>张三</li>
            <li>李四</li>
        </ul>
        <ul type="disc"><!--无序列表,实心圆形开始-->
            <li>张三</li>
            <li>李四</li>
        </ul>
        <ul type="square"><!--无序列表,方形实心开始-->
            <li>张三</li>
            <li>李四</li>
        </ul>
        <ol type="I" start="3"><!--type还具有属性值1(数字), A(大写英文),a(小写英文字母),i(小写罗马数字),I(大写罗马数字)-->
        <li>王五</li><!--strat属性用来指示有序列表的初始值-->
        <li>李四</li>
        </ol>
        <br />
        <!--使用定义列表标记dl,dt是既是名词,dd解释-->
        <dl>
            <dt>张三<dd>中学生
            <dt>李四<dd>小学生   
        </dl>
      <!--  使用菜单列表标记menu-->
      <menu>
        <li>红烧日本豆腐</li>
        <li>蒸牛肚</li>
      </menu>
    <!--  使用目录列表dir-->
    <dir>
        <li>李威</li>
        <li>李伟</li>
    </dir>
    <a href="http://www.baidu.com" target="_parent">此超链接上一个窗口打开</a></br>
    <a href="http://www.baidu.com" target="_self">此超链接在同一个窗口打开,与默认相同</a></br>
    <a href="http://www.baidu.com" target="_blank">此超链接新建一个窗口打开</a></br>
    <a href="http://www.baidu.com" target="__top">此超链接在浏览器的整个窗口中打开</a></br>
    <a href="javascript:window.close()">此链接运行javascrit脚本</a><br />
    <a href="mailto:2576363815@qq.com">此超链接发送邮件</a>
    <img src="img/beijing.jpg" width="300px" border="10px" hspace="30px" vspace="20PX" 
        href="www.baidu.com" usemap="picturemap"/><!--添加图片指定宽度和边框以及同文字距离设置图像链接-->
    <map name="picturemap"><!--设置图像热点区域链接shape有circle,rect,poly(多边形)-->
        <area shape="circle" coords="300,1500,20" />
        <div align="middle" style="width: 100px; height: 150px; border: double cornflowerblue; background:center;" >
            这是一个div
        </div>
    </map>
        </body>
    <style type="text/css">/*定义css样式*/
            body{
                background-repeat: no-repeat/*指定背景图片不重复 另外两个属性值repeat-x设置在水平方向上平铺,
                repeat-y设置在炊帚方向 上平铺*/
            }
        </style>
</html>

HTML文件下载地址:html各种标签实例应用下

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/vivi_and_qiao/article/details/79954484

- Redirect printStackTrace() to a String

 import java.io.*; public class TestStack2String {  public static void main(String s[]){   try {    ...
  • wxyxl
  • wxyxl
  • 2001-05-04 14:17:00
  • 711

HTML5+CSS3从入门到精通(2.4G)百度云地址

  • 2016年04月01日 09:03
  • 80B
  • 下载

HTML5从入门到精通

HTML5从入门到精通本文全部来自《HTML5从入门到精通》Faithe Wempen,清华大学出版社。文章内容全为各章要点,纯粹是为方便自己查阅。: HTML5...
  • C_aflte
  • C_aflte
  • 2016-08-11 23:39:50
  • 1428

HTML 5 从入门到精通 高清PDF

  • 2017年08月08日 11:23
  • 1.32MB
  • 下载

HTML5+CSS3从入门到精通(光盘随书源代码和示例完整版663M)

  • 2018年02月26日 14:04
  • 47.33MB
  • 下载

HTML5+CSS3从入门到精通 光盘下载地址,李东博 清华社

  • 2016年04月25日 15:59
  • 246B
  • 下载

HTML5+CSS3+JavaScript网页制作从入门到精通(未来科技)源代码

  • 2017年09月13日 11:29
  • 117B
  • 下载

HTML 5从入门到精通

  • 2018年03月23日 16:52
  • 4.98MB
  • 下载

HTML5从入门到精通(明日科技) 中文pdf扫描版

HTML5从入门到精通系统、全面地讲解了HTML语言及其最新版本HTML5的新功能与新特性,技术新颖实用。书中所有知识点均结合实例进行讲解,方便读者动手实践。同时在每章的最后还设置了习题,通过这些习题...
  • randyjin6
  • randyjin6
  • 2018-04-01 14:01:31
  • 25

HTML5+CSS3从入门到精通书籍配套源码

HTML5+CSS3从入门到精通配套视频讲解227节光盘源码云盘分享:链接:https://pan.baidu.com/s/1nvG5FZz...
  • xushouwei
  • xushouwei
  • 2017-06-11 08:45:58
  • 3627
收藏助手
不良信息举报
您举报文章:HTML5从入门到精通学习札记(html各种标签及其属性的使用实例)
举报原因:
原因补充:

(最多只允许输入30个字)