前端技术HTML、CSS

1、html

20个标签

1.1、例子

<!DOCTYPE html>            <!-- 标准对应关系标头 -->
<html lang="en">       <!-- 起始,类似html这种格式   ：<html>dadadfad</html>叫一个html标签 --><!-- lang="en"叫标签内部的属性 --><head>                    <!-- 头的开始 --><meta charset="UTF-8"><meta http-equiv="Refresh" content="3">       <!-- 3秒之后刷新网页 --><meta http-equiv="Refresh" content="3;Url=https://www.zhihu.com">   <!-- 3秒之后跳转到新网页 --><meta name="Keywords" content="星际2,地下城与知乎,赚网">                    <!--关键字--><meta name="description" property="og:description" content="有问题，上知乎。知乎，可信赖的问答社区，以让每个人高效获得可信赖的解答为使命。知乎凭借认真、专业和友善的社区氛围，结构化、易获得的优质内容，基于问答的内容生产方式和独特的社区机制，吸引、聚集了各行各业中大量的亲历者、内行人、领域专家、领域爱好者，将高质量的内容透过人的节点来成规模地生产和分享。用户通过问答等交流方式建立信任和连接，打造和提升个人影响力，并发现、获得新机会。"/><meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;IE=IE7;">       <!--让该网页使用IE浏览器打开时,使用高版本模式打开--><!-- Title --><!--网页头部标签--><title>Title</title><!--网页头部小图标--><link rel="shortcut" href="image/aa.ico">    </head>                  <!-- 头的结束 --><body>                 <!-- 身体的头 --><a href="https://www.zhihu.com/">知乎</a>
</body>                   <!-- 身体的结束 -->
</html>                   <!-- 结束 -->

1.2、例子2

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Python</title>
</head>
<body><!--<a href="https://www.zhihu.com">李&nbsp;&nbsp;&gt;a&lt;尚</a>--><!--&nbsp;  代表空格--><!--&gt;    代表>--><!--&lt;    代表<--><p>dadadasfsfffffwqrsadfffdd<br>dddddd</p><p>12345</p><p>12345</p><h1>LiShang</h1><h2>LiShang</h2><h3>LiShang</h3><h4>LiShang</h4><h5>LiShang</h5><h6>LiShang</h6><span>hello world</span><span>hello world</span></body>
</html>

网页特殊符号HTML代码大全：https://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

1.3、标签分类

