浅谈html&css

174 阅读4分钟

今天非常简单的说一下html&css.说的不好还请指正,感谢.


1.HTML

1.基本标签

学习HTML就是学习不同的标签,标签的作用,标签的使用,标签的特点,属性,属性值

在标签上可以添加属性,属性可以帮助更加完善的显示标签.

属性名="属性值" 属性值放在一对引号中,可以是单引号也可以是双引号.

  • 标签的分类:
    • 单标签--自闭合标签
    • 双标签--闭合标签

其中head标签对中的内容是给浏览器看的; body标签对中的内容是给用户看的

  • 标签也可以分为:
    • 行内元素--宽度有自身的内容撑起来,可以和其它行内元素同行显示.不能使用css样式设置宽高
    • 块元素--本身独占一行,前后换行.所有的块元素都可以添加一个属性---align---设置块元素内容的对齐方式.left左对齐|right右对齐|center中间对齐
      • 块元素可以设置宽高
      • 可以嵌套行内元素+块元素+文本

常用的标签:

  • a---超链接标签

    • 属性
      • herf--链接地址.可以是网络上的地址,即绝对地址;也可以是本地地址,即相对地址

      • target--打开方式.有两种打开方式 _self->本页面打开 _blank->新页面打开

      • title--当鼠标悬停在页面上的时候显示的提示字

  • a---锚点链接

    • 在页面中的任意位置定点,当点击某个a标签的时候,跳转到页面中的某一个位置
    • 定点:在标签中添加一个属性--id
    • a锚点链接的herf属性值设为--#+定义的id属性值
  • p---段落标签

    • 内容照常显示,前后换行
  • div---块

    • 内容正常显示,前后换行
  • h1~h6---标题标签

    • 按照权重不同,字体大小依次减小
    • 特点:独占一行,字体加粗
  • span---行内元素,本身没作用,帮助显示不同的样式

  • img---图像标签

    • src属性--图像地址
  • 列表

    • ol---有序列表
    • ul---无序列表
    • li---列表项标记
    • 列表中直接标记只能是li标签,li中可嵌套任意标签
    • 列表标签可添加type属性
  • table---表格标签

    • 先有行,再有列.内容要放在单元格中.
    • tr--行
    • th--表格头单元格,居中加粗
    • td--表格体单元格
    • 属性
      • border--边框宽度
      • width--表格width
      • hight--表格高度
      • bordercolor--边框颜色
      • rowspan--跨行
      • colspan--跨列

2.表单--form标签

  • form的属性
    • action--表单中数据发送的位置
    • method--提交方式 get post
    • enctype--一般不用修改,如果表单中有文件上传,需要修改的multipart/form-data
  • 表单元素|表单域
    • 大部分的表单元素都是通过一个标签定义的input的type属性值的不同,决定表单元素不同的作用
  • input标签--用在form标签内
    • type属性:以下为type属性的属性值,根据属性值的不同,决定表单元素不同的作用
      • text--普通文本框
      • password--密码框加密
      • radio--单选框 ® 一组的单选框只能选择一个name属性值相同
      • checkbox--多选框 ® 默认选中checked
      • file--文件上传修改enctype值multipart/form-data
      • submit--提交
      • button--按钮结合js使用
      • reset--重置
  • textarea--多行文本框
    • placeholder属性:文本框中的提示字
  • select--下拉列表
    • 下拉列表选项--option
    • 默认选中--selected
  • button--标签
    • type属性:
      • button
      • submit
      • reset
  • 属性:
    • name--一个想要收集元素的,并具有提交能力的表单元素,必须定义name属性,后台用来区分前台的唯一
    • disabled--禁用不能修改不能提交
    • readonly--只读不能修改能提交

2.CSS

1.入门

CSS---层叠样式表

定位元素,并修改元素样式

1. 如何定位元素--使用选择器
	a. 基础选择器
	b. 后代选择器
2. 如何使用css语法添加样式
	a. 目的:为某个|某些元素设置样式
	b. 样式:样式名:样式值;
	c. 行内样式表:只作用当前元素
		i. 标签上添加一个属性style="css样式1;样式2;...."
	d. 内部样式表:html页面内部
		i. 在内部head标签中添加一个style标签对,css样式添加到标签对中
	e. 外部样式表
		i. 在外部定义一个css文件,在使用的html页面中引入这个css文件
3. 样式的分类
	a. 尺寸
	b. 背景样式
	c. 文本样式
	d. 浮动
	e. 定位
	f. 盒子模型

2.选择器

  • 基础选择器
    • #id选择器--根据元素的id属性值,匹配到一个元素 § 元素的id-->一个id在一个页面中必须是唯一的
    • .class选择器--通过元素的class属性值,匹配一个或一组元素 § 元素的class属性,值可以重复,可以添加多个值
    • 元素选择器--根据标签名匹配到一个或一组元素
    • *通配符--匹配所有元素 § 清楚浏览器的默认样式|初始页面所有元素的样式
  • 后代选择器
    • 选择器1 选择器2{} 选中这个父元素中的这个子元素