42 day of python
前端分三个标准：
html:结构标准
canvas
css:样式标准
javascript:行为标准
html中除了语义其它什么都没有
所谓语义就是用标签将我们的文本内容包括起来
标签分为行内标签和块级标签
行内标签：
字体标签：
a:超链接标签 href:链接的地址 target: _blank；在另一个空白页面中打开链接的地址
span:小跨度的区域标签，这个标签不会对页面布局造成影响
font em strong i
p:段落标签 在你认识p的第一天，就是时刻记住p中只能放字体标签
特点:(1)在一行内显示 (2)不能设置宽高 如果不设置宽 默认是父的100%宽度
html标签特性：
(1)HTML对换行不敏感，对tab不敏感
(2)空白折叠
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标签的特性</title> <!-- <meta http-equiv="refresh" content="2;URL=http://www.luffycity.com"> --> <link rel="stylesheet" type="text/css" href="./index.css"> </head> <body> <!-- （1）HTML对换行不敏感，对tab不敏感 (2)空白折叠 h1~h6 p div ul ol li dl:1.独占一行 2.可以设置宽高,如果不设置宽高,默认是 父亲的100%宽度 块级标签 a span: 1.在一行内显示 2.不能设置宽高,默认是宽高的字体的大小 行内标签 --> <!-- 文本内容 文本内容 --> <a href="#">百度一下</a> <a href="#">百度一下</a> <p>哈哈哈哈</p> <p>哈哈哈哈</p> <strong>文本内容加粗</strong> <em>斜体标签</em> <i>斜体标签</i> <u>下划线标签 </u> <a href="#" style="color:red;">文本内容</a> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /*标签选择器*/ #header{ background-color: red; width: 100%; height: 80px; border-radius: 3px; } #wrap{ width: 100%; height: 1000px; background-color: green; } #footer{ width: 100%; height: 40px; background-color: yellow; } span{ color: orange; } .luffy{ font-size: 24px; color: black; } </style> </head> <body> <!-- div+span --> <div id="header"> <div id="logo" title="哈哈哈哈">我是<span>logo</span><span class="luffy">路飞</span> 学城</div> </div> <br> <br> <br> <br> <hr> <hr> <hr> <hr> <pre> 我是多对多的扩军多或军多军 大大大大多多群 阿达大大发发 </pre> <div id="wrap"> <span class="luffy">路飞</span> <!-- src:连接图片的资源地址 alt:图片加载失败的时候出现 --> <img src="./timg.jpg" width="200" alt="美女出来了" title="哈哈哈哈"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533539266322&di=7d9b3d336e56ad6b2309e0740bdbc0d8&imgtype=0&src=http%3A%2F%2Fimg.app178.com%2Ftu%2F201603%2Fovymy5vnvvm.jpg"> <img src="./timg.jpg" width="200" > <!-- target:_blank;在新的页面打开连接的地址 --> <a href="http://www.baidu.com" target="_blank">百度一下</a> <a href="mailto:zhaoxu@tedu.cn">联系我们</a> <a href="#top">顶部</a> <!-- 阻止a标签的默认事件 --> <a href="javascript:void(0);">百度一下</a> <a href="javascript:console.log(1);">百度一下</a> <p> <a href="javascript:void(0);">家道具卡道具卡打开的</a> </p> <!-- <a href="#"> <p>的阖家安康接电话就爱看的骄傲的</p> </a> --> <p> <img src="./timg.jpg" width="200" > </p> <p> <!-- 凡是使用p 它一定包含的是字体的标签 h1~h6 a font img --> </p> <!-- <p> <p>花好月圆夜</p> </p> --> </div> <div id="footer"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ /* margin: 0; padding: 0;*/ } ul{ list-style: none; } #t:hover{ color: red; } </style> </head> <body> <div id="wrap"> <div class="aside"> <ul> <li> <a href="http://www.baidu.com"> <img src="./timg.jpg" width="50" > </a> </li> <li>手机 电话卡</li> <li>手机 电话卡</li> <li>手机 电话卡</li> <li>手机 电话卡</li> <li>手机 电话卡</li> <li>手机 电话卡</li> <li>手机 电话卡</li> <li>手机 电话卡</li> </ul> <ol> <li>手机 电话卡</li> <li>手机 电话卡</li> <li>手机 电话卡</li> <li>手机 电话卡</li> <li>手机 电话卡</li> <li>手机 电话卡</li> <li>手机 电话卡</li> <li>手机 电话卡</li> <li>手机 电话卡</li> </ol> <dl> <dt>第一条规则</dt> <dd> <a href="#" id="t"><dd>不可以迟到</dd></a> </dd> <dd>不可以睡觉</dd> <dd>作业一定要交</dd> </dl> </div> </div> </body> </html>
p{ color:red; background-color: green; width: 200px; height: 50px; text-align: center; line-height: 50px; } a{ background-color: purple; /*width: 100px; height: 100px;*/ font-size: 25px; }
