标题
HTML基础强化
(1)HEAD区元素:不会在页面上留下直接的内容,是与页面相关的一些资源与信息描述等等 meta,title,style,link,script,base
(2)BODY区元素:直接出现在页面上的,因此元素相对丰富
div
万能的元素,语义并不明确
section/article/aside/header/footer
有明确含义的区域
p
比较特殊的标签,表示一个段落,连续的两个< p>标签中间是有间距的,不是紧挨在一起的
从< h1>到< h6>
标题元素,默认加粗,字体大小越来越小
span
表示行em
默认斜体 strong
默认粗体
table/thead/tbody/tr
(行)/td
(单元格)/th
(表头)
列表类元素:ul
(无序列表)/ol
(有序列表)/li/dl/dt
(定义列表标题)/dd
(定义列表内容)
链接元素:a
(整个web非常核心的元素)
表单元素:form/input
(输入框)/select
(下拉框)/textarea
(一块文本输入区)/button
(按钮)
(3)<meta charset=“utf-8”> charset表示使用的是什么字符集合 (加在HEAD区第一行)
viewport 视口:屏幕代表页面多大的尺寸 width=device-width视口宽度等于屏幕宽度
<base href="/">:指定路径
扩展总结
1、HTML分块< div>
HTML的标签< div>,在制作一个网页的时候,应先将他们划分为许多个块,再在这些块中进行操作
在定义< div>中width和height的像素值的时候可以以电脑的分辨率来大致估算
2、HTML段落< p>
< p>标签代表的是段落,连续的两个< p>标签中间是有间距的,不是紧挨在一起的。
3、HTML标题< h1>…< h6>
默认加粗,从< h1>到< h6>,字体大小越来越小。
4、HTML链接< a>
1)< a href=“http://www.baidu.com”>百度< /a>(点击百度,直接跳转到网页)
这里的百度也可以是自己放的一张图片,点击图片,跳转页面。
2)HTML链接中的target属性(默认是在本页面中跳转_self)
3)HTML链接中的id属性
直接跳转到id所在位置,(id前面要加#)这个例子本质就是一个书签。
5、HTML图像< img>
< img>有两个必要的属性:src和alt
< img src=“11.jpg” width=“100px”
height=“200px” />(放在一个目录下,可以直接写图片名字和格式)
图片的名称和尺寸是通过属性的形式提供的。
提示:(1)从技术上来讲,图像并不会插入HTML页面中,而是链接到HTML页面上。 < img>标签的作用是为被引用的图像创建占位符。(2)通过在< a>标签中嵌套< img>标签,为图像添加到另一个文档的链接。
6、HTML换行< br>
直接空一行。(是一个没有关闭标签的空标签)
7、HTML水平线< hr>
创建水平线,用于分割内容。
8、HTML折行(让连续两行紧挨在一起)< p>< br>< br>< /p>
9、HTML文本格式化
1)< b>加粗文体< /b>
通常标签 < strong> 替换加粗标签 < b> 来使用
2)< i>斜体< /i>
通常标签 < em> 替换加粗标签 < i> 来使用
3)< sub>510下标< /sub>
4)< sup>510上标< /sup>
10、HTML预格式文本
< pre>< /pre>对空行和空格进行控制。(这个写的就很随意)
11、HTML定义缩写< abbr>
< abbr title=“World Wide Web”>www< /abbr>
当鼠标移动到缩略词语上时,title可用于显示完整版本。
12、HTML指定文本方向< bdo>
< p>< bdo dir=“rtl”>该段落文字从右到左显示。< /bdo>< /p>
rtl--------right to left;
ltr--------left to right;
13、HTML新插入文本和删除文本< ins>和< del>
浏览器一般会在已删除的文本上添加一条下划线,而在新添加的文本下添加一条下划线。
14、HTML中的< base>
(必须写在< head>中)
< base>为页面上的所有相对链接规定默认的URL(每一个文件都有默认的url,它包含的信息指出文件的位置以及浏览器应该怎么处理它)
就可以写一个图片库,在调用的时候直接写它的名称就行。
15、HTML表单
1)< form>标签,创建一个供用户输入的表单。
form标签里一般需要添加两个属性,一个是action,一个是method。
action的值是一个URL,它用来规定提交表单时向何处发送表单数据。
method的值有两个,get和post。它规定用于发送表单数据的HTTP方法。
值 | 描述 |
---|---|
get | 默认.将表单数据(form-data)以名称/值对的形式附加到URL中 |
post | 以HTTP post事务的形式发送表单数据(form-data) |
2)< input>标签
该标签规定了用户可以在其中输入数据的输入字段。
< input>元素在< form> 元素中使用,用来声明允许用户输入数据的input控件。
(1)最重要的type属性(只列了常用的几个)
button | 普通按钮 |
text | 普通的输入框 |
checkbox | 复选框 |
password | 密码输入框(看不见输入的内容) |
submit | 提交按钮 |
reset | 重置按钮 |
邮箱输入框 | |
url | 资源地址(输入网址) |
number | 数值输入的空间(可以通过旁边的箭头上下浮动1) |
date | 日期选择控件(包含年月日) |
datetime-local | 本地日期时间选择控件(包含年月日几时几分) |
tel | 电话号码 |
color | 颜色选择控件 |
(2)name属性 ------规定< input>元素的名称
它的值自己输入(text)
(3)checked属性------规定在页面加载时应该被预先选定的< input>元素。(只针对type="checkbox"或者type=“radio”)
(4)alt属性------定义图像输入的替代文本(只针对type=“image”)
它的值自己输入(text)
(5)src属性------规定显示为提交按钮的图像的URL
(6)height和width属性------规定< input>元素的高度和宽度(只针对type=“image”)
(7)value属性------指定< input>元素value的值,它的值是一个text类型。
3)< button>标签
该标签就是定义一个按钮。
在< button>元素内部,可以放置内容,比如文本和图像。这一点也是该元素与< input>元素创建的按钮之间的不同之处。
(必须为该元素规定type属性,因为不同浏览器,它的默认值不一样)
(1)type属性------规定按钮的类型
它的值包括button,reset,submit三种类型。
4)< select>标签
< select>元素用来创建下拉列表。
< select>元素中的 < option>标签定义了列表中的可用选项。
value属性-----送往服务器的选项值。
5)< label>标签------为input元素定义标注(标记)
label元素不会向用户呈现任何特殊效果。不过,他为鼠标用户改进了可用性。如果在label元素内带年纪文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
(1)for属性------规定label与那个表单元素绑定。
< label>标签的for属性应当与相关元素的id属性相同
16、HTML列表
1)< ul>标签------创建一个无序列表(通常与li一起使用)
2)< ol>标签------创建一个有序列表(通常与li一起使用)
3)< li>标签------定义一个列表项
4)< dl>标签------定义一个定义列表(与 < dt> (定义项目/名字)和 < dd> (描述每一个项目/名字)一起使用。)
5)< dt>标签------定义一个定义定义列表中的项目。
6)< dd>标签------顶一顶一列表中项目的描述。
href:链接地址 target:你需要在哪里打开这个链接(默认在当前窗口打开)
target="_blank" 跳转到新页面打开链接
img:图片 src:图片地址 alt:替换资源 (当你的图片不可用 显示替换文字)
table:表格属性 colspan:行 rowspan:占列 占据两列
Form:表单 target:表单提交到哪里 method:用什么方式提交 enctype:用什么编码
HTML是非常通用的标记语言
4.0之前没有太多值得研究的,比较随意,会出现很多边界情况
4/4.01是基于一种标记语言SGML写的
XML是可扩展的标记语言,非常严格
XHTML要求非常严格,所有标签,属性必须小写,属性必须有值
XHTML2.0不向前兼容,要求更严格
HTML5是基于HTML4的,严格要求放松,以开发者的感受优先,目的是为了创建更简单的Web程序
为了使web应用程序的开发变得更容易,提供了更多API,为了使HTML变得更简洁,开发出了新的属性,新的元素等等
(1)新增语义
header/footer
头尾 完整内容可以用
section/article
区块区域
div
没有语义的标签只是一个块,当知道表示什么时候用section代替div,当有更完整的东西用article
前者更零碎 后者更完整
nav
导航 页面栏目,网站层级
aside
不重要的内容,侧边栏 (简介,友情链接之类不进去页面大纲的东西)
em/strong
强调 样式元素
I
icon做图标,不再是斜体的语义
(2)新增属性
表单相关的属性,链接相关的属性,其他属性,全局属性
(1)按默认样式分:
样式名称 | 特点 |
---|---|
块级 block | 方块形状,默认情况下会占据整行;总在新的一行开始(换行)行高及顶和底边距可控制,默认情况下为整个容器的百分之百 |
行内 inline | 不一定有规则形状,不会独占一行,在一行中的某一个地方;行高及顶和底边距不可改变 |
inline-block | 对外和其他元素堆在一起在一行内和谐共处,对内方块形状有自己的尺寸;不自动换行,能够识别宽高,默认排列方式为从左到右 |
(2)按内容分:
Flow | 在文档流中有一些影响的元素 |
Metadata | 不占据文档流 |
Heading | 标题 |
Sectioning | 分区元素,导航元素 |
Interactive | 有互动的元素:跟用户有交互 |
Phrasing | em |
Embedded | 嵌入的其他资源 |
块级元素可以包含行内元素
块级元素不一定能包含块级元素
行内元素一般不能包含块级元素
a 是transparent元素 计算合法性时可直接将其去掉
a>div 不一定是合法的 取决于外面是什么元素 计算时要把a拿掉 取决于拿掉a后div前面是什么
浏览器有容错功能
意义:HTML是一个比较简单的文档型的标记语言,必然要带一些默认样式
问题:①有些样式是默认之外的 ②各个浏览器的默认样式并不一样
处理默认样式问题的解决方案: CSS Reset 默认样式重置
(1)doctype的意义:让浏览器以标准模式渲染,让浏览器知道元素的合法性
(2)HTML XHTML HTML5的关系:HTML属于SGML,XHTML属于XML,是HTML进行XML严格化的结果,HTML5不属于SGML或XML,比XHTML宽松
(3)HTML5有什么变化:新的语义化元素,表单增强,新的API,分类和嵌套变更
(4)em和i有什么区别:默认样式都是斜体,em是语义化的标签,表强调,i是纯样式的标签,表斜体,HTML5中i不推荐使用,一般用作图标
(5)语义化的意义:开发者容易理解,机器容易理解结构(搜索,读屏软件),有助于SEO,semantic microdata
(6)哪些元素可以自闭合:表单元素input ,图片 img,br,hr,meta link (加斜杠)
(7)HTML和DOM的关系:HTML是死的,DOM由HTML解析而来,是活的,JS可以维护DOM
(8)property和attribute的区别:前者特性,活的,后者属性,死的
(9)form的作用:直接提交表单,使用submit/reset按钮,便于浏览器保存表单,第三方库可以整体提取值和进行表单验证
涉及表单的地方加个form
文档对象模型,是针对于xml但是扩展用于HTML的应用程序编程接口,定义了访问和操作HTML的文档的标准
W3C文档对象模型是中立于平台和语言之间的接口,它允许程序和脚本动态的访问和更新文档的内容、结构、样式。总之HTML是关于如何获取、修改、添加和删除HTML元素的标准
HTML DOM方法就是可以对HTML DOM 节点进行的操作,执行的动作
CSS基础
1.选择器{属性:值;属性:值}
(1)一个选择器可以选择很多属性
CSS中的分号是分隔符,一般要求每一行都加分号
(2)选择器作用: 用于匹配HTML元素;有不同的匹配规则;多个选择器可叠加
2.浏览器的解析方式是从右往左的
目的:加快浏览器解析CSS的速度,让它更快的确定哪些元素不是
原因:出于性能的考虑,从左往右范围太大,考虑太多
3.选择器的分类
• 标签选择器:
选择器的名字代表html页面上的标签
选择的是页面上所有这种类型的标签,所以经常描述“共性”,无法描述某一个元素的“个性”
(1)所有的标签,都可以是选择器。比如ul、li、label、dt、dl、input、div等。
(2)无论这个标签藏的多深,一定能够被选择上。
(3)选择的所有,而不是一个
• ID选择器:规定用#来定义(名字自定义)
针对某一个特定的标签来使用,只能使用一次。绝对不用ID选择一堆元素。
css中的ID选择器以”#”来定义。
任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字,可以任取,但是:
(1)只能有字母、数字、下划线。
(2)必须以字母开头。
(3)不能和标签同名。比如id不能叫做body、img、a。
(4)大小写严格区分,也就是说aa,和AA是两个不同的ID
特别强调:HTML页面,不能出现相同的id,哪怕他们不是一个类型。比如页面上有一个id为pp的p,一个id为pp的div,是非法的!
• 类选择器:规定用圆点.来定义
针对你想要的所有标签使用。优点:灵活。
和id非常相似,任何的标签都可以携带id属性和class属性。但是id属性只能被某一特定标签引用一次
class属性的特点:
(1)类选择器可以被多种标签使用。
(2)同一个标签可以使用多个类选择器。用空格隔开。
应该注意:
(1)不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同完成这个标签的样式。
(2)每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用。
问题:到底用id还是用class?
答案:尽可能的用class,除非极特殊的情况可以用id。
原因:id是js用的。也就是说,js要通过id属性得到标签,所以css层面尽量不用id,要不然js就很别扭。另一层面,我们会认为一个有id的元素,有动态效果。
• 通用选择器,将匹配任何标签。
不建议使用,IE有些版本不支持,大网站增加客户端负担。
效率不高,如果页面上的标签越多,效率越低,所以页面上不能出现这个选择器。
• 伪元素选择器
不会出现在html中,真实存在,显示内容,设置样式
• 元素选择器:指定元素
• 属性选择题:
• 伪类选择器:表示当你的鼠标指向你的元素时元素所使用的样式,选中的是一种状态
• 组合选择器,否定选择器,通用选择器
4.选择器的权重
ID (100)>类、属性、伪类(10)>元素、伪元素(1)>其它(0)
css样式优先级:行内>嵌入>链接>导入;若权重相同,则后写的会覆盖前面的
选择器权高一级压死其他
计算复合选择器权重时根据同级相加但不进位来判断
另外!important
权重最大,若另一种优先级较高的也加了!important
则可以覆盖
CSS布局
把传统<table>布局
中的<table>、<tr>、<td>
改为合适的,符合“语义化”的标签,然后为这些标签添加对应的display属性
1)默认情况下宽度和高度只对内容生效
2)边框本身占据空间,布局时需要考虑其大小
3)在Html中,每一个标签都不一样,这是因为每一个标签对应的盒子中的属性不同。上图中最里面的蓝色部分是盒子中的内容,可以对它设置宽和高。在内容的外面有一个Padding, 这个Padding我们叫做内间距。Padding可以很细分的设置上下左右。在Padding的外面有一个border,这个border我们称为外边宽,边宽的样式也是可以设置的。在border的外面是margin, 我们叫做外边距。想看出Padding与Margin的区别,可以设置一下背景颜色,背景颜色会覆盖Padding而不覆盖margin。margin一般被认为盒子与盒子之间的距离。Padding是盒子与内部文本之间的距离。
确定元素的显示类型
inline,block,inline-block,none
常用属性值 | 含义 |
---|---|
block | 默认情况下占据一行 |
inline | 文本一样默认不占据一行 |
inline-block | 对内block有宽高,对外inline可与其他元素排在同一行 |
none | 表示隐藏该区域,不占用实际空间,但对后台来说真实存在,可以获取被隐藏的元素 |
作用:确定元素的位置
static
默认情况下位置,静态布局,按照文档流一个一个去布局的
relative
相对位置,相对于元素本身偏移,并且偏移后不会改变原来占据的空间大小和位置
absolute
绝对位置,相对于父级元素中最近的absolute或relative的定位,对其他元素的布局不会造成影响,若没有父级元素或父级元素没有absolute或relative就相对于窗口(body)定位,脱离了文档流,相当于一个独立的元素,但若只设定属性值而不设定绝对位置时,默认按照文档流布局
fixed
规定位置,固定定位,相对于Windows窗口的定位,或者是可视区域的定位,不会改变自己在窗口的位置
层级问题:默认情况下按照顺序进行层叠,如果要手工改变顺序,对于非静态元素,可以设定一个z-index属性(相当于把屏幕看成一个平面,有x,y,z坐标,以屏幕为xy平面,以屏幕到人眼为z轴方向)以此设置层叠方式,类似于PS的图层遮盖
注意:一般给不同元素设置不同区间防止它们互相覆盖
(真正用来布局,最推荐的一种布局方式)
可以简便、完整、响应式地实现各种页面布局
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
1)任何一个容器都可以指定为 Flex 布局
2)行内元素也可以使用 Flex 布局。
3)Webkit 内核的浏览器,必须加上-webkit前缀
4)设为 Flex 布局以后,子元素的float
、clear
和vertical-align
属性将失效。
5)采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"
6)容器属性有6个,控制其中的flex项目的排列方式;项目属性有6个,可以控制自身的相对顺序和大小,也可以覆盖由父级元素继承过来的某些属性
元素”浮动“,脱离文档流,但不脱离文本流
(1)对兄弟元素影响:上面贴非float元素,旁边贴float元素;不影响其他块级元素位置,但是影响其他块级元素内部文本,即脱离文档流但不脱离文本流
(2)对自身的影响:形成“块”(BFC)(负责自己的布局,宽高由自己决定);位置尽量靠上和靠左(右)
(3)对父级元素的影响:相当于从父级的空间里消失即从布局上消失,父级看不到它,于是会导致父级高度塌陷
清除浮动:
• 添加新的元素,应用clear:both
• after 方法:(作用于浮动元素的父亲)(不需多于的标签,而且也能很好的兼容)
原理:利用:after和:before来在元素内部插入两个元素块,从面达到清除浮动的效果。其实现原理类似于clear:both方法,只是区别在于:clear在html插入一个div.clear标签,而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。
clear:both;
指清除所有浮动;content: '.'; display:block;
对于FF/chrome/opera/IE8不能缺少,其中content()
可以取值也可以为空。visibility:hidden;
的作用是允许浏览器渲染它,但是不显示出来,这样才能实现清除浮动
注意:下一标签直接清浮动兄弟标签浮动时,在下一标签的属性中直接写入清除clear:both;这样就可以清除以上标签的浮动而不用加入空标签来清除浮动
像文本一样排block元素
没有清除浮动等问题
需要处理间隙
限制:使用起来不够方便
帮助你的网页更好的适配PC端,移动端,以及不同大小的屏幕的移动端
在不同设备上正常使用
一般主要处理屏幕大小问题
主要方法:必须要有从源头设计思路的支持
隐藏+折行(PC端有一排三四个在移动端折行成一排一两个)+自适应空间
rem/viewport/media query
响应式布局就是做一个网站同时能兼容多个终端,由一个网站转变成多个网站,大大节省资源
四个层次:
(1)同一页面在不同大小和比例上看起来都应该是舒适的;
(2)同一页面在不同分辨率上看起来都应该是合理的;
(3)同一页面在不同操作方式(如鼠标和触屏)下,体验应该是统一的;
(4)同一页面在不同类型的设备(手机、平板、电脑)上,交互方式应该是符合习惯的。
(1)使用BFC隐藏属性
1.在对需要自适应的元素BFC化,可以实现两栏或三栏布局
2.如果要让两栏之间有空隙,可以给浮动元素设置margin-right值,也可以给自适应的主内容设置margin-left值。但设置margin-left时,需要考虑到aside的宽度。实现三栏布局也是如此,给浮动元素设置margin值会方便一些。
3.使用BFC实现三栏布局时需要注意的是DOM的书写顺序问题
(2)float + 负margin + relative 实现思路如下:
1.两栏和自适应元素都设置同一方向的浮动(如float: left)
2.父元素设置左右padding为左右边栏的宽度。
3.自适应元素设置宽度为100%
4.左边栏margin-left为负100%,再设置relative,最后通过left属性偏移负的自身宽度。
5.右边栏margin-left为负自身宽度,再设置relative,最后通过right属性偏移负的自身宽度。
注意:宽度小于两栏宽度时,元素会因为宽度不足而掉下去
(由于对基础的掌握尚未完善,所有本周进度比较慢,稍微感觉到吃力,CSS效果还未开始,之后会尽快完善基础,加强吸收)