前端基础知识
一、html
1. <body></body>之间是页面可见内容
①.注意：HTML执行顺序是从上而下，依次执行。最容易犯语法错误--->编译错误 , 还有一种是“运行错误”
2. <head></head>之间是网页头部可见内容
- <meta charset=”UTF-8”>html编码格式
- <title></title>网页标题
- <link rel=”stylesheet” type=”text/css” href=””>导入css样式
3. 表单由<from>定义
- <from>标签
- active属性：规定向何处提交表单的地址(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 属性规定文本只读
- <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属性：可选数目
4. 表单由<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属性scr属性scrolling属性：是否显示滚动条 在html5中不支持这两个标签
5. 列表
- 定义列表<dl>
- 特殊符号
- -->空格
- >-->大于号，<-->小于号
- ©-->版权符号
- <aside>的内容可用作文章的侧栏
- <dt>定义列表中的项目
- <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,l
- css样式：list-style:none,upper-roman,lower-alpha其他不支持
- 无序列表
- <ul><li></li></ul>
- type属性:disc(实心圆，默认值),circle(空心圆)，square(正方形)，decimal(数字)
二、css
1. css引入的几种样式
①. 外部样式
a. <link rel=”stylesheet(规定当前文档与连接文档之间的关系)” type=”text/css(文件格式)” href=”(文件名称)”>
②. 内嵌样式
a. <head><style=”text/css”></style></head>
③. 行内样式
a. <div style=”属性:属性值;...”>
2. 选择器
①. ID选择器
a. #id{属性名：属性值；}
a) 注意：”#”表示”id”
②. 类选择器
a. .class{color:red}
a) 注意：”.”表示”类”
③. 标签选择器
a. div{width:80px;}
④. 群组选择器
a. <ul>与<div>共用一种颜色-->ul,div{color:red;}
⑤. 通配符选择器
a. *{margin:0;padding:0;}
a) “*”代表全局属性一般作用于初始化
⑥. 后代选择器
a. #tjx a{color:red;}
a) 后代选择器顾名思义所有#tjx下的<a>连接”全部”字体颜色变成red
⑦. 子选择器
a. #tjx>a{color:red;}
3. 伪类选择器
①. a:link是用在未访问的连接的选择器--> a:link{font-size:14px;}
②. a:visited是用在已访问的连接的选择器-->a:visited{color:red;}
③. a:hover是用在鼠标光标放在其上的连接的选择器-->a:hover{color；black;}
④. a:active是用在获得焦点(比如，被点击)连接的选择器
4. css属性
①. 背景属性
a. 背景颜色：background-color:颜色值；四种表现形式：red(英语单词)，十六进制 (#ffffff),(#fff),rgb(255,255,255),hsl(360,100%,100%)-->rgba(255.255.255.1)&&hsla(3 60,100%,100%,1)
b. 背景图像:background-image:url(图像路径);
a) 设置背景图片不重复：background-repeat:no-repeat:默认重复
b) 设置X(水平),Y(垂直)起始位置：background-position:三种表达方式( px)(%)(center)
c) 上两句结合使用：background:url() 0 0 no-repeat;
d) background-attachment属性设置背景图像是否固定(fixed)或者随着页的其余部分 （scroll）滚动
e) background-size属性用来处理一些不规则图片
C. background-image:(线性渐变)linear-gradient(方向，起始颜色，过度颜色)； radial-gradient(径向渐变)
②. 盒子模型
a. 定义宽高：width,height
b. 内边距上右下左：padding:top right bottom left;
a) 单独设置;padding-left:50px;
c. 外边距：margin:top right bottom left;
a) margin:0 auto;网页内居中
③. 边框属性
a. 边框颜色：border-color
a) 也可以通过上下左右规律单独设置，border-top-color
- 边框风格：borer-style
a) 风格属性值
--solid实线、dashed虚线、dotted点状、double双线、none无边框
--ridge垄状边框、groove 3D凹槽边框
- 一般使用简写：border:1px solid red;
- border-radius:px与%添加圆角边框
a) 单独写法 border-top-radius
- 轮廓属性：outline:color style width;
- 向边框添加一个或多个阴影：box-shadow:0(水平)0（垂直偏移）0（模糊距离）0（阴影长 度）颜色
- 边框宽度 与上下左右的设置-->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-size字体大小
- bold(粗) bolder(更粗) inghter(更细) 700=bold 400=normal
- 文本修饰text-decoration:underline(下划线) line-through(删除线)；
- 单词间距word-spacing 行高line-height text-indent首航缩进
- text-align:left,right,center;水平对齐作用块级元素 vertical-align:top,middle... 垂直对齐内联元素
- text-overflow:ellipsis|clip，inherit 继承
- 文本溢出省略号和修剪
- White-space:nowrap;属性设置如何处理元素内的空白
- nowrap文本不会换行，文本会在同一行上继续，直到遇到标签为止
- 列表属性
- 编号类型：list-type定义列表项符号
- 编号图像：list-style-image
- 标记位置：list-style-position:inside(里面) onside(外面)
5.光标cursor
- Pointer(一只手) wait(程序等候) help(问号) move(可被移动) crosshair(十字线) text(文本)
1556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
