首页 > 张孝祥javascript学习笔记1---HTMLCSS

张孝祥javascript学习笔记1---HTMLCSS

 本节摘要及说明：本节只是对学习过程中知识点的一个简单的记录。

标签的属性

Text属性:用于设定整个网页中的文字颜色

link属性:用于设定一般超链接文本的显示颜色

alink属性：用于设定鼠标移动到超链接上时，超链接文本的显示颜色

vlink属性:用于设定访问过的超链接文本的显示颜色

background属性:用于设定背景墙纸所用的图像文件，可以是GIF或JPEG文件的绝对路径

bgcolor属性:用于设定背景颜色，当已设定墙纸时，这个属性会失去作用，除非墙纸具有透明部分

leftmargin属性:用于设定网页显示画面与浏览器窗口左边沿的间隙，单位为像素

topmargin属性:用于设定网页显示画面与浏览器窗口上边沿的间隙，单位为像素

class、name、id、style等属性

 

注释与特殊字符

用这种风格加入注释

特殊字符可以用数值码和引用实体两种方式表示,例如，©、©；

HTML编码显示或处理结果
<<
>>
&&
"；"
®®
©©
™™
 空格字符

格式标签

用来创建一个段落


换行

防止浏览器对比较长的内容自动换行

缩进效果显示

水平方向居中显示

ww 水平动态效果

圆点表示的列表项

数字标示的列表项

预格式化
 
文本标签
 
…
 
粗体
 
斜体
 
下划线
 
下标
 
上标
 
打字机风格的文本
 
引用方式的文本
 
强调的文本
 
加重的文本
 
 标签的三个属性:face、size和color 没有安装字体就显示浏览器默认的字体
 
超链接标签
 
 
target属性 表示在新的窗口中打开目标网页
 
用定义定位标记，例如，第一部分
 
使用跳转到第一部分就可以定位到网页中的”标记1”这个位置
 
打开网页所在的目录
 
空
 
图像标签
 
 
alt 鼠标放在图片上时的提示文本 图像无法加载时显示的文字
 
align 指定图像与周围文本的对齐方式
 
border 图像边框的方式  单位像素
 
width 图像在浏览器中的宽带 单位像素 没有指定大小以图像原始的大小显示
 
height 图像在浏览器中的高度 单位像素 没有指定大小以图像原始的大小显示
 
标签，可以设置size，color，width和noshade等属性
 
size 粗细  olor 颜色 idth 宽度 noshade 是否有阴影
 
图像超链接
 
图像超链接
 
图像地图
 
 

 

     

     

     

 
表格
 
 
 
 
 
 
帧标签
 
不能定义在body标签当中,帧标签当中也不能显示body标签
 
 

     

     

         

         

     

 
target属性四个内置的取值：_blank,_parent,_self,_top
 