自闭和标签(很少):<meta charset="UTF-8">
主动闭合标签:<html lang="en"> ****** </html><head> ****** </head>      head标签中海油几种标签<meta >      编码、跳转、刷新、关键字、描述、IE兼容<title>Title</title>    <!--网页头部标签--><link />       搞图标<style /><script /><body> ****** </body>
body标签：- 图标, &nbsp;  &gt;    &lt;- p标签   <p>dadadasfsfffffwqrsadfffdd<br>dddddd</p>(块级标签),段落<p>12345</p><p>12345</p>                               ###一个p标签代表一个段落- br标签    <p>dadadasfsfffffwqrsadfffdd<br>dddddd</p>    ######<br>代表换行,还在本段中======================#-#-#-小总结-#-#-#======================所有标签分为:块级标签: H 系列(加大加粗), p 系列(段落之间有间距), div 标签(白板), 行内标签: span 标签(白板,无任何特性), 标签间可以嵌套标签存在的意义, 定位操作, js操作、css操作更方便ps: chorme审查元素的使用- 定位- 查看样式input系列： 10个必须会的input type='text'                 #name属性, 用于让后台拿数据input type='password'               #name属性, 用于让后台拿数据input type='submit' value="提交"       #提交按钮, 提交表单input type='button'   value="登录"       #普通按钮input type='radio' name="gender" #单选框,value,name属性(name相同则互斥)input type='checkbox'               #复选框,value,name属性(批量获取数据)input type='file'                   #依赖form表单的一个属性,enctype='multipart/form-data'input type='rest'                   #重置<textarea>默认值</textarea>   -name属性select标签                    -name,内部option value,提交到后台,size,multiple- h 标签(块级标签)- span 标签(行内标签)- div 标签(块级标签)a 标签- 跳转- 锚, 跳转到目录对应的位置处功能：标签的id不允许重复<a href="#i1">第一章</a><div id="i1" style="height:600px;">第一章的内容</div>img 标签,图片,属性可设置大小和超链接跳, yong<a>标签括起来, 可以点图片跳转网页<a href="https://www.zhihu.com"><img src="mygirlfriend.jpg" title="真是大美女" style="height: 600px;width: 375px" alt="美女"></a><form action="http://localhost:8888/index" method="GET" enctyp>###一个表单, action是提交的地址, method是提交的方式, GET是在URL里提交, POST是在内容里提交<input type="text"/>                       ##一个普通的文本输入框<input type="password"/>                   ##输入进去显示密文<!--{'user':'用户输入的数据','psd':'xxx'}--><input type="button" value="登录1"/>         ##一个提交的按钮<input type="submit" value="登录2"/></form>列表<ul><li>asda</li>               #前面带点 ·</ul><ol><li>dadsas</li>             #前面带序号 1. 2. ··· 100.</ol><dl><dt>ttt</dt>              #dt是标题<dd>ddd</dd>              #dd缩进一个是dt的内容<dt>qeqeda</dt><dd>321easda</dd></dl>表格1：     (简单的，不太规范)<table border="1"><tr>                      ###<tr>代表行<td>主机名</td>            ###<td>代表列<td>端口</td><td>备注</td><td>操作</td></tr><tr><td>172.16.1.1</td><td>80</td><td>web</td><td><a href="girlfriend.jpg">查看详细</a></td></tr><tr><td>172.16.1.8</td><td>3306</td><td>mysql</td><td><a href="33.jpg">查看详细</a></td></tr><tr><td>172.16.10.153</td><td>10053</td><td>zabbix</td><td><a href="dasdaf.png">查看详细</a></td></tr></table>表格2：          (规范的, 就用这种方式)<table border="1"><thead>                               ###<thead>是表头, 里面是<th><tr><th>主机名</th><th>端口</th><th>备注</th><th>操作</th></tr></thead><tbody>                             ###<tbody>是内容, 里面是<td><tr><td>192.168.1.1</td>            <!--<th colspan="2">80</th>-->该行占两列<td>80</td>                     <td>web</td><td><a href="mygirlfriend.jpg">查看</a></td></tr><tr><td>192.168.10.10</td>            <!--<th rowspan="2">192.168.10.10</th>-->该列占两行<td>3308</td><td>mysql</td><td><a href="dasdaf.png">查看</a></td></tr><tr><td>192.168.10.253</td><td>1001</td><td>java</td><td><a href="33.jpg">查看</a></td></tr></tbody></table>- label标签-用于点击文字，使得关联的标签获取光标 <label for="username">your name:</label><input id="username" type="text" name="user"/>- fieldset标签
<fieldset><legend>登录框</legend><label for="username">your name:</label><input id="username" type="text" name="user"/></fieldset>

<p>请选择性别:</p>男：<input type="radio" name="gender"/>    #可选择, name一样就表示只能选择其一女：<input type="radio" name="gender"/>- h 标签(块级标签)<h1>LiShang</h1><h2>LiShang</h2><h3>LiShang</h3><h4>LiShang</h4><h5>LiShang</h5><h6>LiShang</h6>                   ###显示内容大小不同,h1最大,h6最小- span 标签(行内标签)<span>hello world</span><span>hello world</span><span>hello world</span><span>hello world</span>            ###会横排显示- div 标签(块级标签)<div>1</div><div>2</div><div>3</div>                      ###块级显示

label标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><label></label>
</body>
</html>

1.4、上文的http://localhost:8888/index的后台程序

#-*- coding:utf-8 -*-
# Author: li Shangimport tornado.ioloop
import tornado.webclass MainHandler(tornado.web.RequestHandler):def get(self):print("有人登录")u = self.get_argument('user')p = self.get_argument('psd')if u == 'lishang' and p == 'zhaoxiaomeng':self.write("Hello, world")print("他验证对了,这个用户是:%s" %u)else:self.write("gun")print("他验证错了,这个用户是:%s" %u)def post(self):print(u, p)self.write("hahaha")application = tornado.web.Application([(r"/index", MainHandler),
])if __name__ == "__main__":application.listen(8888)tornado.ioloop.IOLoop.instance().start()

1.5、例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><form action="https://www.sogou.com/web" ><input type="text" name="query" /><input type="submit" value="搜索一下" /></form>
</body>
</html>

2、CSS

在标签上设置style属性:background-color: #4594ff;height: 66px;

编写css样式：

 1.标签的style属性2.写在head里面,style标签中写样式- id选择器#i1{background-color: #4594ff;height: 66px;}- class选择器.名称{...}<标签 class='名称'> dada</标签>- 标签选择器div{background-color: black;color: white;}<div id="i2">2</div>             下面的div标签都会选用上面定义的样式<div class="c1">4</div>               若是上面有定义好的c1样式，还是会选用c1- 层级选择器(关联选择器)(空格)span div{background-color: black;color: white;}<span id="i3">3<div id="i4">ddadad</div></span>                              这样只会是span里的div应用上述的样式，其他的div不会- 组合选择器(逗号)</head><style>#i1,#i2,#i3{background-color: blueviolet;color: black;}</style></head><body><div id="i1">断桥是否下过雪</div><div id="i2">我望着湖面</div><div id="i3">随着</div></body>- 属性选择器,下文里input标签且属性是type='text'的就会匹配后面的属性对选择到的属性再进行一次筛选input[type="text"]{width: 100px;height: 200px}<input type="text">              会匹配上面的属性<input type="password">            不会匹配上面的属性
