最新HTML与CSS基础知识分享

最新HTML与CSS基础知识分享
  最基础的网页开发语言
 
  全称: Hyper Text Markup Language 超文本标记语言
 
  超文本:
 
  是用超链接的方式,将各种不同空间的文字信息组织在一起的网状文本
 
  标记语言:
 
  由标签构成的语言,标记语言并非编程语言
 
  语法
 
  html文档后缀名为".html" 或者 “。htm”标签分为:围堵标签(有开始标签和结束标签)、自闭合标签(开始标签和结束标签在一起,如
 
  )标签可以嵌套在开始标签中定义可以定义属性。属性由键值对构成,值需要用引号(单双都可)引起来html标签不区分大小写,然而推荐小写
 
  html:html文档的根标签head:头标签,用于指定html文档的一些属性,引入外部的资源title:标题标签body:体标签< !DOCTYPE html>:定义文档标签
 
  注释: <!-- 注释内容 --><h1> 到<h6>:标题标签,字体大小递减<p>:段落标签<br>:换行标签<hr>:展示一条水平线<b>:字体加粗<i>:字体斜体<font>:字体标签(已淘汰)<center>:文本居中
 
  示例:
 
  有序列表:<ol> 加 <li>
 
  无序列表:<ul>加<li>
 
  <a> </a>:定义一个超链接
 
  常用属性:
 
  href:指定访问资源的URL(统一资源定位符)target:指定打开资源的方式:
 
  _self:默认值,在当前页面打开_blank:在空白页面打开
 
  div:每一个div占满一整行,属于块级标签span:文本信息在一行显示,属于行级标签,也叫内联标签
 
  html5中为了提高程序的可读性,提供了一些标签
 
  <header>:一般用在网页头部<footer>:一般用在网页尾部
 
  table:定义表格
 
  width:宽度border:边框cellpadding:定义内容和单元格之间的距离cellspacing:定义单元格之间的距离,如果指定为0,则单元格的线会合为一条bgcolor:背景色align:对齐方式 tr:定义行td:定义单元格th:定义表头单元格caption:表格标题thead:定义表格的头部分tbody:定义表格的体部分tfoot:定义表格的脚部分
 
  表单
 
  概念:用于采集用户输入的数据,用于和服务器进行交互form:用于定义表单,可以定义一个范围,范围代表采集用户数据的范围。
 
  常用属性:
 
  action:指定提交数据的URLmethod:提交数据的方式  表单提交的数据应指定name属性 表单项标签
 
  input:可以通过type属性值,改变元素展示的样式
 
  type属性:
 
  text:文本输入框,默认值
 
  placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息 password:密码输入框radio:单选框
 
  注意
 
  要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一致一般会给每一个单选框提供value属性,指定其被选中后提交的值checked属性,可以指定默认值  checkbox:复选框file:文件选择框hidden:隐藏域,用于提交一些信息按钮:
 
  submit:提交按钮,可以提交表单button:普通按钮image:图片提交按钮   label:指定输入项的文字描述信息select:下拉列表textarea:文本域
 
  Cascading style sheets:层叠样式表
 
  层叠:多个样式可以作用在同一个html元素上,同时生效
 
  功能强大将内容展示和样式控制分离,降低耦合度让分工协作变得更加容易提高开发效率
 
  在标签内使用style属性指定css代码
 
  在head标签内,定义style标签,style标签的标签体内容就是css代码
 
  定义css资源文件,在head标签内,定义link标签,引入外部的资源文件
 
  假设:
 
  有一first.css文件,存放在css文件夹下
 
  可以在html中引入first.css,使其生效
 
  格式:
 
  选择器:筛选具有相似特征的元素
 
  注意:每一个属性需要使用";"分隔,最后一个可以不加
 
  筛选具有相似特征的元素
 
  分类:
 
  基础选择器(优先级:id选择器 > 元素选择器 > 类选择器)
 
  id选择器: #id { }元素选择器():标签名称 { }类选择器: .class { } 扩展选择器
 
  选择所有元素: * { }并集选择器: 选择器1, 选择器2… { }子选择器: 选择器1 选择器2 { } --> 选择器1下的选择器2父选择器: 选择器1 > 选择器2 { } --> 选择器2的父选择器1属性选择器: 元素名称[属性名=“属性值”] { } --> 选择属性名称,属性名=属性值的元素伪类选择器: 元素: 状态 { } --> 选择一些元素具有的状态

推荐阅读