html+css

html+css

1.base 标签

网页中所有连接的基础链接,base标签里面的链接会影响页面中的所有的链接,除非链接设置了协议。

2.form表单

作用:登陆或者注册、上传....
输入用户名 和 密码

2.1 form标签中常用的属性

action 属性 设置将表单中的数据提交给谁

如果action的属性值为空,那么当你点击提交的时候数据就提交到了当前的网页中

method 属性 方法 设置提交给后台的方法 get / post

当method属性值为get的时候,数据被通过url(统一资源定位符)传递到后台当中

当属性值为post的时候,传输数据通过服务器来传输。

当method属性值为空的时候,默认属性值为get。

2.2 form表单组成之一 input

<input type="text" name="user">

type 类型

text 文本类型

  • password 密码
  • submit 提交
  • file 文件
  • hidden 隐藏
  • radio 单选
  • checkbox 多选
  • image 看似是图片,但其实是一个提交按钮
  • reset 重置

css

1.铺网页 三种技术

html 站在语义的角度负责结构
css 站在美学的角度去进行美化
JavaScript 站在用户体验的角度进行交互

2.了解css

什么是css?

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。[1]

层叠样式表 --- 核心关键词

样式表:负责美化

  • 层叠: 样式不会被干掉而只会被覆盖

  • 三个基础选择器的差异

CSS 的使用方式

style属性
<h1 style="css属性"></h1>

style标签 head标签里面

link ---> <link rel="stylesheet" href="style.css">

基础选择器

html标签选择器
通过html标签名来选择元素
  1. 所有的html标签都可以当做选择器
  2. 无论标签藏多深都会被选中
  3. 选择的是所有的标签而不是具体某个标签。所以说我们通过html标签选择器来设置的都是一些共性问题。
id选择器

任何的标签都可以有id属性和属性值(因为id是一个全局属性)。id命名不能随意的命名。
大小写敏感 ,id的名字中可以有数字字母下划线,但是要以字母开头。

驼峰命名法 小驼峰命名 大驼峰命名

testHeader 小驼峰 TestHeader 大驼峰

test-header test_header

但是id名不能够重复

class选择器

① 任何的标签都可以使用class属性(class属性也是一个全局属性) 
② class属性名可以重复使用 
③ 一个class属性中,可以有多个class属性值。

二、综合选择器

  1. 后代选择器 div p
  2. 交集选择器 div.d1
  3. 并集选择器 div,p
  4. 子元素选择器 div>p
  5. 序列选择器 ul li:first-child ul:li:last-child
  6. 相邻兄弟选择器 div + p
  7. 普通兄弟选择器 div ~ p

三、继承和层叠

  1. 继承:父元素的某些css属性会被子元素无条件的继承过去。
    关于文字的css属性都可以进行继承:
    color text- line- font-

  2. 层叠

层叠解决的是css冲突的问题。

比较权重来解决层叠问题。

!important 能够把"单独属性"的权重变为无限大。 尽量少用。

四、块级元素和行内元素

div 块级元素

span 行内元素

块级元素和行内元素的区别:

1. 行内元素部不能够设置宽度和高度。行内元素的宽度和高度是标签内容的宽度和高度。块级元素可以设置宽度和高度。

2. 块级元素会独占一行。而行内元素却部能够独占一行,只能和其他的行内元素共用一行。

3. 如果块级元素不设置宽度,那么块级元素会自动的沾满父元素的全部宽度。

块级元素和行内元素之间的转换

display: inline block inlin-block

原文地址:https://www.cnblogs.com/Astrid-wx/p/7079179.html