标签</p> <p><iframe></iframe></p> <h2>表单标签</h2> <p><form></form></p> <p>action属性:设置接收和处理浏览器递交的表单内容的服务器程序的URL</p> <p>method：post/get</p> <p>target：用来指定服务器返回结果显示的目标窗口或目标帧</p> <p>title：设置当前网站访问者的鼠标放在表单任意位置过几秒时，浏览器用黄色小浮标显示的内容</p> <p>enctype：指定浏览器使用哪种编码方法将表单数据传送给WWW服务器。该属性可以有两种取值：application/x-www-form-urlencoded和multipart/form-data。默认的设置值为application/x-www-form-urlencoded</p> <p><input type=””/></p> <p>type：submit、reset、text、checkbox(checked)、radio、hidden、file、image</p> <p><select multiple size=”2”></p> <p>   <option selected value=”0”></option></p> <p></select></p> <p><textarea cols=”” rows=””>默认内容,无value属性</textarea></p> <p><label></p> <h2>meta 标签</h2> <p><meta name=”” content=””> 用与在网页中加入一些关于网页的描述信息,例如网页的关键字，网页的描述信息</p> <p>meta标签的name属性设置:keywords、description、Robots(此时content的设置值可以是index,noindex,follow,nofollow,all,none)、generator（用于说明编辑此网页软件的名称，此时content就是软件名称）、author、copyright</p> <p><meta http-equiv=”” content=””>用于在HTML文档中模拟HTTP协议的响应消息头,例如告诉浏览器是否刷新该网页，使用什么样的字符集来显示网页内容，隔多长时间自动刷新网页</p> <p>meta标签http-equiv的属性设置:content-type (文本类型和字符集编码)、refresh(指定时间段刷新或跳转到指定页面)、expires(禁止浏览器使用缓存页面)、Windows-Target(设置防止自己的网页被别人当做一个frame页面调用，可以设置此属性，此时content=”_top”)、pragma(可以禁止浏览器在本地计算器上缓存当前页面，此时content=”no-cache”)、page-enter和page-Exit(页面进入和退出的特殊效果)</p> <p><meta name=”Windows-Target” content=”_top”></p> <p><meta name=”pragma” content=”no-cache”></p> <p><meta name=”cache-control” content=”no-cache”></p> <p><meta name=”page-enter” content=”revealTrans(Transition=23,Duration=1.000)”></p> <h2>头元素</h2> <p><title></title>标签对</p> <p><base>标签用于指定网页中的超链接的基准地址，以及改变网页中所有使用相对地址的URL的基准地址</p> <p><base href=”http://www.baidu.com” target=”_blank” ></p> <p><link>标签定义了当前文档和另一个文档或资源之间的关系</p> <p>几个主要的属性:</p> <p>href</p> <p>REL与REV 定义了两个资源的关系类型(Contents,index,glossary,copyright,next,previous,start,help,bookmark,stylesheet,alternate,shortcut Icon)</p> <p>TITLE 可选属性 目标资源的描述信息，关系</p> <p>TYPE 目标资源的MIME类型 TYPE=”text/css” TYPE=”text/javascript”</p> <p>MEDIA 指定目标资源被接收的介质和资源(screen,print,projection,aural,braille,tty,tv,all)</p> <p><meta>标签</p> <h2>分区标签</h2> <p><div></div>可以用来组合其他的HTML元素，但不能嵌套在段落元素中。</p> <p><span></span></p> <h2>CSS(层叠样式表)</h2> <p><strong>设置CSS的几种方式</strong>：</p> <p><em>--内联样式表(Inline sytles)</em> </p> <p><meta http-equiv=”Content-Style-Type” content=”text/css”> text/xsl 建议用内联的时候加上此句</p> <p><em>--嵌入样式表(Embedded style sheets)</em> 用注释包起来是为了有些不能支持style样式的浏览器</p> <p><head></p> <p><style type=”text/css” media=”screen,projection”></p> <p><!--</p> <p>P{FONT-SIZE:20pt;COLOR:red;FONT-FAMILY:宋体}</p> <p>--></p> <p></style></p> <p></head></p> <p>其中，p成为选择器，有三种类型的选择器：html标签、class、id</p> <p><em>--外部样式表(Linked style sheets)</em></p> <p>首先编写一个test.css文件，文件中的内容如下：</p> <p>P { <br></br>        FONT-SIZE: 20pt; <br></br>        COLOR: red; <br></br>        FONT-FAMILY: '宋体' <br></br>    }</p> <p>网页中引入css样式：</p> <p><link rel=”StyleSheet” href=”test.css” type=”text/css” media=”screen”> type和media可选，rel和href必选，如果用了type属性，必须设置为text/css。</p> <p><em>--输入样式表(imported style sheets)</em></p> <p>@import url(test.css);</p> <p><strong>样式规则选择器</strong></p> <p><em>--HTML selector:p,div</em></p> <p>分别为某个HTML标签的各个类定义样式规则</p> <p><style></p> <p>P.stop{color:red}</p> <p>P.warning{color:green}</p> <p>P.normal{color:yellow}</p> <p></style></p> <p><em>--Class selector:</em>  关联clss selector、独立class selector</p> <p>为某个类别的所有HTML标签定义样式规则</p> <p><style></p> <p>.blueone{color:blue}</p> <p></style></p> <p><em>--ID selector:</em>一个网页文件中只能有一个元素能使用某一ID属性值，ID selector就是为样式规则定义语句选择具有某一ID属性值得HTML元素。</p> <p><em>--关联选择器 指一个用空格隔开的两个或更多的单一选择器组成的字符串 优选权 关联>单一</em></p> <p><em>  P EM{color:green} </em></p> <p><em>--组合选择器 为了减少样式表的重复声明，可以在一条样式规则定义语句中组合若干个，每个选择器用逗号隔开</em></p> <p>H1，H2,P{color:green}</p> <p><em>--伪元素选择器 指对同一个HMTL元素的各种状态和其所包括的部分内容的一种定义方式，例如，对于超链接标签的正常状态、访问过的状态、选中状态、光标移到超链接文本上的状态，对于段落的首字母和首行</em></p> <p>格式如下：</p> <p>HTML元素:伪元素{属性:值}</p> <p>常用的伪元素：</p> <p>A:active、A:hover、A:link、A:visited、P:first-line、P:first-letter</p> <p>块级元素 ，如DIV标签 设置了宽和高的HTML元素</p> <p>类选择器与伪元素一起使用的格式：HTML元素.类名.伪元素{属性:值}</p> <p><strong>CSS样式属性分类</strong></p> <p><em>--字体</em><em>--</em><em>背景</em><em>--</em><em>文本</em><em>--</em><em>位置</em><em>--</em><em>布局</em><em>--</em><em>边缘</em><em>--</em><em>列表</em><em>--</em><em>其他</em></p> <p><em>font-family、font-size(绝对大小和相对大小，相对大小的设置可以为larger或smaller，绝对单位有：px、mm、cm、in、pt、pc，相对单位有em、ex、%)、font-style、text-decoration、font-weight、</em></p> <p><em>font-variant、text-transform、Color(三种表示方法:#RRGGBB、rgb(R,G,B)、red)、</em></p> <p><em>background-color、background-image(例如:{background-image:url(‘’)})、background-repeat(设置值:no-repeat,repeat,repeat-x,repeat-y)、background-attachment(设置值:fixed,scroll)、background-position(left,center,right,20px,top,center,bottom)、background、word-spacing、letter-spacing、vertical-align(设置值:sub(下标),super(上标),top(与顶端对齐),middle(居中),bottom(与底端对齐),相对于元素行高的百分比</em><em>)、text-align(设置值:left,right,center,justify),text-indent(文本第一行的缩进值)</em><em>,</em></p> <p><em>white-space(normal,pre,nowrap),line-height</em></p> <p><strong>Filter(CSS滤镜)</strong></p> <p><div style="width:12;height:40;background-color:red; <br></br>    filter:Alpha(opacity=80)Blur=(Add=5,Direction=135)"> CSS滤镜<br>www.baidu.com</div> <br></br><div style="width:12;height:40;background-color:red; <br></br>    filter:Alpha(opacity=80)Blur=(Add=5,Direction=135)FlipV">CSS滤镜<br>www.baidu.com</div></p> <p>filter参数:</p> <p>-alpha(opacity=?,finishopacity=?,style=?,StartX=?,StartY-?,FinishX=?,FinishY=?)</p> <p>-BlendTrans(Duration=?)</p> <p>-Blur(Add=?,Direction=?,Strength=?)</p> <p>-Chroma(Color=?)</p> <p>-DropShadow(Color=?,Offx=?,Offy=?,Positive=?)</p> <p>-FlipH,FlipV,Gray,Invert,Light,Xray</p> <p>-Glow(Color=?,Strength=?)</p> <p>-Mask(Color=?)</p> <p>-RevealTrans(Duration=?,Transition=?)</p> <p>-Shadow(Color=?,Direction=?)Direction取值为45的整数倍</p> <p>-Wave(Add=?,Freq=?,LightStrength=?,Phase=?,Strenght=?)</p> <p><strong>位置</strong></p> <p>位置属性就是指定元素的位置，它是CSS-P中的内容，CSS-P是CSS的一个扩展，它可以用阿里控制任何网页元素在浏览器文档窗口中的位置</p> <p>Position 设置值:absolute,relative,static</p> <p>left</p> <p>top</p> <p>width</p> <p>height</p> <p>Z-index</p> <p><strong>边缘</strong></p> <p>margin(margin-top、margin-right、margin-bottom、margin-left)</p> <p>padding(padding-top,padding-right,padding-bottom.padding-left)</p> <p>border-width(border-top-width,设置值：thin,medium,thick或数值)</p> <p>border-color(border-top-color)</p> <p>border-style(border-top-style)设置值:none,dotted,dashed,solid,double,groove,ridge,inset,outset</p> <p>border(border-top)</p> <p><strong>列表</strong></p> <p>list-style-type 设置值：disc(实心圆),circle(空心圆),square(方块),decimal(阿拉伯数字),lower-roman(小写罗马数字),upper-roman(大写罗马数字),lower-alpha(小写英文字母),upper-alpha(大写英文字母),none(无项目符号)</p> <p>list-style-image</p> <p>list-style-position 设置值:inside,outside</p> <p>list-style</p> <p><strong>其它</strong></p> <p>Cursor 设置值:hand(手型),crosshair(‘+'型),text(‘|’型),wait(等待),default,help,e-resize(东箭头),ne-resize,n-resize,nw-resize,w-resize,sw-resize,s-resize,se-resize,auto</p> <p><strong>样式规则的注释与有效范围</strong></p> <p><em>样式表中的注释</em></p> <p>使用”/*要注释的内容*/”格式进行注释，注释不能嵌套</p> <p><em>样式规则的继承</em></p> <p>所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则</p> <p><em>样式规则的优先级</em></p> <p>-ID选择器>CLASS选择>HTML标签选择器</p> <p>-内联样式表>嵌入样式表>链接样式表</p>
</div> 
<p>转载于:https://www.cnblogs.com/java-pan/archive/2012/03/26/html-css.html</p>                    </div>
                </div>
            </div>
            <div class="col-sm-10 col-sm-offset-1" style="margin-top: 1px;">
                <div class="listBlocks content_box">
                    <h3>更多相关：</h3>
                    <ul class="arcListWrap">
                        <li>
                    <div class="arcTitle clearfix">
                        <h3><a href="//11gx.com/rc2tnalwvi/" target="_blank">前端如何查看音频的长度_重学前端基础：如何查看文档对象的所有属性？如何文档查找节点？...</a></h3>
                    </div>
                    <div class="clearfix">
                        <div class="arcDes">
                            <p>文档树Document Object Model (DOM) 为文档对象模型， 它使用对象的表示方式来表示对应的文档结构及其中的内容。下面为一个样例 p 元素在文档中的对象所包含的所有属性。控制台：p#domaccessKey: ""align: ""assignedSlot: nullattributeStyleMap: Style...
                            </p>
                        </div>
                    </div>
				</li><li>
                    <div class="arcTitle clearfix">
                        <h3><a href="//11gx.com/9mlris6z1d/" target="_blank">第二十五章  面向对象------封装、内置函数、反射、动态导入</a></h3>
                    </div>
                    <div class="clearfix">
                        <div class="arcDes">
                            <p>1、封装 什么是封装？ 　　1.对外部隐藏内部的属性，以及实现细节，给外部提供使用的接口 　　　　注意：封装有隐藏的意思，但不是单纯的隐藏 　　　　学习封装的目的：就是为了能够限制外界对内部数据的访问 　　python中属性的权限分为两种： 　　1.公开的 　　　　没有任何限制，谁都可以访问 　　2.私有的 　　　　只有当前类本身能狗...
                            </p>
                        </div>
                    </div>
				</li><li>
                    <div class="arcTitle clearfix">
                        <h3><a href="//11gx.com/9qfnijxdom/" target="_blank">js query复习</a></h3>
                    </div>
                    <div class="clearfix">
                        <div class="arcDes">
                            <p>jquery:js框架; 主要区别在dom的操作 jq需要引入文件并且引入顺序在最上面; 找元素 操作元素 js:doucument.getElementById..classname,tagname,name jq:$(选择器) dom是js对象 jqDom是jquery对象 操作内容 js:dom.innerHTML(非表单元素)...
                            </p>
                        </div>
                    </div>
				</li><li>
                    <div class="arcTitle clearfix">
                        <h3><a href="//11gx.com/iozfvtjd19/" target="_blank">RAP Mock.js语法规范</a></h3>
                    </div>
                    <div class="clearfix">
                        <div class="arcDes">
                            <p>Mock.js 的语法规范包括两部分： 数据模板定义规范（Data Template Definition，DTD）数据占位符定义规范（Data Placeholder Definition，DPD）1.数据模板定义规范 DTD 数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：   // 属性名   name
