一：HTML基础（框架）
1.webkit内核 安卓使用频率最高的
2.w3c规定了web标准
超文本标记语言HTML：作用 描述网页中的元素
标签语义化：在合适的地方用合适的标签
3.查看网页源代码方法
F12
4.web三层标准是？
html网页元素.元素的板式大小颜色等样式.用户交互.
浏览器太多，需要web标准。
5.网页：图片链接皆标签 （标签规范是成对的.图片标签...我们约定字母小写.）
6.必备骨架
html标签 头部标签(爸爸标签head) 标题标签(儿子标签 文档标题title)
主题标签（这个是页面显示内容）
*7.html5
文档类型 Doctype 是html <!DOCTYPE html>
语言属性 lan="en" "zh-CN"
meta标签设置字符集 识别所有的字符，采用国际格式防止乱码，文本保存为该编码
<meta charset="UTF-8"> head标签里meta style可选。
*8快速开发工具sublime，用来快速编辑骨架
ctrl + n 新建
ctrl + s 保存 随手就是一个ctrl + s
ctrl + 鼠标滑轮或+- 放大缩小文字
！TAB html骨架（英文下）
html:5TAB
标签英文名TAB 补标签,快速输入
ctrl + enter 任意位置跳到下一行
标签内双击 可以全选框内所有文字，
ctrl + 滑轮按下去往下拖 可以同时修改n行各个数据
table>tr*n>td*n(n随意) 快速打出表格
div>ul*n>li*n(n随意) 快速打出无序列表
*9.效果：锚点定位
锚点链接功能：页面内跳转
目标位置的标签加属性 id="名1"
<a href="#名1">被点击文字段</a>
？拓展：跨页面锚点跳转 添加目标页面链接/目标页面的目标位置的锚点id
10.标签格式：<标签名 属性1="值" 属性2="值"> </ 标签名> 双标签
*<标签名 属性1="值" 属性2="值" /> 单标签
//*英文状态下",标签名属性之间属性与属性之间要有空格，*单标签是空格 正斜杠。
二：css
1.ul（去掉列表默认样式：list-style：none; 去掉ul的小黑点）
3.统一指定文字大小(效果)：
//不同浏览器默认大小不一，谷歌默认16px.
style里加个 body{ font-size:16px;}
CSS第一行代码
//body在浏览器内默认有8px的像素外边距，清除外边距
* { margin:0; padding=0;}
0.CSS（层叠样式表 sheets）；是用来设置HTML的版面布局和外观样式
外部样式，开发人员用
1）新建.css文件只放style的样式，当前html里面加上link单标签
<link rel="stylesheet"（必备属性，relation连接）rel和 href="" />
子代选择器：*从嵌套结构中，只选亲儿子：
交集选择器：选择一种（类）标签的某些个标签
1.
后代选择器（空格隔开）：*（嵌套结构中）
*选择某标签内（A标签）的 所有 子子孙孙
//a标签浏览器有自带的样式默认不显示，实际开发中需要单独给链接指定样式。
*选中标签的话：遵循先子代选择器 后标签选择器
归根到底这两个选择器都是选中一个标签
6.标签显示模式：
行内元素---display:block-->块元素
块元素 ---display:inline-->行内元素
行内或块元素-----display:inline-block;-->行内块
块元素：div ，h1-h6标签,dt，p,有序ul无序ol li （form table）
1）独占一行。可以设置高度宽度外边距内边距。（没有宽度默认聚成父亲的宽度）
*2）div可以放任何元素，但 文字标签（p h dt）不能放块级元素只能放文字类标签及行内元素。
行内元素:
*1）一行内多个显示,。行内不能直接设置高宽及垂直方向的内外边距等
2）内部只能放文本及文本类元素
3)特例：标签可以嵌套块级元素，但不能嵌套本身
行内块元素：img input textarea select（表单元素加img）
*即可以设置高度宽度等。一行内多个显示。
————— 移动块级盒子————
*6：（技巧）
测试时要看到盒子大小，要么设置背景颜色，
要么设置边框实线，像素颜色。
//同时加上宽和高
5.让块级盒子水平居中对齐（不同于文本）
1）必须有宽度 2）左右外边距设置为auto （* margin: auto auto；左右居中上下不会变）
（*可以设置到顶部的距离 margin: 20px auto; ）
4.文字对齐方式
*文字垂直居中：高度（盒子的高速度）=行高
height: 50px;
line-height: 50px;
文字（图片）水平据中：
text-align: center;
css布局 浮动
1.技巧：ul相当于n个div，便于摆放文本段的位置
（去掉列表默认样式：list-style：none; 去掉ul的小黑点）
2.行内块，盒子与盒子之间的白色缝隙难去掉（不建议用 ）
特：给一个div加了浮动，会默认变成类似行内块元素（中间没有缝隙）
//如果
1）浮动只会影响当前及后面的标准流的兄弟盒子。
4盒子摆放小技巧
（*如果标准流宽度高度不够会被遮住 加一个这个 background-color: rgba(255, 0, 0, 0.5); 后面必须是 4个值
解决浮动问题：给浮动的几个盒子，加标准流的盒子
（*嵌套关系，子盒子不会撑开父盒子（无论父盒子是否浮动））
5.清除浮动就是
父亲盒子根据浮动最高的盒子的高度，自动改变高度。
|
|
收藏
淘帖
踩
