超文本 • Web 是一个超文本文件的集合 • 超文本文件是 Web 的基本组成单元,也称为网页或HTML文档、Web页等,通常是以.html或.htm为后缀的文件 • Web页之间通过超文本中的超级链接组织在一起
什么是 HTML • HTML(HyperText Markup Language):超文本标记语言,一种纯文本类型的语言 – 使用带有尖括号的“标记”将网页中的内容逐一标识出来 • 用来设计网页的标记语言 • 用该语言编写的文件,以 .html 或者 .htm 为后缀 • 由浏览器解释执行 • HTML 页面上,可以嵌套用脚本语言编写的程序段,如:VBScript,JavaScript
元素，也叫标签、标记。分为封闭型的双标记和单标记。
块级元素：不管数据量多少，至少占一整行，如标题元素h1-h6、p、div行内元素：不会产生换行大型网站建站
规划网站功能UI设计师设计版面web前端设计师将设计出来的图片制作成网页后端程序员编写后台程序网站交给运维部发布到Web服务器前端：html / css / js(javascript) 后端：python / php / java
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>my html</title> </head> <body> <!--输入ul>li*3,按tab键,创建无序列表--> <ul type="square"> <li>Network</li> <li>Linux</li> <li>Service</li> </ul> <ul type="circle"> <li>Network</li> <li>Linux</li> <li>Service</li> </ul> <ul> <li>Network</li> <li>Linux</li> <li>Service</li> </ul> <!--输入ol>li*3,按tab键,创建有序列表--> <ol type="I" start="2"> <li>Network</li> <li>Linux</li> <li>Service</li> </ol> <ol type="a" start="1"> <li>Network</li> <li>Linux</li> <li>Service</li> </ol> <ol> <li>Network</li> <li>Linux</li> <li>Service</li> </ol> <!--输入以下内容,按tab键,创建表格--> <!--table>tr*3>td*3--> <table border="2px" width="400px"> <tr> <td rowspan="2">1</td> <td colspan="2">1</td> </tr> <tr> <td>1</td> <td>1</td> </tr> <tr> <td>姓名</td> <td>阶段</td> <td>课程</td> </tr> <tr> <td>张三</td> <td>一</td> <td>Linux</td> </tr> <tr> <td>李四</td> <td>二</td> <td>运维</td> </tr> </table> <!--跳转--> <a href="#id3">跳转h3</a> <!--超链接--> <a href="http://www.sogou.com" target="_blank">搜狗搜索</a> <!--<hr>表示分隔线--> <hr> <!--网络图片--> <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2726102536,2091908784&fm=26&gp=0.jpg"> <hr> <!--本地图片,设置高度和宽度--> <img width="400" height="100" src="static/imgs/html_css.jpeg"> <hr> <!--输入字块,并标上颜色--> <div>人员有：<span style="color: blue">bob</span>和<span style="color: red">tom</span></div> <hr> 2<sup>3</sup>=8 log<sub>2</sub>N <hr> <b>nsd1812班</b>nsd1812班<i>nsd1812</i><u>nsd1812班</u><s>nsd1812班</s> <hr> <abc>©á⦰ <hr> <div>这里有空格 你好</div> <!--h后面的数值表示标题级别--> <h1>1号标题</h1> <h2>2号标题</h2> <!--标记跳转地址--> <h3 id="id3">3号标题</h3> <h4>4号标题</h4> <h5>5号标题</h5> <h6>6号标题</h6> <p>段落元素</p> <p>段落元素</p> <div>块元素</div> <div>块元素</div> <div>块元素</div> <div>块元素</div> <div>人员有：<span>bob</span>和<span>tom</span></div> </body> </html> ########################################################################## <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>myhtml2</title> </head> <body> <!--form用于创建表单--> <form action="https://www.sogou.com/web" target="_blank"> <input type="text" name="query"> <input type="submit" value="搜狗搜索"> </form> <hr> <form action="https://www.baidu.com/s" target="_blank"> <input type="text" name="wd"> <input type="submit" value="百度搜索"> </form> </body> </html> <hr> <!--select用于创建下拉菜单--> <form action=""> <!--textarea用于创建文本框--> <textarea name="t" id="t" cols="50" rows="10"></textarea><br> <select name="lesson" id=""> <option value="linux">linux</option> <option value="net">net</option> <option value="service">serive</option> <option value="python">python</option> </select> <input type="submit"> </form> <hr> <!--checkbox用于创建复选--> <form action=""> <label><input type="checkbox" name="lesson" value="linux">linux</label> <label><input type="checkbox" name="lesson" value="net">net</label> <label><input type="checkbox">service</label> <label><input type="checkbox">python</label> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> <hr> <!--radio用于创建单选--> <form action="http://www.kuaidi100.com/query" target="_blank"> 单号:<input type="text" name="postid"><br> <!--radio表示选择按钮,标签label与按钮没有直接关联--> <input type="radio" name="type" value="zhongtong"><label>中通</label> <label> <input type="radio" name="type" value="youzhengguonei"> 邮政 </label> <input id="st" type="radio" name="type" value="shentong"> <label for="st">申通</label> <br><input type="submit" value="查询"> </form> <hr> <form action=""> 用户名:<input type="text" placeholder="username"> 密码:<input type="password" placeholder="password"> <input type="submit" value="登陆"> </form>以上网页效果如下图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>myhtml2</title> </head> <body> <!--form用于创建表单--> <form action="https://www.sogou.com/web" target="_blank"> <input type="text" name="query"> <input type="submit" value="搜狗搜索"> </form> <hr> <form action="https://www.baidu.com/s" target="_blank"> <input type="text" name="wd"> <input type="submit" value="百度搜索"> </form> </body> </html> <hr> <!--select用于创建下拉菜单--> <form action=""> <!--textarea用于创建文本框--> <textarea name="t" id="t" cols="50" rows="10"></textarea><br> <select name="lesson" id=""> <option value="linux">linux</option> <option value="net">net</option> <option value="service">serive</option> <option value="python">python</option> </select> <input type="submit"> </form> <hr> <!--checkbox用于创建复选--> <form action=""> <label><input type="checkbox" name="lesson" value="linux">linux</label> <label><input type="checkbox" name="lesson" value="net">net</label> <label><input type="checkbox">service</label> <label><input type="checkbox">python</label> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> <hr> <!--radio用于创建单选--> <form action="http://www.kuaidi100.com/query" target="_blank"> 单号:<input type="text" name="postid"><br> <!--radio表示选择按钮,标签label与按钮没有直接关联--> <input type="radio" name="type" value="zhongtong"><label>中通</label> <label> <input type="radio" name="type" value="youzhengguonei"> 邮政 </label> <input id="st" type="radio" name="type" value="shentong"> <label for="st">申通</label> <br><input type="submit" value="查询"> </form> <hr> <form action=""> 用户名:<input type="text" placeholder="username"> 密码:<input type="password" placeholder="password"> <input type="submit" value="登陆"> </form>以上网页效果如下图:
CSS：层叠样式表、级联样式表 CSS分类：
内联样式：类似于属性，在标签上直接设置样式内部样式：在html的head标签中设置样式外部样式：将样式表单独定义成一个文件样式表的应用，注意的两个方面
选择器：给谁设置样式样式声明：设置成什么样样式表的特性
继承性：子元素的样式继承于父元素层叠性：某一元素，它的样式可以有多个来源，不冲突时，效果累加优先级：当多个样式应用在同一元素上，如果设置有冲突，样式有优先级（就近原则）选择器
通用选择器：* 匹配所有的选择器元素选择器：针对html元素（标签）进行设置类选择器：把需要具有相同样式的元素设置成一样的class，可以理解为分组id选择器：仅仅为某一个元素设置样式群组选择器：如果需要对多个选择器设置相同的样式，可以用逗号将它们分开伪类选择器：为超链接设置样式id 选择器 • id 选择器以一种独立于文档元素的方式来指定样式 • 它仅作用于 id 属性的值 • 语法为: – 选择器前面需要有一个 # 号 – 选择器本身则为文档中某个元素的 id 属性的值
伪类选择器 • 伪类用于向某些选择器添加特殊的效果 • 使用冒号(:)作为结合符,结合符左边是其他选择器，右边是伪类 – 选择器 : 伪类选择器 • 链接伪类 – : link ,适用于尚未访问的链接 – : visited ,适用于访问过的链接 • 动态伪类,用于呈现用户操作 – :hover,适用于鼠标悬停在 HTML 元素时 – :active,适用于 HTML 元素被激活时 – :focus,适用于 HTML 元素获取焦点时
#pycharm编辑mycss.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>my css</title> </head> <!--通过属性实现样式--> <body bgcolor="silver" text="blue"> <h2>2号标题</h2> <hr color="red"> hello world! </body> </html>以上html文件页面效果如下：
#pycharm编辑mycss2.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>my css2</title> <style> /*内部样式*/ body { background: forestgreen; color: blue; } hr { color: white; } </style> </head> <body> <h2>2号标题</h2> <hr> 这是一段测试文字 <div style="text-align: center">这是一个div标签,采用内联样式</div> </body> </html>以上html文件页面效果如下图
#pycharm新建mycss.css样式文件 * { margin: 0; /*外边距*/ padding: 0; /*内边距*/ } body{ color: blue; } .c1 { text-align: center; } .c2, .c3 { text-align: right; } a:link { /*访问之前的样式*/ color: red; } a:hover{ /*鼠标悬停时的样式*/ font-size: 50px; } a:visited { color: gray; } #id1 { background: rebeccapurple; } p { color: forestgreen; } div{ font-size: 100px; } hr { color: red; } ############################################################################### #pycharm编辑mycss3.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>my css3</title> <link rel="stylesheet" href="mycss.css"> <!--调用前面创建的样式文件mycss.css--> </head> <body> <a href="http://bookset.me">bookset</a><br> <a href="http://www.docker.io" target="_blank">docker</a> <p class="c1">第一段</p> <p class="c2">第二段</p> <p>第三段</p> <div class="c1" id="id1">第一行</div> <hr> <div class="c3">第二行</div> </body> </html>以上html文件页面效果如下图：
