头皮发麻的HTML课时一
话说我都不知道有多少天没有更新我的随笔了，不过我忽的一下发现到灵魂深处的罪孽；好吧，不扯淡了，其实就是自己懒得外加上HTML这个东西又实在是很重要，所以良心发现把我自己所学的给记录下来，我会尽量的写的详细点，方便自己回忆，或者是哪些踩了狗屎运翻到了我博客的老爷们提供一些关于HTML相对来说用点用的东西；本篇主要记录HTML和CSS的用法，至于前面没有做笔记的Python基础我会尽量补上来。
在记录HTML之前，我们先来了解一下HTML格式；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> </body>
</html>
上面我写了一段裸露的HTML格式，<html></html>将整个代码给括了起来，<head></head>里面写的就是头部信息，当然了解HTML的人知道大部分的头部信息<head>是不会在浏览器中显示
的。这里我再插插上一嘴，不关什么语言都有自己的解释器，HTML也不会例外，HTML的代码是供浏览器解释的。下面我们就来了解下HTML头部会有哪些东西，同时我也会讲HTML的内容给解释
清楚。
一、HTML头部
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 页面标签,默认字符编码为utf-8 -->
<meta charset="UTF-8">
<!--页面跳转-->
<meta http-equiv="refresh" content="5; Url=http://www.baidu.com" />
<!--关键字-->
<meta name="keywords" content="开发者" />
<meta name="description" content="个人博客" />
<!--页面图标-->
<link rel="shortcut icon" href="123.jpg" />
<title>Title</title>
</head>
<body> </body>
</html>
现在，我解释下上面的格式，和每行的意思：
首先大家需要明白<head></head>这种属于标签；<meta>也属于标签，但是他和前面的还有一些不太一样，这种属于自闭和标签，目前大家记住他就行了，到后面写一写也就明白了。
<meta http-equiv="refresh" content="5; Url=http://www.baidu.com" />:<meta />是一个标签我就不再重复了，http-equiv=""是这个标签的属性，=
号后面就是这个属性的值，就和当初我们学Python的时候一样，但是这里的值是有意义的，比如这个就是刷新的意思；content也是这个标签内的属性，他的意思就是5s刷新一
次，后面的Url当然也是属性，这个标签的总体意思就是，这个页面5s后会刷新，然后跳转到URL里面写好的地址中；
<meta name="keywords" content="开发者" />就是我用红色框花上的；
<meta name="description" content="个人博客" />name="description" 为网站的接受，说通俗点就是为了让某度搜索到你
<link rel="shortcut icon" href="123.jpg" /> : rel="shortcut icon"就是上面的图标，后面的为这个图片的路径
二、HTML中body部分（一）
2.1纯洁的div标签和span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>苍井空</div>
<span>小泽</span>
<span>丽花美凉</span>
</body>
</html>
这里咱们涉及了两个标签，一个是div，一个是span；他们两都是白板（纯洁的），如果你里面不加东西就什么都作用不会起，如果你把我这一段来出来运行了你会发现到一个现象，就是两个span标签的东西是连这的。这是怎么回事呢？这里就是标签的性质不同了。
首先标签分为两类，一个是块级标签，另一个是内连标签；块级标签的特性是：他会占用父级标签的全部，而span标签是属于内联标签，他们的内容会相互连接，不会占用父级标签的100%。
2.2：a标签p标签和br标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>妹子<br />加微信</p><p>妹子加微信</p><p>妹子加微信</p>
<a href="http://www.baidu.com">百度</a>
<a href="#">点不动</a>
</body>
</html>
"p"标签是用来标记段落的，br标签是用来分割的，a标签是用来跳转的
2.3：列表标签:ol和ul
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--标题-->
<ul>小电影
<!--标签-->
<li>中国的</li>
<li>美国的</li>
<li>日本的</li>
</ul>
<ol>小电影
<li>中国的</li>
<li>美国的</li>
<li>日本的</li>
</ol>
</body>
</html>
2.4.input系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div>
<!--test:普通文本框，value为框内的默认值，name为传入后端的k值-->
用户名：<input type="text" value="alex" name="username" /> <br />
<!--type为password为密码输入-->
密码：<input type="password" value="asdf" name="pwd" /> <br />
<!--目前只需知道submit是一个提交按钮，value是按钮的名字-->
<input type="submit" value="submit提交" /> <br />
<!--redio是小圆点，value是发送到后端是值，name如果相同互斥，checked=checked为默认值-->
<input type="radio" name="123" value="n" checked="checked" />男 <br />
<input type="radio" name="123" value="l" />女 <br />
<!--checkbox为多选框，value为后端对应值-->
<input type="checkbox" value="12" />man
<input type="checkbox" value="11" />woman
</div>
</body>
</html>
2.5.其他input系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--上传文件-->
<input type="file" name="2222" />
<!--网页中提交-->
<input type="button" value="button提交" />
<!--重置-->
<input type="reset" value="重置" />
<div>
<!--下拉框，multiple为多选，selected="selected"为默认选项-->
<select name="city" multiple >
<option value="1">BeiJing</option>
<option value="2" selected="selected">ShangHai</option>
</select>
</div>
</body>
</html>
2.6.其他标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--src为图片所在路径-->
<img src="123.jpg" alt="美女" title="this good gril" /> alt为图片加载不出是显示的文字，title为鼠标悬停上的文字
<!--HTML还有很多其他的标签，后面等遇到的时候在仔细说-->
</html>
三、CSS选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--标签选择器-->
<style>
/*选中所有a标签*/
a{
color: red;
}
</style>
<!--id选择器-->
<style>
/*选择所有id为i1*/
#il{
color: blue;
}
/*class 选择器*/
/*选择所有class=c1的*/
.c1{
color: yellow;
}
/*属性选择器 important为优先级最高*/
/*[n="1"]{
color: #dddddd; !important;
}*/
/*div下面的子子孙孙*/
div p{
color: darkmagenta;
}
/*div下面的儿子*/
div>p{
color: #dddddd;
}
/*组合选择器*/
.c3 .c4{
color: #61fdff;
}
/*鼠标悬停显示字体颜色*/
.cla:hover{
color: aqua;
}
</style>
</head>
<body>
<!--演示部分-->
<div>
<a href="http://www.baidu.com">给你看看宝贝</a>
</div>
<!--abc是我自定义的一个标签，为了不和别的标签重复-->
<abc id="il">hope is good thing</abc>
<br />
<dbc class="c1">and best thing</dbc>
<br />
<!--孙子系列-->
<div>
<div>
<p>You're best</p>
</div>
</div>
<!--儿子系列-->
<div>
<p>
BBBBBBBBBBBB
</p>
</div>
</body>
</html>
四、CSS基础使用
4.1.CSS的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
/*此处的作用就让边框从定格开始*/
margin: 0;
}
.w{
height: 48px;width: 980px;background-color: #61fdff;
/*0就是上下是0，auto是左右自动居中，pandding也是一样*/
margin: 0 auto;
/*居中*/
text-align: center;
}
.header{
/*高度48像素*/
height: 48px;
/*背景颜色*/
background-color: bisque;
/*字体颜色*/
color: silver;
/*使内容自动居中，其中line-height==height*/
line-height: 48px;
}
</style>
</head>
<body>
<div class="header">
<div class="w">
LOGO
</div>
</div>
<div class="body"></div>
</body>
</html>
备注：上图标注的地方为body{margin:0;}的作用
4.2.CSS边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c2{
background-color: #dddddd;
padding: 10px;
border-left: 3px solid transparent;
}
.c2:hover{
border-left: 3px solid rebeccapurple;
}
</style>
</head>
<body>
<!--高度为200px，线框为1px，实线，红色(border是边框)-->
<div style="height: 200px;border: 1px solid red;"></div>
<!--padding是内边距，在后边会做介绍-->
<div style="background-color: #dddddd;border-right: 3px solid rebeccapurple;padding: 10px;">
搜索数据
</div>
<div class="c2">
搜索数据
</div>
</body>
</html>
4.3.CSS边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title> </head>
<body>
<!--margin外边距-->
<div style="margin: 50px;background-color: rebeccapurple;color: white;">
鼻子
</div>
<!--padding内边距-->
<div style="padding: 50px;background-color: rebeccapurple;color: white;">
鼻子
</div>
</body>
</html>
4.4.CSS位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.tip{
/*fixed将事务固定在屏幕上的某一个位置*/
position: fixed;
/*离底部未300px*/
bottom: 300px;
right: 0;
}
.ab{
/*absolute相对事务*/
position: absolute;
bottom: 10px;
right: 0;
}
.rel{
position: relative;
height: 300px;
width: 300px;
background-color: rebeccapurple;
}
.abs{
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="rel">
<div>
<div class="abs">asdf</div>
</div>
</div>
<div style="background-color: #dddddd;height: 2000px;"></div>
<div class="tip">返回顶部</div>
<div class="ab">返回顶部</div>
</body>
</html>
4.5.CSS浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
</style>
</head>
<body>
<div style="height: 48px;background-color: brown;line-height: 48px;">
日本的
<!--这里说一下“a”标签为内联标签，意思就是内容不自动换行-->
<a>苍老师</a>
<a>小泽玛</a>
<a>立花</a>
</div>
<br/>
<div style="background-color: rebeccapurple;">
<!--float为浮动，lefe让他向左边浮动-->
<div style="float: left;background-color: green;">内容一</div>
<div style="float: left;background-color: green;">内容二</div>
<div style="float: right;background-color: green;">内容三</div>
<div style="clear: both;"></div>
</div> <div style="height: 48px;background-color: brown;line-height: 48px;">
<!--上下居中–>line-height-->
python流弊
</div>
<br/>
<div style="height: 48px;background-color: brown;text-align: center;">
<!--test-align-->center为居中-->
php垃圾
</div> </body>
</html>
4.6.CSS布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
.w{
width: 980px;
margin: 0 auto;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-header{
height: 48px;
background-color: brown;
color: white;
line-height: 48px;
}
.pg-header .menus a{
padding: 0 10px;
/*是标签具有内联标签的属性--->也就是内容不换行*/
display: inline-block;
/*使内联标签具有块级标签的属性*/
/*display: block;*/
}
.pg-header .menus a:hover{
background-color: bisque;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<div class="menus left">
<a href="#">菜单一</a>
<a href="#">菜单一</a>
<a href="#">菜单一</a>
<a href="#">菜单一</a>
</div>
<div class="menus right">
<a href="#">登录</a>
<a href="#">注册</a>
</div>
</div>
</div>
<div class="pg-body">
<div class="w">
asdka;sdfjk;alsd </div> </div>
</body>
</html>
到此HTML和CSS基础已经大致说完了，后边我会把JS和jQuery的基础写进博客；以及相关的中文文档地址放入博客中，大家也可以一起学习。
头皮发麻的HTML课时一的更多相关文章
- [ 头皮发麻 A1 ] 队内赛3 2020 Ateneo de Manila University DISCS PrO HS Division
都是英语阅读题 但是本菜鸡就过了一题,直接自闭mmp明天开始起床一版题 传送门 B.Riana and the Blind Date 0是闰年?惊了 后来才知道整除被除数可以为0 闰年的计算方法 \( ...
- OpenGLES 怎样在十天内掌握线性代数 - 希望这是真的！
OpenGLES 怎样在十天内掌握线性代数 - 希望这是真的! 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&q ...
- Java SE学习【三】——JDBC
最近学到了数据库与java的jdbc方面,还有个DAO模式,写一下自己的理解,后期有什么不对的再改. 一.数据库三范式的理解 记得以前上课时,也上了一学期的“数据库系统原理”,给我们上课的老师算是渣渣 ...
- SQL Server自动化运维系列——关于邮件通知那点事（.Net开发人员的福利）
需求描述 在我们的生产环境中,大部分情况下需要有自己的运维体制,包括自己健康状态的检测等.如果发生异常,需要提前预警的,通知形式一般为发邮件告知. 邮件作为一种非常便利的预警实现方式,在及时性和易用性 ...
- 记 FineUI 官方论坛所遭受的一次真实网络攻击！做一个像 ice 有道德的黑客！
在开始正文之前,请帮忙为当前 排名前 10 唯一的 .Net 开源软件 FineUI 投一票: 投票地址: https://code.csdn.net/2013OSSurvey/gitop/code ...
- gcc 编译器参数
一.GCC编译过程 参考:http://hi.baidu.com/zengzhaonong/item/c00e079f500adccab625314f------------------------- ...
- No.2__C#
几经波折——多事之秋的第二周 这周的事情还有点多, 应该已经是上周了确切的说.总的来说,上周的数据结构的学习进行的很顺利.最让自己惊喜的是,居然很快就派上了用场,这也坚定了我学习的信念,极大地鼓舞了我 ...
- [Architecture Design] 累进式Domain Layer
[Architecture Design] 累进式Domain Layer 前言 本篇的内容大幅度的简化了分析设计.面向对象等等相关知识,用以传达累进式Domain Layer的核心概念.实际开发软件 ...
- Android中的布局优化方法
http://blog.csdn.net/rwecho/article/details/8951009 Android开发中的布局很重要吗?那是当然.一切的显示样式都是由这个布局决定的,你说能不重要吗 ...
随机推荐
- Unity无缝循环世界实现
一年前曾经碰到过已无限世界为题材的游戏开发比赛,虽然对比赛没有兴趣,但是对这个题材倒是有点想法.如何通过unity3d实现无缝的循环世界呢. 有一种想法是动态生成,一块场景一块场景进行动态加载.(做过 ...
- MySQL---事务知识，你搞明白没有？
MySQL - 事务 在学习事务这一概念前,我们需要需要构思一个场景 场景构思 假设该场景发生于一个银行转账背景下,月中,又到了发工资的日子.潭州教育科技集团打算给Tuple老师发放一个月的工资.(此 ...
- 一张图解析nvm,npm,nodejs之间的关系
- Legendary Items-微软实习生笔试第一题
题目如下: 这道题难点不仅在于正确理解题意,判断递归条件,更在于用数学方法推出解决公式.因为N最大为1百万,而内存只有256MB, 所以暴力递归肯定会超时,超空间. 不过,我才疏学浅,又没有大量时间去 ...
- ML(4): NavieBayes在R中的应用
朴素贝叶斯方法是一种使用先验概率去计算后验概率的方法, 具体见上一节. 算法包:e1071 函数:navieBayes(formule,data,laplace=0,...,subset,na.act ...
- Excel import
Case Study: Reading cell content from excel template for COM variant type VT_R4 or VT_R8 is always l ...
- 用react开发一个新闻列表网站（PC和移动端）
最近在学习react,试着做了一个新闻类的网站,结合ant design框架, 并且可以同时在PC和移动端运行: 主要包含登录和注册组件.头部和脚部组件.新闻块类组件.详情页组件.评论和收藏组件等: ...
- 【zzulioj 2135】 这里是天堂！
先考虑当前情况可行与否: 如果当a>n或者b>m时是绝对不行的,概率为0: 当a+b<m+n时,k一定等于a+b,否则概率为0: 当a+b==m+n时,k>=a+n,否则概率为 ...
- 【zzulioj 2127】 tmk射气球
比较简单的题,直接求空间中一个点到直线的距离而已,这道题说了直线和水平的平面 平行,我们可以先求投影到直线的距离,然后再算当前点到直线的距离. Description 有一天TMK在做一个飞艇环游世界 ...
- 现有‘abcdefghijkl’12个字符，将其所有的排列按字典序进行排序，给出任意一组排列，说出这租排列在所有排列中是第几小的
题目: 现有‘abcdefghijkl’12个字符,将其所有的排列按字典序进行排序,给出任意一组排列,说出这租排列在所有排列中是第几小的 据说这道题是百度校招的一道算法题,反正我觉得我在学校的时候很可 ...