当前位置:首页 > 前端技术 > CSS标签(二)

CSS标签(二)

2022年08月06日 09:47:20前端技术4

HTML标签(二)

  1. 列表标签

    1) 无序列表:所谓无序列表就是指列表项间没有顺序,属性有type,用来设置列表符号的类型,属性值为disc(默认,黑色圆)、circle(空心圆)、square(黑色方块)、none(无)

    ​ 标准格式:

     <ul>
         <li>列表1</li>
         <li>列表2</li>
         <li>列表3</li>
     </ul>

​ 2)有序列表:所谓有序列表是指列表项间有顺序要求,属性有type,作用是 设置编号类型,1,a,A,I,I

​ 标准格式:

<ol>
     <li type="1">无序列表1</li>  <!-- 1 表示按照数字排序 -->
     <li type="A">无序列表3</li>  <!-- A 表示按照大写字母排序 -->
     <li type="a">无序列表2</li>  <!-- a 表示按照小写字母排序 -->
     <li type="I">无序列表4</li>  <!-- I 表示按照希腊字母排序 -->
     <li type="i">无序列表4</li>  <!-- i 表示按照希腊字母排序 -->
</ol>

​ 3)定义列表:

​ 标准格式:

<dl>
      <dt>1.标题1</dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
      <dt>2.标题2</dt>   
        <dd>内容3</dd>
        <dd>内容4</dd>
</dl>

2.table表格标签

​ 属性:

​ 1)border:设置表格边框,属性值为像素值(px),默认为0 ;越大越粗。

​ 2)width:设置表格宽度,默认宽度为内容宽度,属性值为像素比或百分比。

​ 3)height:作用是设置表格高度,默认高度为内容的高度,属性值为像素比或百分比。

​ 4)cellspacing:作用是设置单元格的间距,属性值为像素值。

​ 5)cellpadding:作用是设置单元格内容和边框的距离。

​ 6)align:设置表格相对于父元素的水平对齐方式,属性值为left、right、center。


​ tr行标签,属性有

​ 1) height:设置该行的行高,属性值为像素值

​ 2) align:设置该行中内容的水平对齐方式,属性值为left、center、right

​ 3) valign:设置该行中内容的垂直对齐方式,属性值为top、center、bottom


​ td列标签,属性有

​ 1) width:设置该单元格所在列的列宽,属性值为像素值

​ 2) height:设置该单元格所在行的行高,属性值为像素值

​ 3) align:设置该单元格内容的水平对齐方式,属性值为left、center、right

​ 4) valign:设置该单元格内容的垂直对齐方式,属性值为top、center、bottom

​ 5) colspan:合并水平方向上的单元格,格式,colspan=”被合并的单元格的个数”

​ 6)rowspan:合并纵向上的单元格,格式rowspan=”被合并的单元格的个数”

​ 基本结构:

<table border="1px">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
        <!-- 定义3行3列的表格 -->

3.table相关标签:

​ 1)th标签:设置表头单元格,表头单元格就是一种具有特殊效果(加粗、居中)的单元格

​ 2)caption标签:设置表格标题

​ 3)thead标签:设置表格头部

​ 4)tbody标签:设置表格主题

​ 5)tfoot标签:设置表格页脚


介绍几个常用符号:

  1. 空格 : &nbsp;
  2. 小于号:&lt;
  3. 大于号:&gt;
  4. 双引号:&quot;
  5. 版权符号:&copy;
  6. 注册商标:&reg;

​ 2017年8月17日18:44:06

​ Pluto_C


作者:Pluto_C
来源链接:https://blog.csdn.net/pluto_c/article/details/77338233

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/18305.html

标签: css
分享给朋友:

“CSS标签(二)” 的相关文章

css中的@media用法总结

1、head标签中引入 //语法: @media mediatype and | not | only (media feature) { css-code; } //也可以针对不同的媒体使用不同的stylesheets: <!--<link rel="st...

CSS放置显示a标签的下划线

  text-decoration: underline; text-decoration属性规定文本修饰(下划线 underline、上划线 overline、中划线 line-through) 作者:迷豆腐 来源链接:https://blog.cs...

CSS将img图片填满父容器div,自适应容器大小

当一个页面中引入多张图片时候,会碰到图片尺寸不一致,单要求显示成一致的大小,我们直接设置图片尺寸会导致图片变形,这就是我们遇到的问题,看下解决方法: <div> <img src="引入的图片地址" alt=""> </div&...

CSS:水平居中与垂直居中

CSS:水平居中与垂直居中

CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。 水平居中 1、行内元素 行内元素(主要是表现为文字,图片等行内元素)...

css中*的用法

*是代表所有html中的标签 例.写了一个 *{box-sizing:border-box} .span-class{ width:80px; padding:20px; } 结果,span标签的内容宽度是80px,并不是40px...

js修改css样式的方法,js如何设置css样式?js修改css样式的方法

js如何设置css样式?本篇文章就给大家介绍js设置(修改)css样式的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 下面我们就给大家介绍使用javascript是如果设置css样式的。 1、直接设置样式(内联样式) 使...

CSS文字样式

notice:文字样式会被继承 一、常用的文字样式 1、设置文字的颜色    color:red; 2、设置文字的大小  font-size:30px; 3、设置文字的粗细,bold为加粗...

span标签垂直居中显示的正确方法

span标签居中显示的正确方法 方法一: <span style="text-align: center">水平居中</span> <span style="line-height:值为span的高度">垂直居中...

如何使用JS来改变CSS样式

如何使用JS来改变CSS样式 方法: document.getElementById("xx").style.xxx中的所有属性是什么 盒子标签和属性对照 CSS语法(不区分大小写)...

内联式css样式,直接写在现有的HTML标签中

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> &l...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。