HTML&CSS
一、表单标签
1.表单标签:所有需要提交到服务器端的表单项必须使用括起来
属性:
action,整个表单提交的位置(可以是一个页面,也可以是一个后台 java 代码)
method,表单提交的方式(get/post/delete……等 7 种)
分析:
Get 与 post 提交方式的区别?【默认提交方式为 get】
Get 提交方式,所有的内容显示在地址栏,不够安全,长度有限制。 Post 提交方式,所有的内容不会显示在地址栏,比较安全,长度没有限制。
2. 文本输入:

type的类型:
text 文本类型 password 密码类型 radio 单选类型 checkbox 多选类型 file 文件上传类型 hidden 隐藏类型
submit 注册类型 reset 注册类型
3.下拉框

北京 上海 4.文本框

二、 CSS 相关的知识
1.什么是CSS?
简单来说就是给界面化妆(给html文件化妆)
a.css全称是Cascading Style Sheets,中文翻译就是层叠样式表,这是一种用来表现HTML或者XML等 文件 样式的计算机语言,拥有对网页对象和模型样式编辑的能力。
b.css拥有很多独有的语言特点,比如说丰富的样式定义,能够自定义想要的页面样式;而且css非常容易使用和 修改 ,只需要找到相应的元素即可修改。
2.CSS 的作用?
HTML:它是整个网站的骨架。 CSS:它是对整个网站骨架的内容进行美化(修饰)
3.CSS 如何使用?
语法和规范
选择器
{ 属性名 1:属性值 1; 属性名 2:属性值 2; 属性名 3:属性值 3; }
4.DIV 的概述
Div 它是一个 html 标签,一个块级元素(单独显示一行)。它单独使用没有任何意义, 必须结合 CSS 来使用。它主要用于页面的布局。 Span 它是一个 html 标签,一个内联元素(显示一行)。它单独使用没有任何意义,必 须结合 CSS 来使用。它主要用于对括起来的内容进行样式的修饰。
5.CSS的引入
有三种方式(外部引入、内部引入、行内引入)
1.内部引入
第二天HTML&CSS

2.行内引入
第二天HTML&CSS
3.外部引入
第二天HTML&CSS
第二天HTML&CSS
优先级问题: 谁离需要修饰的元素近,谁的样式生效,其它的被覆盖掉。(就近原则)
权重:对于标签描述越准确,权重越高,权重高的样式会覆盖低的
html有3样标签属性
id:唯一的 用于表示单个的标签对象
css中会有 id选择器用于对单个的标签进行样式的控制 写法: #id{}
id选择器因为 权重太高,所以很少使用
js中 :documen.getElementById(“id”);仅仅获取单独的标签对象
jq中: $("#id")
name:一般是唯一的(单选框,多选框不是唯一),一般情况和id同名
浏览器端向服务器端发送请求时候,key -> value中的key就是name
get方法: http://www.baidu.com?name=username&pwd=123456
在js中也会用到name 多选框:document.getElementsByName(“name”)//标签属性name名称
document.getElementsByTagName(“div”)//标签名称
返回的是一个js数组
class:类名称
css中的类选择器(.类名称)开头的 可以为所有Class为 类名称的标签做统一样式
js中 document.getElementsByClassName(“类名称”)
6.CSS 的选择器
CSS 基本选择器有三种(元素选择器、类选择器、id 选择器)
1. ID 选择器
#id 属性名{ 属性名 1:属性值 1; 属性名 2:属性值 2; 属性名 3:属性值 3; }

Id 保证唯一。

2. 元素选择器
元素名{ 属性名 1:属性值 1; 属性名 2:属性值 2; 属性名 3:属性值 3; } 如果多个相同的元素设置相同的样式,使用此种方式最为合适。
3. 类选择器
.类名{ 属性名 1:属性值 1; 属性名 2:属性值 2; 属性名 3:属性值 3; }

对多个元素设置相同的样式,此时使用类选择器比较合适。
7. CSS 的浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为 止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在 一样。
请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到界面
第二天HTML&CSS

再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到 包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使 框 2 从视图中消失。 如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左 浮动直到碰到前一个浮动框。
第二天HTML&CSS
如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向 下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它 浮动元素“卡住”:
第二天HTML&CSS
清除浮动
第二天HTML&CSS

我们要对网站进行布局,显示效果希望是上图左边的效果,此时我们会将框 1 和框 2 向 左进行浮动,由于使用了浮动,它们已经脱离了文档流,框 3 会上移至原来框 1 的位置,导 致的现象是框 3 隐藏在框 1 下面。 那么此时,我们可以清除浮动来清除之前框 1 和框 2 使用浮动后造成的问题!
解决办法:
在框 3 的前面定义一个
div(

)
定义 CSS 样式:
#three{ clear:both; }
8.CSS 中如何让块级元素成为内联元素
我们可以使用个 CSS 中的 display 属性(inline)进行设置
去掉超链接的下划线: a{ text-decoration: none; }

让 div 居中 margin:0px auto;

让块级元素成为内联元素 display:inline;

块级元素内容居中 text-align:center;
三、盒子模型
一个盒子中主要的属性就5个:width、height、padding、border、margin。如下:
width和height:内容的宽度、高度(不是盒子的宽度、高度)。
padding:内边距。
border:边框。
margin:外边距。
第二天HTML&CSS
一般的带码
第二天HTML&CSS

相关文章:

  • 2021-12-10
  • 2021-08-21
  • 2021-06-20
  • 2021-12-29
  • 2021-08-22
  • 2022-01-09
  • 2022-02-07
  • 2021-10-22
猜你喜欢
  • 2021-08-01
  • 2021-10-06
  • 2022-01-03
  • 2021-07-12
  • 2022-01-06
  • 2021-08-29
相关资源
相似解决方案