CSS补充：1、position：a. fixed                 固定在某个位置，比如右下角<div οnclick="shang();" style="height: 50px;width: 50px;background-color: #060606;color: white;position: fixed;"</div>b. relative + absolute        绝对位置<div style="position: relative; width: 500px; height: 200px; border: 1px solid red; margin: 0 auto"><div style="position: absolute; bottom: 0; left: 0; width: 50px; height: 50px;background-color: black"></div></div>2、opacity: 0.5;    透明度3、z-index: 10;       多个position: fixed的情况下,谁的z-index值大谁在最外层4、overflow: auto  限制内容大小，出现搜索框5、overflow: hidden   限制内容大小，超出的直接隐藏6、/*当鼠标移动到当前标签上时,css属性才生效*/.pg-header .menu:hover{background-color: cadetblue;}7、background-image:url('1.png');  #默认图片大,图片重复访问background-repeat: repeat-y;background-position-x:background-position-y:background-position: 10px 10px;

例子1：

因为id不允许重复,这种方式也不好
<head><meta charset="UTF-8"><title>Title</title><style>#i1{background-color: #4594ff;height: 66px;}#i2{background-color: brown;height: 48px;}#i3{background-color: forestgreen;height: 80%;}</style>
</head>
<body><div id="i1">1</div><div id="i2">2</div><div id="i3">3</div>
</body>

例子 2:

class是可以重复的，因此这种方式最多
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{background-color: mediumorchid;height: 10ch;}</style>
</head>
<body><div class="c1">4</div><div class="c1">5</div>
</body>
</html>

