web前端学习笔记

A:html和CSS的关系；1.HTML是超文本格式，它可以包含普通文字，图画，视频，声音的网页；CSS是HTML网页中文字的大小，颜色，边框的大小，颜色的修饰，总的来说CSS就相当于是HTML的外衣；2.CSS与HTML的链接；h1helloword!/h1/*html内容*/styletype=text/cssh1{font-size:12px;设置字体大小color:#930;text-align:center;}/styleA:认识HTML标签h1勇气/h1/*标题标签*/p这就是的第一个网页/p/*标签段落*/imgsrc=1.jpg/*图片插入标签*/标签的语法标签由英文符号和括起来表示，如html如：p/pdiv/divspan/spanCSS样式q/q引用标签A:基本标签及属性1.metahttp-equiv=Conten-Typecontent=text/html;charset=utf-8!--网页编译属性--2.em/em!--文体斜体属性--3.strong/strong!--文字粗体属性--4.span/spanA:等级标题标签h1/h1一级标签h2/h2二级标签h3/h3三级标签h4/h4四级标签h5/h5五级标签h6/h6六级标签A:blockquote引用标签blockquote引用文本/blockquoteblockquote/blockquote与q/q的区别是：前者相对于后是长文本的引用。A:br标签的使用br/表示换行A:空格标签的使用 空格表示A:水平下划线属性hr/HTML4.01版本hrXHTML1.0版本A:地址信息属性address地址信息/addressA:代码插入属性code要插入的一行代码/codepre多行代码插入/preA:新闻列表代码ulli信息/lili新闻/lili论坛/li/ulA:添加有顺序的列表代码olli/lili/lili/li/olA:div标签的使用div/divdiv标签相当于一个容器，把独立的逻辑区划分出来A:div标签命名divid=板块命名../divA:table表格的使用table/table整体表tr/tr表行td/td单元格th/th第一单元格也是表头tbody/tbody当表格内容多时不会一点点显示而是等全部加载完了全部显示出来；A:表格边框border;A:为表格添加标题和摘要tablesummary=摘要文本caption标题文本/captionA:新建浏览器窗口ahref=url百度/a在同窗口打开链接网页ahref=urltarget=_blank百度/a在新的窗口打开链接网页A:使用mailto在网页中链接Email地址ahref=mailto:邮件网址？subject=主题&body=主题发送/aA:ima标签imasrc=图片地址alt=下载失败替换文本title=提示文本/A:使用表单标签，与用户交互formmethod=传送方式action=服务器文件/界面设置/formformmethod=postaction=save.phplabelfor=username用户名:/labelinputtype=textname=usernameid=usernamevalue=/labelfor=pass密码:/labelinputtype=passwordname=passid=passvalue=/inputtype=submitvalue=确定name=submit/inputtype=resetvalue=重置name=reset//formA:文本输入框和密码输入框formmethod=postaction=save.php姓名：inputtype=textname=(名称)Mynamevalue=文本/br/密码：inputtype=passwordname=passvalue=文本//formA:文本域和支持多行文本输入textarearow=行数cols=列数内容输入/textarea实例：formmethod=postaction=save.phplabel个人简介：/labeltextareacols=50rows=10在这里输入内容.../textareainputtype=submitvalue=确定name=submit/inputtype=resetvalue=重置name=reset//formA:单选框与复选框代码formmethon=postaction=save.phpinputtype=radio/checkboxvalue=值name=名称checked=checked/type=radio时控件为单选框type=checked时控件为复选框value；提交数据到服务器的值（后台PHP程序使用）name；为控件命名，以备后台PHP使用checked；当设置checked=“checked”时，该选项为默认。/formA:下拉表框selectoptionvalue=提交值（向服务器提交的值）selected=“selected”（默认值）选项（显示的值）/option/selectA:下拉列表多选formmethon=postaction=save.phpselectmultiple=multiple在select中设置multiple=“multiple”optionvalue=读书/optionoptionvalue=唱歌/optionoptionvalue=音乐/option/select/formA:提交按钮inputtype=submitvalue=提交name=“submit/重置按钮inputtype=resetvalue=重置name=Reset“/A:form表单中的lable标签lablefor=控件ID名称/lable例如：formlabelfor=male男/labelinputtype=radioname=sexid=male/br/labelfor=female女/labelinputtype=radioname=sexid=female/labelfor=email输入你的邮箱地址/labelinputtype=emailid=emailplaceholder=Enteremail/formB:认识CSS样式CSS为层叠样式表，主要定义HTML内容在浏览器内的显示样式，如字体大小，颜色，字体加粗等；如：p{font-size:13px;color:red;font-weight:bold;}B:CSS代码语法p{color:blue;}B;注释代码!--注释语句--B:内联式CSS样式CSS样式可分为内联式，嵌入式，外部式；内联式如下：pstyle=color:red;font-size:12px;目标文字/pB:嵌入式CSS代码styletype=text/cssspan{color:red;}/styleB:外部式CSS样式index.html:linkhref=base.cssrel=stylesheettype=text/css/style.css例如：span{color:red;}B:CSS样式的优先级内联式嵌入式外部式B:什么是选择器选择器{样式：}B:CSS代码语法p{color:blue;};选择器{属性：值；}B:注释代码在HTML中：!--注释说明--在CSS中：/*注释说明*/B:内选择器.类选择器名称{CSS样式；}使用方法：例如span胆小如鼠/spanspanclass=stress胆小如鼠/span.stress{color:red;}还有一种是ID选择器ID选择符的前面是#号而不是.。B:类和ID选择器的区别1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用ID词列表）B:包含后代选择器.firstspan{color:red;}B:通用选择器例如：.{color:red;}B:伪类标签a:hover{color:red;}B:分组选择符h1,span{color:red;}相当于代码h1{color:red;}span{color:red;}B:实例图片imgsrc=:CSS标签的继承例如：p{bordor:1pxsolidred;}pxxxxxxxxxxxspanxxxx/spanxxxxxxxxxxx./p此样式不仅应用于p标签中所有的样式还应用于p便签中的子元素span所有标签。B:CSS样式的特殊性p{color:red;}.first{color:green;}pclass=first三年级时，我还是一个span胆小如鼠/span的小女孩。/p元素会根据权重来判断CSS样式，那个权重高就是用那种CSS样式；B:CSS层叠我们来思考一个问题：如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？好，这一小节中的层叠帮你解决这个问题。层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。如下面代码:p{color:red;}p{color:green;}pclass=first三年级时，我还是一个span胆小如鼠/span的小女孩。/p内联样式表（标签内部）嵌入样式表（当前文件中）外部样式表（外部文件中）。B:权重的最高设置我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。如下代码：p{color:red!important;}p{color:green;}pclass=first三年级时，我还是一个span胆小如鼠/span的小女孩。/p这时p段落中的文本会显示的red红色B:文字排版我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。字体设置：body{font-family:宋体;}字体颜色，字号设置：body{font-size:12px;color:#666;}字体加粗：例如：pspan{font-weight:bold}文字斜体设置：例如：pa{font-style:italic;}文字下划线设置；例如；pa{text-decoration:underline;}文字删除线的设置：例如：.p{text-decoration:line-through;}B:段落排版1.中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：p{text-indent:2em;}p1922年的春天，一个