HTML+CSS
2019-01-26 14:39:35 289 举报AI智能生成
前端基础知识
作者其他创作
大纲/内容
CSS
选择器
ID选择器
#id{属性名：属性；}
注意:“#”表示“id”
类选择器
.class｛color:red;｝
注意:“.”表示“类”
标签选择器
div{width:80px;}
群组选择器
如：<ul>与<div>共用一种颜色
ul ，div{color:red;}
通配符选择器
*｛margin:0;padding:0;｝
"*"代表全局属性 一般作用于初始化
后代选择器
#links a {color:red;}
后代选择器 顾名思义 所有#links下的<a>链接“全部”字体颜色变成red
子选择器
#links > a {color:blue;}
基本上在CSS中用好以上选择器就够了,后面学习jQuery与css3知识，新增了多种选择器
伪类选择器
a:link 是用在未访问的链接的选择器
a:link { font-size: 14px; text-decoration: underline; color: blue; }
a:visited 是用在已访问过的链接的选择器
a:visited { font-size: 14px; text-decoration: underline; color: orange; }
a:hover 是用在鼠标光标放在其上的链接的选择器
a:hover { text-decoration: underline; color:green; } 与 a:hover span{ color:red; }
a:active 是用在获得焦点（比如，被点击）的链接的选择器
a:ctive{text-decoration: underline; color: gray; }
CSS引入的几种样式
外部样式
<link rel="stylesheet(规定当前文档与链接文档之间关系)" type="text/css(文件格式)" href="(文件名称)"/>
内嵌样式
<head><style="text/css">样式拽写</style></head>
行内样式
<div style="属性：属性值;..."></div>
CSS属性
背景属性
背景颜色：background-color：颜色值；三种表现形式：red(英文表示)，十六进制(#FFFFFF,或#FFF)，agb(255，255，255)，后扩展alpha 通道 - 规定对象的透明度0~1之间表示 agba(255,0,0,0.5) 刚开始看会有些懵.
背景图像：background-image:url(图像路径);
设置背景图片不重复：background-repeat:no-repeat；默认重复
设置X(水平),Y(垂直)起始位置：background-position:三种表达方式(px)(%)(center);
以上两句结合使用：background-image:url() 0 0 no-repeat;
background-attachment 属性设置背景图像是否固定(fixed)或者随着页面的其余部分(scroll)滚动。
background-size属性用来处理一些不规则图片，实际运用比较少，图片已经处理好了
background-image: （线性渐变）linear-gradient(方向，起始颜色，过度颜色）；radial-gradient(径向渐变)
- 渐变线的长度可以改变，拉出的渐变线越长，色块隔得越远，渐变越自然，拉出的渐变线越短，色块隔得越近，渐变越生硬。
子主题
盒子模型
定义宽高：width，height
内边距上右下左：padding:top right bottom left;
也可以单独设定如：padding-top:50px;
外边距：margin:top right bottom left;
margin:0 auto;网页居中
边框属性
边框颜色：border-color
也可以通过上下左右规定单独风格 如：border-top-color
边框风格：border-style
风格属性值
solid实线 dashed虚线 dotted点状 double双线 none无边框
groove 3D 凹槽边框 ridge垄状边框
大部分时候我们通过简写方式：border:soild 1px red;来实现正常效果
border-radius:px与%;添加圆角边框
当然也可以单独规定border-top-left-radius
轮廓属性：outline:color style width;
向方框添加一个或多个阴影:box-shadow:0(水平) 0(垂直偏移) 0(模糊半径) 颜色;
文本也有个渲染效果text-shadow
边框宽度 与上下左右的设置 比较随心，多种多样，真正用处较少，了解即可
如：border-top-width，border-top-style.....
布局相关属性
浮动float
left 与right
清除浮动clear:both;
overflow溢出处理
hidden隐藏超出规定内容，scroll无论是否超出添加滚动条 auto超出自动添加滚动条 visible显示
display显示属性
none元素隐藏或关闭 block 生成一个块元素 inline生成一个或多个行内元素 inline-block该元素生成一个块状盒 ，随着周围内容流动，如同它是一个单独的行内盒子（表现更像是一个被替换的元素）
opacity属性 设置元素的透明度 0~1之间变化
position定位方式，没有任何继承性，只读
relative相对于其正常位置进行定位 absolute相对于第一个父元素进行定位 fixed相对于浏览器窗口进行定位
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定
堆叠层级通过z-index进行对比（优先级）较大的元素会覆盖较小的一个
字体与文本属性
font-family字体定义 font-size字体大小 font-style:italic(斜体) oblique(倾斜);
cursive草书字体 serif 带衬线字体 可以了解一些带有特色的字体
font-weight字体粗细 font-variant字体大写
bold(粗) bolder(更粗) inghter(更细) 700=blod 400=normal
文本修饰text-decoration:underline(下划线) line-through(删除线) ;
单词间距word-spacing 字母间距letter-spacing 行高line-height text-indent首行缩进
text-align:left，right，center;水平对齐作用块元素 vertical-align:top、middle、bottom;垂直对齐内联元素
text-overflow: ellipsis | clip ; inherit；继承
文本溢出省略号代表 和修剪
white-space:nowrap; 属性设置如何处理元素内的空白。
nowrap
文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
列表属性
编号类型:list-style-type 定义列表项符号
编号图像:list-style-image
标记位置：list-style-position:inside(里面) onside(外面);
光标cursor
Pointer(一只手) wait(程序等候) help(问号) Move(可被移动) Crosshair(十字线) text(文本)
HTML
列表
定义列表<dl> <dt>定义列表中的项目
特殊符号
-->空格
>-->大于号，⁢-->小于号
©；-->版权符号
<aside> 的内容可用作文章的侧栏。
<a href="#c">用于跳转段落
<hr/>水平线 <br/>换行 <pre>定义预格式化的文本
<b>实体标签 <strong>逻辑标签
<dd>描述列表中的项目
<del>定义文档中已被删除的文本 替代<s>
<ins>被插入文档中的文本 替代<u>用户会把它混淆为一个超链接
强调内容<em>， <i>基于物理的斜体
有序列表
<ol><li></li></ol>
Type属性：1(默认值number)，A，a，i，I
CSS样式：list-style-type: none，upper-roman，lower-alpha 其它不支持
无序列表
<ul><li></li></ul>
type属性：disc(实心圆，默认值)，circle(空心圆)，square(正方形)，decimal(数字)
XHTML 1.0 Strict DTD与html4.01中不被支持和不赞成使用
表格由<table>定义
<tr>定义表格中若干 行
每行被分割为若干单元格由<td>定义
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格...
colspan 和 rowspan 属性可横跨的列数与行数
valign 属性：top，bottom，baseline(与基线对齐)，middle
表格的表头使用 <th> 定义 呈现粗体居中效果
<table>属性
border表格边框的宽度
border-collapse:collapse,separate; css拽写单元格边框之间是否有间隙
border-top-width，border-left-style 通过这两种方式可以满足大部分边框样式需求
cellpadding单元格内文字与边框的距离，cellspacing单元之间的距离
frame规定外侧边框哪个部分可见
above 显示上部的外侧边框，below显示下部的外侧边框
lhs 显示左边 rhs显示右边
hsides 显示上部和下部 vsides显示左边和右边
rules规定内侧边框哪个部分可见
rows位于行 cols位于列之间的线条 all位于行和列之间的线条
rules 属性无法在 Internet Explorer、Chrome 或者 Safari 中正确地显示。
大部分表格属性在html5中都不支持或不赞成使用，以上是一些的特殊方法使用，其它推荐使用css边框样式拽写
<frameset>定义框架集
rows cols 属性表示横向 与纵向分割 ，frameborder属性:是否显示框架边框 0(NO)和1(YES)两个值
<frame>与<ifrsme>标签
name属性 src属性 scrolling属性：是否显示滚动条 在html5中 不支持这两个标签了，了解就好
表单由<form>定义
<form>标签
action 属性：规定向何处提交表单的地址（URL）
method 属性：定在提交表单时所用的 HTTP 方法：（默认：GET），POST
<input> 标签的属性
不同的 type 属性，可以变化为多种形态。
button点击，submit提交 ， reset重置，image(alt)定义图像作为提交按钮 file浏览选择文件上传
checkbox(复选框) radio(单选) text(文本) password(密码遮蔽)等常用属性值。html5中增加了多种形态变化
checked(预选) size属性 src 属性 name属性在html常用
disabled属性 规定应该禁用的input ， readonly属性规定文本只读 通过js判定布尔值实现目的
input其它属性和值就不多介绍...
<label>不会向用户呈现任何特殊效果,但浏览器就会自动关联相关的表单控件上
for属性规定 label 与哪个表单元素绑定
通过在 <label>中放入<input>来隐式地连接起来的
<textarea>定义多行的文本输入控件
可以通过 cols 和 rows 属性来规定 textarea 的尺寸
更好的办法是使用 CSS 的 height 和 width 属性
style="resize:none; 固定大小
<fieldset> 将表单内容的一部分打包，生成一组相关表单的字段
<legend> 标签为 fieldset 元素定义标题
name 属性是 <fieldset> 在 HTML5 中的新属性
<select>定义下拉列表
<optgroup>定义选项组
label属性必须描述text内容
<option>定义select的内容
value属性送往服务器的内容
selected属性 定义预选一个项
multiple属性 同时选择多个选项 windows：按住 Ctrl 按钮 Mac：按住 command 按钮
name属性 用于对提交到服务器后的表单数据进行标识 或引用数据 size属性：可选数目
<head></head>之间是网页头部可见内容
<meta charset="UTF-8">html编码格式
php编码格式-->header("Content-Type:text/html; charset=utf-8");
<title></title>网页标题
<link rel="stylesheet" type="text/css" href="">导入css样式
<body></body>之间是页面可见内容
注意：HTML执行顺序是从上而下，依次执行。菜鸟最容易犯语法错误--->编译错误 , 还有一种是“运行错误”
查看代码源
javascript: s=document.documentElement.outerHTML;document.write("<body></body>");document.body.innerText=s;
粘贴到地址栏
view-source:http://网址
收藏
收藏
0 条评论
下一页
