| 教你写一个简单的网页（html网页开发入门） | 您所在的位置：网站首页 › 网页怎么创建 › 教你写一个简单的网页（html网页开发入门） |
|
网页的组成
HTML 网页的具体内容和结构 CSS 网页的样式（美化网页最重要的一块） JavaScript 网页的交互效果，比如对用户鼠标事件作出响应 HTML 什么是HTMLHTML的全称是HyperTextMarkupLanguage，超文本标记语言 其实它就是文本，由浏览器负责将它解析成具体的网页内容 比如，浏览器会将下面的HTML代码 知乎 CSDN 博客园转化为 知乎 黑马 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. 第一个网页 这是网页的内容 百度 666666666 666666666 666666666 666666666 666666666 ppppppppppp ppppppppppp hahaha hahaha hahaha ahahah ahahah ahahah CSS 什么是CSSCSS的全称是Cascading Style Sheets,层叠样式表 它用来控制HTML标签的样式，在美化网页中起到非常重要的作用 CSS的编写格式是键值对形式的，比如color : red background-color : blue font-size : 20px 冒号左边的是属性名，冒号右边的是属性值 CSS三种书写方式 行内样式：（内联样式）直接在标签的style属性中书写 123 内页样式：在本网页的style标签中书写 123 span { color:yellow; background-color:blue }外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用 test.css span { color:yellow; background-color:blue }test.html 123 CSS选择器 选择器的作用选择对应的标签，为之添加样式 标签选择器 根据标签名找到标签 类选择器 标签可以有多个类 id选择器 id是唯一的，不能一样 选择器组合 中间不留空格，粘在一起 后代选择器 中间一个空格，不管嵌套多少层 相邻兄弟选择器 属性选择器 /*标签选择器*/ p{ color:red; } /*类选择器*/ .first{ color:red; } .second{ color:blue; } /*id选择器*/ #first{ color:yollew; } #second{ color:green; } /*群组选择器*/ .first, #second, h1{ } /*选择器组合*/ div.first{ } /*后代选择器*/ div p{ } /*子标签选择器*/ div > p{ } /*相邻兄弟选择器*/ div ＋ p{ } /*属性选择器*/ div[name]{ } div[name][age]{ } div[name="jack"]{ } p1 p2 div1 div2 与div相邻的p 123 123 123 123 hhh 伪类 属性描述:active向被激活的元素添加样式:focus向拥有键盘输入焦点的元素添加样式:hover当鼠标悬浮在元素上方时，向元素添加样式:link向未被访问的链接添加样式:visited向已被访问的链接添加样式:first-child向元素的第一个子元素添加样式:lang向带有指定lang属性的元素添加样式:first-letter向文本的第一个字母添加特殊样式:first-line向文本的首行添加特殊样式:before在元素之前添加内容after在元素之后添加内容 div { width:100px; height:100px; background-color:red; } div:hover{ background-color:blue; } div:before{ content:"666"; } 选择器优先级针对性越强，优先级越高 选择器的权值 通配选择符（*）:0 标签：1 类：10 属性：10 伪类：10 伪元素：1 id：100 important：1000 原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先 important > 内联 > id > 类 > 标签｜伪类｜属性选择器 > 伪元素 > 通配符 > 继承 CSS标签的类型 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，外边距）盒子摆放的时候不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出 div { width: 100px; height: 100px; background-color: blue; margin-top: 20px; padding-top: 20px; border: 20px solid red; border: 5px dashed red;/*虚线*/ } 123 456 内容（content）属性 属性描述height设置元素高度max-height设置元素的最大高度max-width设置元素的最大宽度min-height设置元素的最小高度min-width设置元素的最小宽度width设置元素的宽度 填充（padding，内边距）属性 属性描述padding在一个声明中设置所有内边距属性padding-bottom设置元素的下内边距padding-left设置元素的做内边距padding-right设置元素的有内边距padding-top设置元素的上内边距 边框border属性 属性描述border-width宽度border-style样式border-color颜色border-radius圆角 边界margin属性 属性描述margin在一个声明中设置所有外边距属性margin-bottom设置元素的下外边距margin-left设置元素的左外边距margin-right设置元素的右外边距margin-top设置元素的上外边距 |
| CopyRight 2018-2019 实验室设备网 版权所有 |