码迷,mamicode.com
首页 > 其他好文 > 详细

11.13学习日志

时间:2020-11-26 14:16:56      阅读:6      评论:0      收藏:0      [点我收藏+]

标签:相同   重要   查找   white   submit   直接   radio   后台   border   

 11.13学习日志

html部分

html头部声明DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上。

<head>

<title>标签

title就是说这个网页是干什么的,公司名、产品名、功能名等等,全是给浏览器,以方便用户能快速准确得了解到这个网页要介绍的内容。

title的特点:

title标签只能在head标签内出现;

标签内的内容通常在浏览器的标题栏中显示;

浏览器中收藏夹内书签的名称是title的内容;

title的内容可以方便搜索引擎索引页面;

从搜索引擎搜索到的内容的标题往往是网页title的内容;

title通常体现了网页的主题内容,所以记得一定要加上。

<meta>标签<meta>元素可提供有关页面的原信息(meta-information),比如针对搜索引擎和更新频率的描述和关键词。位于head标签内,单独出现,必须被正确地关闭<meta name=" " content="" />meta属性主要非为两组:1)name属性与content属性name属性的值所描述的内容(值)通过content属性表示,便于爬虫查找、分类。其中最重要的是description、keywords和robots。2)http-equiv属性和content属性HTML标签的规范1、所有标签都必须要有相应的结束标签;2、标签与标签的属性都必须使用小写;3、所有标签都必须合理嵌套;4、<img>标签的alt属性:搜索引擎会比较重视,要充分利用它来放置关键词。它的好处包括:1)获取或设置在图像不可用或当前正在下载且尚未完成的情况下浏览器显示的替换标题;2)搜索引擎把alt属性里的内容当了那个图片的关键词,关键词写得好,图片被搜索到的几率也是非常大的。5、HTML转义字符。HTML常用标签块属性标签(块元素)

<div></div>可以把文档分割为独立的、不同的部分

<h1></h1>…<h6></h6>可定义标题。<h1>定义最大的标题,<h6>定义最小的标题

<ol></ol>定义有序列表,必须嵌套<li>

<ul></ul>定义无序列表,必须嵌套<li>

<li></li>定义列表项目,是有序列表和无序列表的子标签

<dl></dl>定义自定义列表

<dt></dt>一般用于定义列表标题

<dd></dd>定义自定义列表内容

<table></table>定义表格

<tr></tr>定义表格行<th></th>定义表头          <td></td>定义表格单元<p></p>定义段落<br/>换行符<from></from>用于为用户输入创建HTML表单行内属性标签(内联元素)                     <span></span>被用来组合文档中的行内元素

 <var></var>定义变量,在浏览器中一般会斜体显示

 <em></em>把文本定义为强调内容,浏览器一般以斜体显示

 <a></a>锚文本,最重要的属性是href,指定连接的目标

 <img/>是单标签,链接图片,有src和alt属性

 <textarea></textarea>定义多行文本输入控件,可通过cols和rows属性来规定textarea的尺寸,y也可以用css的                       

             width和height属性来控制。

  <select></select>可创建单选或多选菜单 ,子标签是select

  <option></option>定义下拉列表中的一个选项,位于select元素内部

  <input>用于搜集用户信息。根据不同的tpye属性值,输入字段拥有很多种形式。输入字段可以是文本字段text,复选框   checkbox,掩码后的文本控件,单选按钮radio,按钮button,submit提交,重置reset,空白hidden等等

  <strong></strong>把文本定义为更强的强调的内容

块属性标签特点:      标签默认撑满整行,总是在新的一行开始;高度、行高以及顶底边距都可控制;未设定宽度时,宽度为容器的100%;行内属性标签特点行内属性标签可在一行显示;宽高即顶底边距不可控制;内容撑开宽高;

CSS部分

css引入方式:

1、外部引入:在HTML的head部分<link rel="stylesheet" type="text/css" href="http://blog.163.com/html5_12/所需的CSS文件路径">,引入外部的CSS文件;(优缺点:使用最广泛,一个css文件可控制多个页面,从整站来讲,减少代码数量,提高加载速度,便于维护。)

2、头部引入:在head部分加入<style type="text/css"></style>标签,CSS代码就写在标签内(style是表明引入文件类型的标签;type是表明文件类型;(优缺点:使用也比较多,加载速度快,一般用于访问量较大的网站或首页,但是整站代码较多,不利于维护)

3、在标签内直接写CSS:直接把css标签写在页面标签里;(优缺点:用得比较少,权重最高,代码多,加载慢,不利于维护)

4、使用@import引入css(优缺点:适合大型网站css架构)

CSS选择器

1、标签名选择器:如:p{},即直接使用HTML标签作为选择器,在实际的应用中,我们习惯用它设置标签的一些默认属性或者和后代选择器一起使用;

2、类选择器:如  .polaris();前端开发者最常用。

特点:(1)可以给不同标签设置同一个类,从而用一条CSS命令控制几个标签,减少代码量,使页面修改简单,易维护、易改版。(2)后台工作人员几乎不会用到有关class的相关设置,不需要跟后台人员之间进行交互;(3)可以通过js等动态改变标签的classname,从而改变整个标签的样式,使前端动态效果实现起来更为容易。

命名规范:第一个字符不能使用数字,在Mozilla或firefox中不起作用。

3、ID选择器: 如:#polaris();在同一个HTML文档中不能出现两个相同的ID名称,也就是说ID具有唯一性。4、后代选择器:如 .polaris  span  img{},后代选择器实际上是使用多个选择器加上中间的空格来找到具体的要控制的标签。    5、群组选择器:.polaris , span , img{},实际上是对CSS的一种简化写法,是把具有相同CSS样式的不同选择器放在一起,减少代码量。CSS选择器中的属性顺序显示属性:display, list-style, position, float, clear自身属性:width, height, margin, padding,border,background文本属性:color, font, text-decoration, text-align,vertical-align, white-space, content  符合浏览器的渲染顺序,最终达到提高执行效率目的 CSS优先级

所谓优先级是指CSS样式在浏览器中被解析的先后顺序。

(1) CSS不同引入方式的优先级:标签内嵌样式 > 头部书写样式 > 外部引用样式 > 浏览器默认样式。

(2) CSS选择器的优先级:id > class > tagname.

(3) 多个选择器混用时的优先级:例子.a  .b  c{}和.a  c{},它们指向的目标都是c,但是前者的优先级高于后者。

     注:当指向同一目标选择器的优先级相同时,后面的优先级大于前面的优先级;当同一个标签中定义有多个class名时,各个类选择器之间的优先级与html中的class名排列无关,而是与css文件中各个类选择器的排列有关。

11.13学习日志

标签:相同   重要   查找   white   submit   直接   radio   后台   border   

原文地址:https://www.cnblogs.com/yzfnb/p/14019386.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!