例子 3:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.pg-header{position: fixed;right: 0;left: 0;top: 0;height: 48px;background-color: #2459a2;line-height: 48px;}.pg-body{margin-top: 48px;}.w{width: 980px;margin: 0 auto;}.pg-header .menu{display: inline-block;padding: 0 10px 0 10px;color: white;}/*当鼠标移动到当前标签上时,css属性才生效*/.pg-header .menu:hover{background-color: cadetblue;}</style>
</head>
<body><div class="pg-header"><div class="w"><a class="logo">LOGO</a><a class="menu">全部</a><a class="menu">42区</a><a class="menu">段子</a><a class="menu">1024</a></div></div><div class="pg-body"><div class="w">安能摧眉折腰事权贵</div></div>
</body>
</html>

效果：鼠标放上去以后能变色

2.05 颜色或样式的优先级问题

标签上的style最优先，其次按照在文中编写的顺序，越往下越优先

<!--文中div标签分别应用了c1，c2和自己本身定义的颜色,但是应用的优先级是有顺序的,下面的先应用-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{background-color: cadetblue;color:white;}.c2{font-size: 48px;color: black;}</style>
</head>
<body><div class="c1 c2" style="color: pink">正义的光</div>
</body>
</html>

可以看出，颜色的优先级是按照该样式在文中出现的顺序来决定的

2.06 引用另外的xxx.css文件中声明好的样式

/*commands.css文件的内容*/
.c1{background-color: cadetblue;color:white;
}.c2{font-size: 48px;color: black;
}

<!--网页文件内容-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="commands.css">
</head>
<body><div class="c1 c2" style="color: pink">前不见古人</div><p><div class="c1">后不见来者</div><div class="c2">念天地之悠悠</div>
</body>
</html>

显示效果：

2.1 边框

边框，样式，颜色

<div style="border: 1px solid red">独怆然而涕下</div>

2.2 背景

2.3 float

让标签飘起来，块级标签也可以并排起来

<div style="width: 20%;background-color: #1E84E7;float: left">一二三四五</div>
<div style="width: 61%;background-color: #b061ff;float: right">上山打老虎</div>

效果：

父亲管不住子标签了：

<div style="width: 300px;border: 1px solid red"><div style="width: 96px;height: 30px;border: 1px solid cadetblue;float: left"></div><div style="width: 96px;height: 30px;border: 1px solid cadetblue;float: left"></div><div style="width: 96px;height: 30px;border: 1px solid cadetblue;float: left"></div><!--加上这一条让父亲标签管住子标签--><div style="clear: both;"></div>
</div>

2.4 display

可以将div块级标签改造成行内标签        display: inline
可以将span行内标签改造成块级标签      display: block
行内标签(span、a)：无法设置高度，宽度，padding，margin
块级(div)标签可以设置高度，宽度，padding，margin

display: inline-block
具有inline, 默认自己有多少占多少
具有block, 可以设置高度，宽度，padding，margin
display: none 让标签消失

例子1：

<body><div style="background-color: indianred">问君能有几多愁</div><span style="background-color: darkcyan">恰似一江春水向东流</span>
</body>

效果：

接下来通过display改造一下
例子2：

<body><div style="background-color: indianred;display: inline">问君能有几多愁</div><span style="background-color: darkcyan;display: block">恰似一江春水向东流</span>
</body>

效果：

2.5 padding margin(0,auth)

边距，内边距，外边距
margin: 外边距
padding: 内边距

<div style="border:1px solid indianred; height: 70px;"><div style="background-color: green;height: 50px;margin-top: 0px;"></div>
</div>
<p></p>
<div style="border:1px solid indianred; height: 70px;"><div style="background-color: green;height: 50px;padding-top: 0px;"></div>
</div>

2.6 text-align

2.7 height，width，line-height，color，font-size，font-weight

<div style="height: 100px;      <!--高度-->
width:80%;                      <!--宽度，可选100px，也可选80%-->
border: 3px solid #b061ff;      <!--border:边框,solid:实体框,后跟框的颜色-->
font-size: 30px;                <!--字体大小-->
text-align: center;             <!--水平方向方向居中-->
line-height: 100px;             <!--垂直方向上居中,后面的高度和一开始定义的一致-->
font-weight: bold;              <!--文字加粗-->
color: #ff755f;                 <!--文字颜色-->
">陈子昂</div>

显示效果：

3、作业：写一个简单的页面

写网页：

解：

前端技术HTML、CSS相关推荐

web前端技术杂谈--css篇(1)--浅谈margin(续)
2019独角兽企业重金招聘Python工程师标准>>> 1.margin负值实现左右两列布局(左边固定宽度,右边自适应)代码如下: css代码: .main{ ...
前端技术——2——CSS
CSS是Cascading Style Sheets的简称,即层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一.CSS的四种引入方式 1.行内式,在标签中使用style属性 & ...
web前端技术之CSS语言基础与页面布局（中）
4.4CSS属性常用的CSS样式的属性有文本.字体.背景.表格.列表及定位等属性. 文本属性 <!DOCTYPE html> <html lang="en"&g ...
Web前端技术分享：学习HTML和CSS的5大理由
人们学习HTML和CSS最常见的原因是开始从事Web开发.但并不是只有Web开发人员才要学习HTML和CSS的核心技术.作为一个网络用户,你需要你掌握的相关技术很多,但下面小千总结了5个你无法拒绝学习 ...
web用css做网页实验报告,web前端技术实验报告实验二
<web前端技术实验报告实验二>由会员分享,可在线阅读,更多相关<web前端技术实验报告实验二(7页珍藏版)>请在装配图网上搜索. 1.Web前端技术实验报告课程名称:Web ...
前端技术栈之html,css,js
目录 1.前端技术栈介绍 1.1.前端技术简介 1.2. 前端调试工具 1.2.1.HBuilder 1.2.2.webstorm 1.2.3.vscode 2. 静态页面HTML 2.1 概念 2. ...
百度前端技术学院—-小薇学院(HTML CSS课程任务)
任务一:零基础HTML编码课程概述作业提交截止时间:04-24 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码课程概述作业提交截止时间:04-24 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
前端技术: H5表单CSS优化
知识回顾: 1)HTML 5.0(h5)比之前版本强大很多,增加很多新的标签增强功能动画(flash内存占用泄漏,苹果ipad), 统一移动端开发(ios.安卓)重复性劳动,软件公司两支团队 2)C ...
Java云同桌学习系列（十三）——前端技术之HTML与CSS
本博客java云同桌学习系列,旨在记录本人学习java的过程,并与大家分享,对于想学习java的同学,可以跟随我的步伐一起学习,我希望这个系列能够鼓励大家一同与我学习java,成为"云同桌& ...

前端技术HTML、CSS

1、html

1.1、例子

1.2、例子2

1.3、标签分类

1.4、上文的http://localhost:8888/index的后台程序

1.5、例子

2、CSS

例子1：

例子 2:

例子 3:

2.05 颜色或样式的优先级问题

2.06 引用另外的xxx.css文件中声明好的样式

2.1 边框

2.2 背景

2.3 float

2.4 display

2.5 padding margin(0,auth)

2.6 text-align

2.7 height，width，line-height，color，font-size，font-weight

3、作业：写一个简单的页面

前端技术HTML、CSS相关推荐

最新文章

热门文章