前端基础之Html、CSS
Html、css相关
Html
Html结构：
| 标签 | 描述 |
|---|---|
<!DOCTYPE html> |
文档声明 |
<html> |
根元素 |
<head> |
头部 |
<body |
主题 |
常用文本标签：
| 标签 | 描述 | 对应单词 | 主要属性 |
|---|---|---|---|
<meta> |
元信息（在head中） | meta | charset |
<title> |
标题（在head中） | title | / |
<h1 ~ h6> |
标题 | headline | / |
<hr> |
水平线 | Horizontal Rule | size, noshade |
<p> |
段落 | paragraph | / |
br |
换行 | break | / |
<ul> |
无序列表 | Unordered List | type(circle, disc, square) |
<ol> |
有序列表 | Ordered List | type(1, a, A, i, I) |
<li> |
列表项 | List Item | / |
<img> |
图片 | image | src, width, height, title(提示文本), alt(替换文本), border |
<a> |
超链接 | anchor | href, target(_blank, self) |
<table> |
表格 | table | border, width, heiht, cellpadding, cellspacing, bgcolor |
<caption> |
表格头标题 | caption | / |
<th> |
表格标题 | table headline | |
<tr> |
表格行 | table row | align(left, right, center) |
<td> |
单元格 | table data | colspan（横向合并）, rowspan（纵向合并） |
<font> |
字体 | font | colot, size, face |
<b> |
加粗 | bold | / |
<i> |
斜体 | italic | / |
特殊字符标签：
| 符号 | 名称 | HTML页面展示 |
|---|---|---|
| 空格符 | |
|
| < | 小于号 | < |
| > | 大于号 | > |
| © | 版权符 | © |
| ¥ | 元(yen) | ¥ |
表单标签：
| 标签 | 描述 | 对应单词 | 主要属性 |
|---|---|---|---|
<form> |
表单（父标签） | form | action(请求路径), method(请求方式) |
input |
输入框 | input | / |
<select> |
下拉菜单 | select | / |
<textarea> |
文本框 | textarea | / |
关于form请求方式：
get：默认方式，请求的数据会显示在地址栏，不安全但是可以分享链接。
post：提交的数据不在请求路径上追加，使用会多一些
<input>标签的type属性：
| 属性 | 描述 |
|---|---|
text |
文本框（默认） |
password |
密码框 |
radio |
单选按钮（name属性需要相同） |
checkbox |
多选按钮 |
file |
文件 |
submit |
提交按钮 |
reset |
重置按钮 |
hidden |
隐藏 |
image |
图片 |
button |
按钮 |
input的其他属性：
| 属性 | 描述 |
|---|---|
| name | 提交表单时必须提供name属性，并且和后台服务器中的Javabean中的成语变量名一直 |
| value | 设置input标签的默认值。submit、reset和button为按钮显示数据 |
| checked | 单选框或复选框被选中。checked="checked" |
| readonly | 是否只读 |
| disabled | 是否可用 |
| maxlength | 允许输入的最大长度 |
设置为text或password时可以使用属性placeholder设置输入框的显示文本
<select>：
需要设置name属性。
子标签：<option>：
| 属性 | 描述 |
|---|---|
| value | 一般option需要给value这个属性，如果不给，默认会把option的文本内容发送给服务器 |
| selected | 勾选当前列表项 |
| multiple | 如果不写默认是单选，取值为“multiple”表示多选。很少用 |
| size | 可见选项的数目 |
<textarea>：
cols属性：文本域的列数。
rows属性：文本域的行数。
style="resize:none;"可设置不可改变大小
Html5新增属性：
| 值 | 描述 |
|---|---|
| color | 定义拾色器 |
| date | 定义日期字段（带有 calendar 控件） |
| datetime-local | 定义日期字段（带有 calendar 和 time 控件） |
| month | 定义日期字段的月（带有 calendar 控件） |
| week | 定义日期字段的周（带有 calendar 控件） |
| time | 定义日期字段的时、分（带有 time 控件） |
| 定义用于 e-mail 地址的文本字段，如果输入不正确的邮箱地址有验证的功能 | |
| number | 定义带有 spinner 控件的数字字段，该文本框只能输入数字，可以对输入的数字进行加1和减1 |
| search | 定义用于搜索的文本字段，当输入内容的时候，搜索框后边会自动出现一个小×，点击这个小×，可以清除输入的内容。 |
主要标签：div和span
div属于块级元素， 独占一行。
span属于行内元素，可共处一行。
CSS
html中引入方式：
<link rel="stylesheet" type="text/css" href="css文件路径" />
可使用../访问父级路径
选择器：
按标签类型选择（一类标签）：标签类型{ 属性 : 值; }
按ID选择（单个标签）：#标签ID{ }
组合选择器：选择器1, 选择器2{ }
关联选择器（基于标签间关系筛选）：父选择器 后代标选择器{ }
属性选择器（基于属性进行筛选）:选择器[属性名="属性值"]{}
子元素选择器（只能是子元素）：父选择器 > 子选择器{ }
相邻兄弟选择器（同父）：父选择器 + 兄弟选择器{ }
类选择器（基于类进行筛选）:.类名{ }
锚伪类选择器（基于a标签锚点）：选择器:锚伪类选择器{ }
4种锚伪类选择器：
| 伪类选择器 | 状态 |
|---|---|
| :link | 某个html标签未被点击之前的状态 |
| :visited | 鼠标点击之后，松开了 |
| :hover | 鼠标悬浮式 |
| :active | 鼠标点击 但没有松开 |
去除链接下划线：text-decoration: none;
CSS常用样式
边框和尺寸：border、width、height
转换：display：
常用的属性值：
inline：此元素将显示为行内元素（行内元素默认的display属性值）
block：此元素将显为块元素（块元素默认的display属性值）
none：此元素将被隐藏，不显示，也不占用页面空间。
字体：color、line-height
背景：background-color，background-image
background-color： 颜色; 设置元素的背景颜色
background-image : url(图片的路径地址);
background-repeat: 背景平铺方式;
背景平铺方式取值：
no-repeat： 不平铺
repeat-x ： 横向平铺
repeat-y ： 纵向平铺
注意：图片默认是平铺满整个盒子的
盒子模型：
padding：元素的内边距在边框和内容区之间。
border：边框 (border) 是围绕元素内容和内边距的一条或多条线。
margin：围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
盒子模型组成部分：
元素的内容(高度、宽度，即content)、内边距（padding）、边框（border）和外边距（margin）组成 。
盒子模型大小
盒子模型的大小受元素的内容(高度、宽度)、内边距（padding）、边框（border）的影响，不受外边距的影响
设置边距（padding或margin）的方式为上右下左（顺时针转一圈）
定位
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视口本身。
提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
浮动（float）：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
前端基础之Html、CSS的更多相关文章
- 文成小盆友python-num14 － web 前端基础 html ，css, JavaScript
本部分主要内容 html - 基础 css - 基础 一.html 标签 html 文档标签树如下: head 部分 Meta(metadata information) 提供有关页面的元信息,例:页 ...
- 前端基础问题：CSS vertical-align 属性
CSS vertical-align 属性与基线的那些事~ 定义和用法: vertical-align 属性设置元素的垂直对齐方式. vertical-align只对内联元素(inline.inlin ...
- Bigger-Mai 养成计划，前端基础学习之CSS
在标签上设置style属性: background-color: #2459a2; height: 48px; ... 编写css样式: 1. 标签的style属性 2. 写在head里面 style ...
- 前端基础(二)：CSS
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...
- 前端基础问题：CSS居中的几种方式
水平居中 (1)内联元素: text-align: center; 利用 text-align: center :可以实现在块级元素内部的内联元素水平居中. 如果一行中有多个块级元素,可以通过设置块级 ...
- web前端基础学习路线
1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...
- html css 前端基础 学习方法及经验分享
前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于 ...
- HTML+DIV+CSS+JSweb前端基础
HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 (2 ...
- JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}
前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
- 前端基础——css
前端基础——css css的内容主要包括:盒子模型.定位.单位与取值.属性.选择器.
随机推荐
- 课堂测试用javaweb写一个注册界面，并将数据保存到后台数据库（部分完成）
今天我到现在为止,也只完成了数据库的连接,还没有写前台的javascript的检查输入的代码,打算周四前完成. 代码如下: package Dao; import java.sql.Connectio ...
- 【mysql】mysq8.0新特性
一.MySQL8.0简介 mysql8.0现在已经发布,2016-09-12第一个DM(development milestone)版本8.0.0发布.新的版本带来很多新功能和新特性,对性能也得到 ...
- 十七、java内存模型_JVM_JDK_类加载
1.Java内存模型 共享内存模型指的就是Java内存模型(简称JMM),JMM决定一个线程对共享变量的写入时,能对另一个线程可见.从抽象的角度来看,JMM定义了线程和主内存之间的抽象关系:线程之间的 ...
- Linux centos7 sed工具介绍
一.sed上 grep工具功能只能实现查找,不能把查找的内容替换. sed本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行查找.删除.替换字符或字符串.调换字符串位置.直接修改文件内容等 ...
- SpringBoot初试牛刀
新建 Spring Boot 项目常用的两种方式 你可以通过 https://start.spring.io/ 这个网站来生成一个 Spring Boot 的项目. 你可以选择自己喜欢的依赖进行加载到 ...
- 关于pandas增加行时，索引名称的一些问题
学习pandas两天了,关于这个增加行的问题一直困扰着我,测试了几个代码,终于搞通了一点(昨天是因为代码敲错了...) 直接上代码: dates = pd.date_range(',periods=6 ...
- C# 篇基础知识3——面向对象编程
面向过程的结构化编程,例如1972年美国贝尔研究所推出的C语言,这类编程方式重点放在在定函数上,将较大任务分解成若干小任务,每个小任务由函数实现,分而治之的思想,然而随着软件规模的不断扩张,软件的复杂 ...
- CBC加密原理及攻击
原理基于分组加密加密过程 Plaintext:明文,待加密的数据.IV:用于随机化加密的比特块,保证即使对相同明文多次加密,也可以得到不同的密文,初始向量,用来与第一块的明文异或运算.Key:被一些如 ...
- UVALive 3231 网络流
题目要求给m个任务分配给n个机器,但最后任务量最多的那个机器的任务量尽量少,利用最大流,在最后的汇点那里设置关卡,二分结果,把机器到最终汇点的容量设置为该值,这样就达到题目条件,这样跑最大流 还能把m ...
- Django（十七）：静态文件、中间件
一.静态文件 参考:https://www.cnblogs.com/jiajiaba/p/10584329.html 参考:https://docs.djangoproject.com/zh-hans ...