第45天:标签的分类和重要属性及常用标签、css介绍及选择器

标签

        标签的分类

        按结构分,html标签可以分为单标签双标签

        单标签

        由一个标签组成。例如:



        双标签

        由开始标签结束标签两部分构成,例如:



        按照属性分,标签还可以分为块级标签行内标签,行内标签又叫做内联标签

        块级标签和行内标签的区别

        块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。

        标签的两个重要属性

        id值

        相当于是人的身份证,一个文档中,id值不能够重复,必须唯一。

        class值

        是可以有多个的,一个标签可以有多个class值,一个class值也可以被多个标签拥有。

        标签的嵌套

  •         标签之间是可以互相嵌套的,标签套标签;
  •         块儿级元素是可以嵌套所有的标签的;
  •         p标签不能够嵌套块儿级元素,但是它可以嵌套行内元素;
  •         行内元素只能嵌套行内元素,不能够嵌套块儿级元素,非写了嵌套,也不报错,只不过是没有效果。

html常用标签

        div标签与span标签

        div标签用来定义一个块级元素,一般用在占位置布局;span标签用来定义内联(行内)元素,一般用在占文本布局。它们并无实际的意义,主要通过CSS样式为其赋予不同的表现。

        img标签

        img标签的写法:

图片未加载成功时的提示

        说明:src中可以写内部的图片地址,也可以写外链的地址 。

        a标签

        a标签的功能

        a标签指的是超链接标签,所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。

        a标签的写法
点我
        a标签的href属性

        href属性指定目标网页地址。该地址可以有几种类型:

  •         绝对URL - 指向另一个站点(比如 href="http://www.jd.com)
  •         相对URL - 指当前站点中确切的路径(href="index.htm")
  •         锚URL - 指向页面中的锚(href="#top") 
        a标签的target属性
  •         _blank表示在新标签页中打开目标网页
  •         _self表示在当前标签页中打开目标网页 

        列表标签

        列表分为无序列表、有序列表和标题列表。

        无序列表

        无序列表的写法

  • 第一项
  • 第二项

        无序列表的type属性

  1. disc(实心圆点,默认值)
  • circle(空心圆圈)
  • square(实心方块)
  • none(无样式
        有序列表
  1. 第一项
  2. 第二项

        有序列表的type属性:

  • 1 数字列表,默认值
  • A 大写字母
  • a 小写字母
  • Ⅰ大写罗马
  • ⅰ小写罗马
        标题列表
标题1
内容1
标题2
内容1
内容2

        表格标签

        表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。

        表格的基本结构
序号 姓名 爱好
1 jason 杠娘
2 Yuan 日天
        表格的属性
  • border: 表格边框.
  • cellpadding: 内边距
  • cellspacing: 外边距.
  • width: 像素 百分比.(最好通过css来设置长宽)
  • rowspan: 单元格竖跨多少行
  • colspan: 单元格横跨多少列(即合并单元格

        form表单

        表单用于向服务器传输数据,从而实现用户与Web服务器的交互,表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等,表单还可以包含textarea、select、fieldset和 label标签。

        表单属性
表单属性

属性

描述

accept-charset

规定在被提交表单中使用的字符集(默认:页面字符集)。

action

规定向何处提交表单的地址(URL)(提交页面)。

autocomplete

规定浏览器应该自动完成表单(默认:开启)。

enctype

规定被提交数据的编码(默认:url-encoded)。

method

规定在提交表单时所用的 HTTP 方法(默认:GET)。

name

规定识别表单的名称(对于 DOM 使用:document.forms.name)。

novalidate

规定浏览器不验证表单。

target

规定 action 属性中地址的目标(默认:_self)。

        表单元素
        基本概念

        HTML表单是HTML元素中较为复杂的部分,表单往往和脚本、动态页面、数据处理等功能相结合,因此它是制作动态网站很重要的内容。

        所以表单一般用来收集用户的输入信息。

        表单工作原理

        访问者在浏览有表单的网页时,可填写必需的信息,然后按某个按钮提交。这些信息通过Internet传送到服务器上。
        服务器上专门的程序对这些数据进行处理,如果有错误会返回错误信息,并要求纠正错误。当数据完整无误后,服务器反馈一个输入完成的信息。    

css及选择器

        css介绍

        CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。

        每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

        css注释

/*这是注释*/

        css的引入方式

        行内样式

        行内式是在标记的style属性中设定CSS样式。

Hello world.

        内部样式

        行内式是在标记的style属性中设定CSS样式。


    
    Title
    
        外部样式

        将css写在一个单独的文件中,然后在页面进行引入。

        基本选择器

        id选择器
#i1 {
  background-color: red;
}
        类选择器
.c1 {
  font-size: 14px;
}
p.c1 {
  color: red;
}
        元素选择器
p {color: "red";}
        通用选择器
* {
  color: white;
}

        组合选择器

        后代选择器

        li内部的a标签设置字体颜色

li a {
  color: green;
}
        儿子选择器
div>p {
  font-family: "Arial Black", arial-black, cursive;
}
        毗邻选择器
div+p {
  margin: 5px;
}
        弟弟选择器
#i1~p {
  border: 2px solid royalblue;
}

        属性选择器

        用于选取带有指定属性的元素

p[title] {
  color: red;
}

        用于选取带有指定属性和值的元素

p[title="213"] {
  color: green;
}

你可能感兴趣的:(css,前端)