• 前端基础HTML以及常用的标签


    cs模式:--- c:client  server

    bs模式:---Browser server 

    1、WEB标准的概念及组成

      网页主要有三部分组成:

      a:结构   --  主要标准:XHTML和XML

      b:表现  ---   主要是css

      C:  行为  ----  主要包括对象模型(w3c DOM)、ECMAScript

    2、站点

      目的:规划网站的所有内容和代码

    3、HTML及相关概念

      HTML:超文本标记语言-(Hyper TextMarkup Language)

      XHTML:可扩展超文本标记语言

    4、HTML页面是由标签和属性构成的

      文件主体:就是在web浏览器窗口用户看见的内容

      文件头:用来规定该文件的标题和一些其他属性

    5、标记

      a、<常规标记> 

        <标记 属性="属性值"></标记>    

      b、<空标记>

        <标记 属性="属性值"/>

      说明:写在<>中的第一个单词叫做标签、标记或者元素

        属性和属性值之间用等号,属性值要加上引号包含

        html属性和属性之间是没有先后顺序的!!但是css有!

        空标记没有结束标签:</hr>

    6、HTML常用的标记

      1、文本大小,从1级到6级标题,    一级标题: <h1>内容</h1> ,   h1不是24px,是可变的(其他也是一样,是可变的)

      2、字体及字符实体:

        a、<i></i>和<em></em>:倾斜标记

        b、<b></b>和<strong></strong>:加粗标记

        逻辑风格:em、strong、code、small 。。。让浏览器自己决定,不同浏览器结果不同

        物理风格:b、i、u

        c、<u></u>:给文本加上下划线 ---- 

          <ins></ins>:也是下划线,通常和del标签一起用,表示被插入与被删除的文本

          <del></del>:代表删除文字,出现一个中划线,表示删除文字

        d、<br /> 空标记,用来设置字体换行

        e、<hr />空标记,用做水平线

        f、<sup></sup>用来设置上标字

        g、<sub></sub>用来设置下标字

        h、<p></p>  段落标记,分段显示

      3、字符实体

        a、&nbsp:文字间的空格 ,不换行空格,一般用的是css属性来设置

        b、&gt:左尖括号 ,这个是输出尖括号!!避免有歧义

        c、&lt:  右尖括号

        d、&copy: 备案中图标

      4、常用的元素

        a、<div></div>: 可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,本身不带样式!

          1、div+css切图布局,在html中使用的最多的就是div

          2、通常将网页重构,称为divcss制作

          3、div替代了以前的table标签

          4、通过对div标签设置不同样式,实现我们想要的效果

          5、特性,通常对为设置任何样式的div,独占一行

        b、<span></span>:文本结点 可以是某一小段文本,或是某一个字。

        c、列表

          1、无序列表

          <ul>

            <li>列表项内容</li>

            <li>列表项内容</li>

          </ul>

          2、有序列表 

            <ol>

               <li>列表项内容</li>

              <li>列表项内容</li>

            </ol>

          3、自定义列表

             <dl>

                <dt>名词</dt>

                <dd>解释</dd>

              </dl>

      5、超链接和图片

        a、超链接

         <a href ="目标文件路径及全称/链接地址" alt="替换文本"

          title ="提示文本">链接文本/图片</a>

         其他属性:<a href = "#" target="_blank"></a>:在新页面打开,默认是在当前页面打开

         <a href="#"></a>

        b、插入图片

          <img src="目标文件路径及全称" alt="图片替换文本" title="图片标题">

        这里要注意的是,绝对路径和相对路径!!不用解释

      6、表格

      语法:

        <table>

          <tr>  ##一行

            <td></td>##一列

            <td></td>

          </tr>

        </table>

        数据表格的相关属性:

        1、width = '表格的宽度'

        2、height ="表格的高度"

        3、border ="表格的边框"

        4、bordercolor="边框色"

        5、cellspacing="单元格与单元格之间的间距"  

        6、cellpadding = "单元格与内容之间的空隙"

        7、align ="表格水平对齐方式"   取值:left、right、center

          valign=“垂直对齐” topottommddle

        8、合并单元格属性

          合并列:colspan = "所要合并的单元格列数"

          合并行:rowspan="所要合并的单元格行数"

     

     1 <table width="500" height="300" border="1" cellspacing ='0'>
     2     <tr >
     3         <td colspan="2"></td> 
     4     </tr>
     5     <tr>
     6         <td></td>
     7         <td></td>
     8     </tr>
     9 </table>
    10 
    11 <table width="500" height="300" border="1" cellspacing="0">
    12     <tr>
    13         <td rowspan="2"></td>
    14         <td></td>
    15     </tr>
    16         
    17     <tr>
    18         <td></td>
    19     </tr>
    20 </table>

     

     1 <table height="400" width="600" border="1">
     2         <tr>
     3             <td rowspan="4"></td>
     4             <td colspan="2"></td>
     5         </tr>
     6         <tr>
     7             <td></td>
     8                 <td></td>
     9         </tr>
    10         <tr>
    11             <td></td>
    12                 <td></td>
    13         </tr>
    14         <tr>
    15             <td colspan="2"></td>
    16         </tr>
    17 </table>

     7、表单

      表单的作用:上来收集用户的信息

      1、表单框

        <form name ="表单名称" method="get/post" action=""></from>

        说明:get是用来从服务器上获得数据,post向服务器传递数据。出于安全性考虑,最好使用post传递数据

      2、表单控件

        a、<input type="" name=" " value="" size= " " maxlength=" " />:

          name:表单的名称

          value:默认值

          size  :表单大小

          这些均是由css来实现,一般不用这些属性

        b、文本框:<input type="text" value="默认值"/>

        c、密码框:<input type="password"/>

        d、提交按钮:<input type="submit" value="按钮内容">

        e、重置按钮:<input type="reset" value="按钮内容">

        f.单选框/单选按钮

          <input type="radio" name="ral" />   ##如果一组name相同,那么一组单选框只能选择一个

          <input type="radio" name="ral" checked="checked" />(默认选中;)  

        g.复选框

          <input type="checkbox" name="like" />

          <input type="checkbox" name="like" disabled="disabled" />

          (disabled="disabled" :禁用) (checked="checked" :默认选中)

    有生之年,只诉衷肠不言殇.....
  • 相关阅读:
    bert中的为什么
    ROS+Ubuntu+VSCode
    致我成为社畜的第一年
    SQL实战 11.高频SQL面试题 课程订单分析系列
    SQL实战 10.高频SQL面试题 考试分数系列
    SQL实战 9.高频SQL面试题 网站访客最近登录日期系列
    SQL实战 8.异常的邮件概率 sum、count、round和case when结合
    SQL实战 7刷题通过的题目排名 row_number、 dense_rank 和rank区别
    SQL实战 6.对于employees表中,给出奇数行的first_name
    SQL实战 5.统计salary的累计和running_total
  • 原文地址:https://www.cnblogs.com/dyl01/p/8634496.html
Copyright © 2020-2023  润新知