热门关键字:
jquery > jquery教程 > jquery教程 > html网页开发入门

html网页开发入门

294
作者:管理员
发布时间:2021/1/19 19:58:41
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=3274
  HTML


  网页的具体内容和结构


  CSS


  网页的样式(美化网页最重要的一块)


  JavaScript


  网页的交互效果,比如对用户鼠标事件作出响应


  什么是HTML


  HTML的全称是HyperTextMarkupLanguage,超文本标记语言


  其实它就是文本,由浏览器负责将它解析成具体的网页内容


  比如,浏览器会将下面的HTML代码


  转化为


  知乎


  黑马


  CSDN


  的网页内容


  HTML的组成


  跟XML类似,HTML由N个标签(节点、元素、标记)组成


  HTML语法非常松散


  常见的HTML标签


  标题:h1,h2,h3,h4,h5…段落:p换行:br容器:div,span(用来容纳其他标签)表格:table,tr,td列表:ul,ol,li图片:img表单:input链接:a


  推荐开发工具(网络三剑客)dreamweawer、flash、fireworks;WebStorm.


  什么是CSS


  CSS的全称是Cascading Style Sheets,层叠样式表


  它用来控制HTML标签的样式,在美化网页中起到非常重要的作用


  CSS的编写格式是键值对形式的,比如


  color : red


  background-color : blue


  font-size : 20px


  冒号左边的是属性名,冒号右边的是属性值


  行内样式:(内联样式)直接在标签的style属性中书写


  内页样式:在本网页的style标签中书写


  外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用


  test.css


  test.html


  选择器的作用


  选择对应的标签,为之添加样式


  标签选择器 根据标签名找到标签


  类选择器 标签可以有多个类


  id选择器 id是唯一的,不能一样


  选择器组合 中间不留空格,粘在一起


  后代选择器 中间一个空格,不管嵌套多少层


  相邻兄弟选择器


  属性选择器


  伪类


  属性描述:active向被激活的元素添加样式:focus向拥有键盘输入焦点的元素添加样式:hover当鼠标悬浮在元素上方时,向元素添加样式:link向未被访问的链接添加样式:visited向已被访问的链接添加样式:first-child向元素的第一个子元素添加样式:lang向带有指定lang属性的元素添加样式:first-letter向文本的第一个字母添加特殊样式:first-line向文本的首行添加特殊样式:before在元素之前添加内容after在元素之后添加内容


  选择器优先级


  针对性越强,优先级越高


  选择器的权值


  通配选择符(*):0


  标签:1


  类:10


  属性:10


  伪类:10


  伪元素:1


  id:100


  important:1000


  原则:选择器的权值加到一起,大的优先;如果权值相同,后定义的优先


  important > 内联 > id > 类 > 标签|伪类|属性选择器 > 伪元素 > 通配符 > 继承


  HTML有N多标签,根据显示的类型,主要可以分为2大类


  块级标签,独占一行的标签


  行内标签(内联标签),多个行内标签能同时显示在一行


  修改标签的显示类型


  CSS中有个display属性,能修改标签的显示类型


  属性说明none隐藏标签block块级类型,独占一行,能随时设置宽度和高度inline行内类型(内联类型),多个行内标签可以显示在同一行,宽度和高度取决于内容尺寸inline-block行d内-块级类型(内联——块级类型),多个行内标签可以显示在同一行,能随时设置宽度和高度


  CSS属性


  CSS有N多属性,根据继承性,主要可以分为2大类


  可继承属性


  - 父标签的属性值会传递给子标签


  - 一般是文字控制属性


  不可继承属性


  - 父标签的属性值不能传递给子标签


  - 一般是区块控制属性


  CSS属性——可继承属性


  所有标签可继承


  visibility、cursor


  内联标签可继承


  letter-spacing、word-spacing、shite-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction


  块级标签可继承


  text-indent、text-align


  列表标签


  list-style、list-style-type、list-style-position、list-style-image


  CSS属性——不可继承属性


  display、margin、border、padding、background


  height、min-height、max-height、width、min-width、max-width


  over-flow、position、left、right、top、bottom、z-index


  float、clear


  table-layout、vertical-align


  page-break-after、page-bread-before


  unicode-bidi


  盒子模型


  网页上每一个标签都是一个盒子


  每个盒子都有四个属性


  属性说明内容(content)盒子里装的东西,网页中通常是指文字和图片填充(padding,内边距)怕盒子里装的(贵重的)东西损坏,而添加的泡沫或者其它抗震的辅料边框(border)盒子本身边界(margin,外边距)盒子摆放的时候不能全部堆在一起,盒子之间要留一定空隙保持通风,同时也为了方便取出


  属性描述Height</td>设置元素高度max-Height</td>设置元素的最大高度max-Width</td>设置元素的最大宽度min-Height</td>设置元素的最小高度min-Width</td>设置元素的最小宽度Width</td>设置元素的宽度


  属性描述padding在一个声明中设置所有内边距属性padding-bottom设置元素的下内边距padding-left设置元素的做内边距padding-right设置元素的有内边距padding-top设置元素的上内边距


  属性描述border-Width</td>宽度border-style样式border-color颜色border-radius圆角


  属性描述margin在一个声明中设置所有外边距属性margin-bottom设置元素的下外边距margin-left设置元素的左外边距margin-right设置元素的右外边距margin-top设置元素的上外边距




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