丑憨批的html笔记

html语法基础

h1#idid${itme$}*3

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="keywords" content="猫"><meta name="description" content="炫耀猫"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><!--     <div><p>asdasd</p><p>asdasdad </p></div><p> <strong>bao</strong> 我的猫咪脾气暴</p><em>12</em><p>12</p><div>12</div><div><img alt="神秘博士第十二季：新年特辑" src="/zb_users/upload/2019/01/20190102215050_22304.jpg"></div><img src="/mmsource/images/2013/12/26/3e522bf5401d491cb66734236ebf2533.jpg"><p>as<br>djk</p><p class="maomi">mybadcat</p><p id="maomi2">my</p><a href="https://blog.csdn.net/datou0529/article/details/80822604">1212</a> <br><a href="http://www.qq.com">qqs</a>   --><!-- biaoti --><h1>yi</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6><!-- duan luo --><p>duanluo</p><!-- liebiao --><ul><li>li</li><li>li</li><li>li</li></ul><!-- you xu lie biao --><ol><!-- li{asdad $}*6 --><li>1</li><li>2</li><li>3</li><li>4</li><li>asd 1</li><li>asd 2</li><li>asd 3</li><li>asd 4</li><li>asd 5</li><li>asd 6</li></ol><a href="https://www.baidu.com/s?tn=80035161_2_dg&wd=html+ui%E5%BA%93" target="_blank">qq</a><img src="3942de5374363d1.j1pg" alt="加载失败" title="121212"><strong>strong</strong><br><em>em</em><!-- 表格 --><table border="1"><tr><td>11 11</td><td>22</td><td>33</td><td>44</td></tr></table><table border="2"><tr><td>11 11</td><td>22</td><td>33</td><td>44</td></tr></table><table border="3"><tr><td>11 11</td><td>22</td><td>33</td><td>44</td></tr></table><table border="4"><tr><td>11 11</td><td>22</td><td>33</td><td>44</td></tr></table><table border="5"><tr><td>11 11</td><td>22</td><td>33</td><td>44</td></tr></table><table border="6"><tr><td>11 11</td><td>22</td><td>33</td><td>44</td></tr></table><input type="text" name="" id=""><button>按钮</button><button>按钮</button><button>按钮</button><span>span</span><span>span2</span><br><span><div>12</div></span><span><div>34</div></span></body></html>

css语法基础

html

<!DOCTYPE html>
<html lang="en"><head><!-- 优先级:就近原则  --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS基础</title><!-- 在head里写 内部样式 --><style>p {font-weight: bold;font-style: italic;color: blue;font-size: 56px;}</style><!-- 引入外部样式 --><link rel="stylesheet" href="csstest.css"></head><body><h1>h1</h1><p><strong>ppp</strong></p><p><b><font color="red" size="56">12</font></b></p><!-- css:层叠样式表 --><!-- 内联样式 --><p style="color: brown;">duanluo2</p><!-- id选择器 --><p id="qwe">asdad</p><ul id="ul1"><li id="qw1">item 1</li><li id="qw2" class="leitest">item 2</li><li id="qw3" class="leitest">item 3</li></ul><div id="div1">div1123</div><div id="div2">div2</div><p id="ppp"> 段落</p><!-- 字体 --><div id="div12">wenbenasdasd</div><!-- 边框 --><div id="qwe23">wqwqw</div><ul id="ul12"><li id="li1">item1</li><li id="li2">item2</li><li id="li3">item3</li></ul></body></html>

css

p{font-style: italic;
}
#qwe{font-size: large;
}
.leitest{background-color: aqua;
}
#div1{width: 220px;height: 100px;background-color: aquamarine;text-align: center;line-height: 50px;
}#div2{width: 2200px;height: 100px;background-image: url(3942de5374363d1.jpg);background-repeat: no-repeat;background-position-x: center;background-position-y:center;}
#ppp{width: 200px;height: 100px;background: #803232;text-indent: 20px;
}
#div12
{font-size: 48px;font-style: italic;font-weight: bold;
}
#qwe23
{font-size: 48px;font-style: italic;font-weight: bold;background-color: #fff;border:1px solid cadetblue;
}
#ul12{list-style: lower-alpha;
}