// 生...
                            </p>
                        </div>
                    </div>
				</li><li>
                    <div class="arcTitle clearfix">
                        <h3><a href="//11gx.com/kroqcymsvj/" target="_blank">vue1.0</a></h3>
                    </div>
                    <div class="clearfix">
                        <div class="arcDes">
                            <p>vue 　　vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。从技术上讲， Vue.js 集中在 MVVM 模式上的视图模型层，并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。相比其它的 MVVM 框架，Vue.j...
                            </p>
                        </div>
                    </div>
				</li><li>
                    <div class="arcTitle clearfix">
                        <h3><a href="//11gx.com/2iskx0dtrv/" target="_blank">python中利用lxml模块解析xml文件报错XMLSyntaxError: Opening and ending tag mismatch</a></h3>
                    </div>
                    <div class="clearfix">
                        <div class="arcDes">
                            <p>今天在代码中第一次使用lxml解析xml文件时出错了,   
XMLSyntaxError: Opening and ending tag mismatch: keyEffectiveDate line 21 and keyEffectiveData, line 21, column 80  
截图如下 
 
而我的xml文件是这样的...
                            </p>
                        </div>
                    </div>
				</li><li>
                    <div class="arcTitle clearfix">
                        <h3><a href="//11gx.com/xlkrshnt3g/" target="_blank">JSP中是EL表达式与JSTL</a></h3>
                    </div>
                    <div class="clearfix">
                        <div class="arcDes">
                            <p>EL语法：${ } EL取值来自于作用域对象  1.如何从指定作用域取值(默认从最小作用域取值) 　　pageScope、requestScope、sessionScope、applicationScope 　　${pageScope.xxx }--- ${requestScope.xxx} --- ${sessionScope.xx...
                            </p>
                        </div>
                    </div>
				</li><li>
                    <div class="arcTitle clearfix">
                        <h3><a href="//11gx.com/qy02il1xvr/" target="_blank">HTML学习笔记之基本介绍</a></h3>
                    </div>
                    <div class="clearfix">
                        <div class="arcDes">
                            <p>超文本标记语言 (Hyper Text Markup Language，HTML）不是一种编程语言，而是一种标记语言，用一套标记标签描述网页 HTML 标记标签又被称为 HTML 标签（HTML Tag），它是由尖括号包围的关键词，一般情况下成对出现，其中第一个标签是开始标签，第二个标签是结束标签 还需要清楚的一个概念是 HTML...
                            </p>
                        </div>
                    </div>
				</li><li>
                    <div class="arcTitle clearfix">
                        <h3><a href="//11gx.com/8oefuli62s/" target="_blank">前端知识之HTML内容</a></h3>
                    </div>
                    <div class="clearfix">
                        <div class="arcDes">
                            <p>参考:http://www.cnblogs.com/liwenzhou/p/7988087.html     HTML介绍 Web服务本质    import socketsk = socket.socket()sk.bind(("127.0.0.1", 8080))
sk.listen(5)while True:conn, addr...
                            </p>
                        </div>
                    </div>
				</li><li>
                    <div class="arcTitle clearfix">
                        <h3><a href="//11gx.com/z3gf7la2cy/" target="_blank">thinkphp5内置标签</a></h3>
                    </div>
                    <div class="clearfix">
                        <div class="arcDes">
                            <p>thinkphp5内置标签 知道内置标签怎么用，查手册的时候好查 却功能的时候在里面找着来用 内置标签一览   1 内置标签
 2 
 3 变量输出使用普通标签就足够了，但是要完成其他的控制、循环和判断功能，就需要借助模板引擎的标签库
 4 功能了，系统内置标签库的所有标签无需引入标签库即可直接使用。
 5 内置标签包括：
 6 标...
                            </p>
                        </div>
                    </div>
				</li><li>
                    <div class="arcTitle clearfix">
                        <h3><a href="//11gx.com/231btpq5hx/" target="_blank">centos设置网络自动启动</a></h3>
                    </div>
                    <div class="clearfix">
                        <div class="arcDes">
                            <p>问题描述 
centos7虚拟机如何设置开机自启动网络设置 
解决方法 
切换到root用户进入到网络设置的目录下面cd /etc/sysconfig/network-scripts/当前目录下面有一个类似于ifcfg-ens33，使用vim打开文件进行编辑，将ONBOOT=no修改成为yes就可以了...
                            </p>
                        </div>
                    </div>
				</li><li>
                    <div class="arcTitle clearfix">
                        <h3><a href="//11gx.com/bu8yj7c1qm/" target="_blank">Jtabbedpane设置透明、Jpanel设置透明</a></h3>
                    </div>
                    <div class="clearfix">
                        <div class="arcDes">
                            <p> 摘自https://zhidao.baidu.com/question/983204331427010139.html java中如何设置Jtabbedpane为透明 20在Jtabbedpane下有背景图片，如何设置让他透明呢？0oo宝贝xxX | 浏览 1147 次 |举报我有更好的答案 2014-12-30最佳答案你好，你可以...
                            </p>
                        </div>
                    </div>
				</li><li>
                    <div class="arcTitle clearfix">
                        <h3><a href="//11gx.com/9m3fhq1dut/" target="_blank">使用nat方式解决虚拟机联网问题</a></h3>
                    </div>
                    <div class="clearfix">
                        <div class="arcDes">
                            <p>  本文全文参考：http://jingyan.baidu.com/album/4e5b3e1957979d91901e24f1.html?picindex=1，谢谢      　　对于很多的linux初学者来说，最开始学习linux时通常是在虚拟机上进行的，然而对于新手来说虚拟机联网会对他们来说是比较困难的。这里我根据自己的经验写了...
                            </p>
                        </div>
                    </div>
				</li><li>
                    <div class="arcTitle clearfix">
                        <h3><a href="//11gx.com/syx8rqtn7i/" target="_blank">Nginx基本配置、性能优化指南</a></h3>
                    </div>
                    <div class="clearfix">
                        <div class="arcDes">
                            <p>转载自：http://www.chinaz.com/web/2015/0424/401323.shtml 　　大多数的Nginx安装指南告诉你如下基础知识——通过apt-get，或yum安装，修改这里或那里的几行配置，好了，你已经有了一个Web服务器了！而且，在大多数情况下，一个常规安装的nginx对你的网站来说已经能很好地工作了。然...
                            </p>
                        </div>
                    </div>
				</li><li>
                    <div class="arcTitle clearfix">
                        <h3><a href="//11gx.com/9utd5fiy8k/" target="_blank">Outlook接收qq的邮件</a></h3>
                    </div>
                    <div class="clearfix">
                        <div class="arcDes">
                            <p>1.先去qq邮箱，设置，账户 开启pop3服务，假如之前开启过，最好关闭之后重新开启 最新版本的必须使用邮箱的独立密码才可以收取邮件 (否则就算你之前开通了，也无法用你的qq账号和密码收取邮件的)   2.高级设置里面，需要勾选ssl加密，pop3端口设置为995 另外，记得不要同步删除邮件服务器的邮件 http://jingyan....
                            </p>
                        </div>
                    </div>
				</li>                    </ul>
                </div>
            </div>
        </div>

        <!-- <div class="simle_box300"></div> -->
    </div>
    
</section>



<div class="footer-wrapper">
  <div class="footer">
    <p class="text-center">
      ©2024 11GX.COM    </p>
  </div>
</div></body>
</html>