• HTML基础建站知识


                   目前互联网上的网站在展现给用户的界面都是需要用到HTML框架。html应用范围很广泛,不管是WEB前端还是后台都需要懂得HTML的基础;在HTML中经常要接触到的就是标签;那啥是标签呢?极简单的来说就是固有的命令,比如:“立正”“跨立”...之类的命令单词。

                  看一下百度百科怎么说的:

    html标签 
       超文本标记语言(外国语简称:HTML)标记标签通常被称为HTML标签,HTML标签是HTML语言中最基本的单位,HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。
       HTML标签的大小写无关的,例如“主体”<body>跟<BODY>表示的意思是一样的,推荐使用小写。

               经常去写一些比较基础的HTML久了就知道那些是标签单词;那一个基础的html有哪些结构呢?不妨我们来看看HTML的简单结构。

    构成一个网页必须要用的标签和网页基础的结构:

    <html>
    
    <head>
      这里是网页的头部 ... ...
      ...
    </head>
    
    <body>
      这里是网页的主体 ... ...
      ...
    </body>
    
    </html>

    HTML中重要的除了标签之外还有标签里属性也是一样的重要;可以说web前端HTML建站都是用标签和属性码起来的。属性为 HTML 元素提供附加信息。

    HTML 属性
    HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
    属性总是以名称/值对的形式出现,比如:name="value"。
    属性总是在 HTML 元素的开始标签中规定。
    
    属性实例
    HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:
    <a href="http://www.claidx.com">成都小生网络营销培训学院</a>

    这里整理了一些HTML建站常的一些标签单词和属性单词,可以初步了解一下HTML标签和属性的功能

    <html></html>  表示一个标准的html网页, <html>表示网页开始
    </html>表示网页结束
    <head></head>   表示网页的头部
    <title></title>   表示网页的标题
    <body></body>  表示网页主体
    <br/>   (单标签)  换行
    <p></p>    段落(换行、段间距)
    <b></b>  加粗
    <strong></strong>   加粗(强调)
    <i></i>    倾斜
    <em></em>  倾斜(强调)
    h标签       文章标题
    从<h1><h6>
     效果:(改变文字大小、加粗、段落、强调)
    <center></center>   居中
    格式:<标签名称 属性1="值" 属性2=“值”></标签名称>
    <font></font>   文字样式
         属性: color颜色; size 字号;face字体;
    <hr/>  (单标签)
         属性:  color颜色 ; size粗细;  width宽度(长)
    <img />      图片
         属性: src图片路径 ; width宽度  ;height高度; title标题(弹出提示文字); alt     替换文字(图片不能显示时,用文字替代)
    <a></a>    超链接
     属性: href路径(如果href里的路径是一个网址,那么前面一定要带http://)
    
    锚链接:在同一个页面的不同位置之间跳转
    实现方式:
    <p id=”标签”></p>
    <a href=”#标签”>我是标签</a>
    
    <body></body>
         属性: bgcolor   背景颜色;background   背景图片
    
    <embed></embed>   
    属性:   wmode="transparent  flash背景透明
           width     宽度
           height    高度
    <ul></ul>      无序列表
    <li></li>表示列表中的一项
    属性 type    列表样式
    disc    实心圆   circle 空心圆   square方块
    <ol></ol>    有序列表
    属性 type   列表样式
    1  阿拉伯数字;a  小写字母; A  大写字母; i  罗马数字(小写); I 罗马数字(大写)
    <dl></dl>    自定义列表
    列表:<dt></dt>或者<dd></dd>(仅用于自定义列表)
    
    <table></table>   表格
    <tr></tr>表示一行  <td></td>表示一个单元格
    注意:内容写在<td>里面
    属性: border   边框 ; width    宽度 ; height   高度 ; 
    align对齐方式值 :  left左   center中   right右
    bordercolor   边框颜色 bgcolor   背景颜色 background   背景图片
    cellspacing   单元格间距
    <td></td>
    属性:  colspan    跨越(横向)  rowspan   跨越(纵向)
    <iframe></iframe>   框架
     width 宽度     height 高度   frameborder   框架边框
    备注:iframe中调用的内容,不能被搜索引擎识别
    <div></div>      层(盒子)
     CSS      层叠样式表
    CSS属性
     border-style    边框样式 值:solid实线;dotted虚线;double   双实线
     border-color   边框颜色
     border-width    边框粗细
     margin  四周间距
    
    margin:auto   (居中)
    margin-top 上间距;margin-bottom 下间距
    margin-left   左间距;margin-right  右间距
    width     宽度;height    高度
    background-color  背景颜色
    background-image   背景图片 值:  url(图片路径)
    background-repeat   背景重复方式
    值:  no-repeat 不重复; repeat-x  横向重复;repeat-y  纵向重复
    background-position   背景位置
     值: center 中;left 左;right 右;top 上;bottom下或2个表示坐标的数字
    background
    background-size    背景大小
    float 漂浮(浮动)值:left 左;right右
    padding          四周填充
       padding-top          上填充
       padding-left          左填充
       padding-right        右填充
       padding-bottom     下填充
    font 文本
    font-size   字号
       font-family    字体
       color      颜色     
       font-weight:bold   加粗
    text-indent:2em  首行缩进2字符
    text-align    文本对齐方式
             值:   left; center; right
    line-height     行高
    text-decoration   文本样式
                        值:   none   无;underline  下划线
     overline   上划线; line-through   删除线 
    display     显示方式
              值: block 块状显示 ;none   无(隐藏) 
    class 类选择器
    :hover    是一个伪类,鼠标悬停
  • 相关阅读:
    【IT学习资源】2013.10.30
    【转载】 Bash之read命令
    【书本目录】 -- ABS(advanced bash scripts)
    【转载】vSphere的使用
    【转载】 Linux命令 -- tr 转换字符
    【转载】Oracle的日常监控脚本
    【转载】Nginx基础:6.webcache缓存服务
    大学记忆(3)[三国杀(终)]
    大学记忆(1)[记忆之殇]
    大学记忆(2)[计算机]
  • 原文地址:https://www.cnblogs.com/claidx/p/9175076.html
Copyright © 2020-2023  润新知