css盒模型

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="cssboxer.css"><style>#div1{background-color: aquamarine;}/* #divasd{} */</style>
</head>
<body><div id="div1">545454</div><div id="div2">2 3 3  </div><div id="div3">656as234d5</div>
</body>
</html>

css

#div1{background: crimson;border: 5px solid black;padding: 10px;
}
#div2{background: blue;margin: 20px;
}
#div3{width: 200px;height: 200px;background: brown;border:blue 5px solid;padding: 5px;
}

css定位

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css定位</title><style>/* div,h1,p{width: 200px;height: 100px;background: aquamarine;display: inline-block;/*inline-block可以*//*}*//* 块级元素垂直分布，可以设置宽高 行级元素不可以设计宽高 *//* a,span{width: 200px;height: 100px;/* display: block; *//* background: blue;} */#a {background: blue;}#b {background: chartreuse;/* 相对定位 相对于初始位置 初始空间不释放position: relative;left: 50px;top: 50px; *//* 绝对定位 相对于最近的已定位的父元素 偏移 ，body本身视为已定位*/position: absolute;left: 50px;top: 50px;/* 固定定位（fixed） */
/* 固定定位与绝对定位类似，但它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。 */
/* 固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏，不需使用margin、border、padding。 */}#c {background: crimson;}div{width: 200px;height: 200px;display: inline-block;}</style>
</head><body><!-- 块元素 --><!-- <div id="div1">div</div><h1>h1</h1><p>p</p> --><!-- 行元素 --><!-- <a href="">lianjie</a><span>span</span> --><div id="a">a</div><div id="b">b</div><div id="c">c</div><div></div>
</body></html>

css浮动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css fudong</title><style>/* div{width: 600px;height: 200px;/* display: inline-block; *//* display这样会出现空 *//* float: left; *//* } *//* #a{background: crimson;/* float: right; *//* } *//* #b{background: darkblue;}#c{background: darkgreen;} */ #menu{list-style: none;}#menu li{float: left;margin-right: 20px;}</style>
</head>
<body><!-- <div id="a">a</div> --><!-- <div id="b">b</div> --><!-- <div id="c">c</div> --><ul id="menu"><li id="li1"><a href="" id="12">item1</a></li><li id="li2">item2</li><li id="li3">item3</li><li id="li4">item4</li></ul></body>
</html>

丑憨批的html笔记相关推荐

丑憨批的爬虫笔记6实例
0.中国大学排名定向爬虫 http://www.zuihaodaxue.cn/zuihaodaxuepaiming2016.html 可行性: http://www.zuihaodaxue.cn/ro ...
丑憨批的爬虫笔记5信息标记与提取
0.信息标记的三种形式信息标记的作用 HTML:超文本标记种类:3种 XML 无内容则一个尖括号 Json Yaml 用缩进表达从属关系,-表示并列关系 1.三种信息标记形式的比较 2.信息提取的 ...
丑憨批的爬虫笔记4BeautifulSoup4
pip install beautifulsoup4 https://python123.io/ws/demo.html 使用方法参数:1.html信息2.解析器 import requests r ...
丑憨批的爬虫笔记3（实例）
1.京东商品: import requestsdef getHTMLText(url):try:r=requests.get(url)r.raise_for_status()r.encoding=r. ...
丑憨批的爬虫笔记2（爬虫引发的问题+robots协议）
去搜 user-agent!!!! referer!!!!! 网页中怎么查看请求头header信息点一下Name里的东西就会出来规模大小分类 robots协议 User-agent: * /// ...
丑憨批的爬虫笔记1（导学+requests））
the website is the API Requests robots.txt beautiful soup projects 正则表达式 Scrapy 12单元 4个实例工具:IDLE,Su ...
丑憨批的NLP笔记BERT前置：ATUO encoder，DAE
ATUOEncoder 深度学习:什么是自编码器(Autoencoder) DAE 降噪自动编码器(Denoising Autoencoder)
丑憨批的vector笔记
上网统计 "在线自闭,是输出出的问题,别用cout string" #include <iostream> #include<bits/stdc++.h> ...
丑憨批的Transformer笔记
rnn-seq2seq-attentio attention attention transformer transformer Self-Attention:当前翻译和已经翻译的前文之间的关系: E ...

丑憨批的html笔记

html语法基础

css语法基础

css盒模型

css定位

css浮动

丑憨批的html笔记相关推荐

最新文章

热门文章