常见简单标签、有序无序列表属性和表格单元格的合并

网页简介:

协议地址             服务器IP      服务器端口号      资源名称 

htttp(s)://       127.0.0.1      :80                    index.html

http有s的区别是以安全为目标的网页。

html是网页文件的后缀名。

代码介绍:

编码:charset         = utf-8  gbk

关键字 name = “keyword”

注释<!- - 注释的内容 - -> 

<标签名(元素) 属性名 = “属性值”> </标签名>

<a href = “连接(www.baidu.com)” target =””  title=“”>超链接标签</a>

同一文件夹下,“连接”可写网址或可直接写文件名;

低一级文件夹情况:文件夹/需要用的文件.html;

高一级文件夹情况:“../ ”  返回上一级文件夹   ../ 需要用到的文件  “../”可重复叠加返回上一级文件夹。

a 页面跳转

target属性:_blank(跳转页面为新页面) _self(页面在自身页面打开)

title属性:鼠标放上会显示title中的内容

a 锚链接

需要先定义 id

*例如* <a id=top></a> ,则返回处代码需写为 <a href=”#top”></a>。

<a href="#ff" id="top">连接</a>

    在网页中点击“连接”,则会跳转到“需要跳转的本页中的某处”

<h1 id="ff">需要跳转的本页中的某处

        <a href="#top">回到顶部</a>

</h1>

跳转到另一页面的某处,需如下

<a href="(此处为另一页面文件名)#ff" id="top">另一页面的某处</a>

*******************************************************************************

下载则为网页打不开的文件需下载到本机用本机软件查看。

      <a href="123.docx" title="下载">下载</a>

此处为与设置的qq号码发起会话

<a href="tencent://message/?uin=qq号码&Site=400301.com&Menu=yes">

XXXXXXXXX

</a>

*******************************************************************************

<b>加粗标签</b>是行内元素。

<br />换行标签是块元素。

<button>按钮标签</button>

div 

 div是块元素

<div>(容器)标签 </div>  可以嵌套,注意格式!!!

要注意格式以及标签的嵌套

<div>

      <b>

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

      </b>

</div>

h标题标签

h是块元素;<h1>最大标题/h1>到<h6>最小标题</h6>。

i字体倾斜标签

i是行内元素;<i>倾斜字体</i>。

img 图片标签

img是行内元素。

*例如*  <img width="350px" height="400px" src="1.jpg" alt="加载失败">

px是图片长宽的单位(像素)。

src是图片的路径。

alt显示图片加载失败的内容。

width 中有页面所占百分比,以及px为标准的两种方式。

p 段落文字标签

<p>段落文字</p> 是块元素。

在网页中段落文字会受网页宽度自动换行。

<span></span>文档中的节标签

span是行内元素,文字多大span占多大。

<p>eqrww<span>123456789</span>wqrew</p>

---------------------------------------------------------------------------------------------------------------------------------

***快捷键***

ctrl+ Z  撤回    ctrl+ Y 上一步

---------------------------------------------------------------------------------------------------------------------------------

ul无序列表,子标签为li

ul属性:type=disc(实心圆点,默认)  circle(空心圆)  square(实心方框)

ol 有序列表,子标签为li

ol属性:

type = a,A,1,Ⅰ(有序的罗列,由小到大)  reversed(规定列表降序倒序)

*例如*   <ol type="a" reversed="reversed">

style = “List-style-type:属性值”         样式名称:样式的值。样式可以有多个,样式之间由“分号”隔开。

*例如* style=”Border-collapse:separate; Border-spacing:10px 10px”

List-style-type:

属性值

属性描述

none

无标记。

disc

默认。标记是实心圆。

circle

标记是空心圆。

square

标记是实心方块。

decimal

标记是数字。

图片的有序排列

style="List-style-image:url(文件名)"

table表格

子标签为tr(行)  td(列)

属性:

border(边框):单位px,表格边框的粗细。

style:样式可以有多个,样式之间由“分号”隔开。

Border-collapse(边框是否融合):sparate(默认值);collapse(共用边框)

    Border-spacing(边框间距):border-spacing:10px 5px

注意:两单元格横向之间是10px,竖向单元格之间是5px。

 

width,height:1000px

合并单元格

<td> :colspan 向右合并单元格并包括它自己;rowspan向下合并几个单元格,并包括它自己。

注意:向右合并单元格要删除第二列的相邻的一或多个单元格。向下合并要删除下一行的一或多个单元格。若需要内容,则将内容写到合并的“td”中。

<table width="1000px;" border="1px" style="Border-collapse:separate; " >

        <tr>

<!- -colspan 向右合并几个单元格包括他自己- ->

            <td colspan="2">第一第二</td>

            <td>第三</td>

        </tr>

        <tr>

<!- -rowspan 向下合并几个单元格包括他自己- ->

            <td rowspan="2">第一</td>

            <td>第二</td>

            <td>第三</td>

        </tr>

        <tr>

            <td>第二</td>

            <td>第三</td>

        </tr>

    </table>

table的边框属性

cellpadding 属性规定单元边沿与其内容之间的空白。

cellspacing属性规定单元格之间的空白。

align属性规定表格在页面中的位置。(center  left right)

valign 属性规定行的对齐方式。(top bottom middle baseline)

猜你喜欢

转载自www.cnblogs.com/Ice-K/p/10427951.html