HTML5和CSS基础
1 HTML 基本语法
html标签
单标签
<img />、<img>双标签
<html> </html>
属性 属于标签
<img src="图片的地址">
<table width="100" height="200"></table>
语法规范
标签嵌套 用缩进
标签名 不区分大小写 建议小写
属性名 不区分大小写 建议小写
注释
<!-- 多行 -->
<!--
多行
-->
常用HTML实体
空格<<>>&；&©；版权¥；人民币
<!doctype html>
<html>
<head> <!--注释-->
<meta charset="utf-8"> <!--指定字符编码-->
<title>同志交友</title> <!--指定网页的标题，对用户是不可见-->
<meta name="keywords" content="同志交友,交友平台,同志,同志相亲"> <!--可提供网页的元信息，比如搜索引擎或更新频度的描述和关键词，<meta标签永远位于head元素内部-->
<meta name="description" content="全国最大的同志交友平台"> <!--该信息也不会再前端页面进行展示，content定义与http-equiv或name， 属性相关的元信息，name 把content属性关联到一个名称-->
<link rel="stylesheet" type="text/css" href="./01.css"> <!--链接外部css文件，链接收藏夹图标,rel:relations的缩写，是指的关联到的文件是什么
rel定义当前文档与被链接文档之间的关系-->
<link rel="shortcut icon" type="image/x-icon" href="./friends.ico"> <!--shortcut icon特指浏览器地址栏左侧显示的图标，一般大小为16 x 16, 后缀名为.icon,icon指的是图标，规定被链接文档的 MIME 类,这里是值为image/x-icon,格式可为png,gif,jpeg,尺寸一般为16x16, 24x24, 36x36等-->
<style type="text/css">
h1 { /*--设定主标题字体的颜色*/
color: red;
}
</style>
</head>
<body>
<!-- 注释： 标题 --> <!--
是大是大非
手动阀十分大师傅地方
撒旦发顺丰的
撒旦发顺丰大
-->
<h1>交友平台</h1>
<hr> <!--设置分割线--> <p> <!--每个字段都有边框，是因为连接了外部的css文件，而css文件中对字段设置了边框-->
我今天学习了一个标签 <h1> </h1> <!--<代表左尖括号，>代表右尖括号， 代表空格-->
</p>
<p>我 她</p> <p> ©上海备案号：1231312398888 </p> <!--&cop代表：@--> <p>我捡了 ¥10000</p> <!--¥代表：¥--> <p>标识空格的实体： &nbsp;</p> <!--&代表：&-->
</body>
</html>
2 HTML常用标签
主体结构
<html></html><head></head><body></body>
HEAD标签
<title></title>网站标题<meta>指定网页的元信息 指定关键字 指定描述 指定字符集 属性： charset、name、content<style></style><link>导入css或者指定网页图标 属性 src、 type 、 rel<script></script>导入javascript
格式排版标签
<hn></hn>1~6 标题<p></p>段落<pre></pre>原样输出<br>换行<hr>分隔<div></div>
文本标签
<em></em>强调 表现为斜体<strong></strong>强调 表现为粗体<mark></mark>H5新增 表示被选择<sup></sup>上标<sub></sub>下标<ins></ins>添加的内容<del></del>删除的内容<ruby></ruby>/<rt></rt>加拼音 H5新增
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本标签</title>
</head>
<body>
<h1>同志交友</h1>
<hr> <!--分割线-->
<div>
<h2>我的祖国</h2>
<p>
我生在一个美丽的<em>小山坡</em> <br> <!--表示强调，通常为斜体字，表现形式是小山坡变为斜体字-->
<div>
那里非常 <strong>美丽</strong> <!--表示强调(语气更强)，通常为粗体字，表现形式为美丽被加粗-->
<div>
我撒旦发顺丰大十分大师傅的的撒发射点发撒旦发啊手动阀
</p> <p>
手动阀<mark>手动阀手</mark>动阀 <!--H5新增 标签定义带有记号的文本 请在需要突出显示文本时使用,如搜索引擎搜索页面，表现为手动阀手被黄色选中你-->
<div>
</p> <p>
¥<ins>100</ins> <del>98000</del><!--ins标签定义已经被插入文档中的文本,显示的形式是100加下划线，del 标签定义文档中已删除的文本,显示的形式是98000被横线穿过，-->
<div>
</p> <p>
H<sub>2</sub>O <!-- 文字下标字体标签，显示在H的下标，H2O-->
<div>
</p> <p>100<sup>2</sup></p> <!--文字上标字体标签，1002-->
<div> <p>
<ruby> <!--H5新增 标签定义 ruby 注释（中文注音或字符） 在东亚使用，显示的是东亚字符的发音。-->
<div>
同志 <rt>tongzhi</rt> <!--H5新增 标签定义字符（中文注音或字符）的解释或发音-->
<div>
</ruby> </p> </div> </body>
</html>
应用
3 CSS基本语法
使用CSS
link 引入外部的CSS文件
<style></style>在html中写使用html元素的style属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>同志交友</title>
<link rel="stylesheet" type="text/css" href="./01.css">
<style type="text/css">
/*css注释*/
h1 {
color: green;
font-size: 60px;
}
</style>
</head>
<body>
<h1>HTML中使用CSS</h1>
<hr> <p style="width: 300px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p> <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p> </body>
</html>
在HTML中使用CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>同志交友</title>
<link rel="stylesheet" type="text/css" href="./01.css"> <!--链接外部css文件，链接收藏夹图标,rel:relations的缩写，是指的关联到的文件是什么
rel定义当前文档与被链接文档之间的关系-->
<style type="text/css">
/*css注释*/
h1 {
color: green; /*设置标题的颜色为绿色*/
font-size: 60px; /*设置字体的大小*/
}
</style>
</head>
<body>
<h1>HTML中使用CSS</h1>
<hr> <!--分割线--> <p style="width: 300px"> <!--设置矩形框边框的宽度-->
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p> <p> <!--没有设置矩形框的宽度，默认是以接近屏幕的宽度作为矩形框的宽度-->
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p> </body>
</html>
在HTML中使用CSS之二
格式
选择器 {
CSS属性: 值;
CSS属性: 值;
}
选择器 {属性:值;属性:值}
注释
/* */
CSS长度单位
px 像素
em 默认大小的倍数
百分比 默认大小参照
cm
mm
pt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>同志交友</title>
<style type="text/css"> /*--指定div对其中的内容进行修饰*/
div {
border:10px solid orange; /*border这是边框的粗细，solid设置边框的颜色*/
width: 100cm;
width: 100mm;
width: 1600px;
height: 300px; /*设置矩形框的高度*/
padding: 20px; /*距离边框的内边距*/ /*padding:10px 5px 15px 20px; 分别是距离内边框上、右、下、左的距离*/
font-size: 20px;
font-size: 1.5em; /*设置字体为默认字体大小的1.5倍*/
font-size: 200%; /*设置字体为默认字体大小的2倍*/
width: 50%; /*后面的属性会覆盖前面相同的属性*/
}
</style>
</head>
<body>
<h1>CSS长度单位</h1>
<hr> <!--分割线--> <div>
撒旦发顺丰的骄傲浪费空间
撒旦发射点法发
撒旦发射点发
啊撒旦发顺丰大发
</div>
</body>
</html>
长度单位应用
CSS 颜色单位
colorName： red/green/bue/purple/orange/yellow/pink/skyblue
rgb数字 rgb(34,45,23) rgb(20%, 57%, 100%)
16进制 #abcdef #f90 #ccc
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>同志交友</title>
<style type="text/css">
div {
width: 400px;
height: 400px; /*设置矩形框的宽和高相等*/
border: 2px dotted red; /*设置矩形框的边框粗细，以及将边框设置为虚红线 */ background-color: purple; /*设置矩形框的背景颜色为紫色 */ /*
R 红
G 绿
B 蓝
*/
background-color: rgb(100, 200, 50);/* */
background-color: rgb(100%, 50%, 10%);/* */ /*
十六进制
*/
background-color: #ab1234;/*调出的颜色偏紫红色 */
background-color: #abcdef;/*调出的颜色为浅蓝色 */
background-color: #336699;/*和369调出的效果一样 */
background-color: #369;/*调出来的为蓝色 */
background-color: #f90; /*f最大颜色偏向于红色，调出的是橙色 */ background-color: #fff;/*三个字母相同且最大为白色 */
background-color: #000;/*三个数字相同且最小为黑色 */ background-color:#c1c1c1;/*三种颜色用相同的配色调出一般为灰色 */
}
</style>
</head>
<body>
<h1>css颜色单位</h1>
<hr> <div> </div>
</body>
</html>
CSS中的颜色单位
4 CSS选择器
#标签名选择器
tagName {
}
# 类名
.className {
}
#ID选择器
#idName {
}
# 全局选择器
* {
}
# 组合 后代元素
选择器 选择器
# 组合 子元素
选择器>选择器
# 群组
选择器,选择器，选择器
# 多条件
p.item
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>同志交友</title>
<style type="text/css">
/*ID选择器*/
#myFriend { /*id的优先级最高*/
color: #f90;
} /*CLASS选择器*/
.first-item {
width: 900px;
} .item {
width: 700px;
padding: 20px;
border: 1px solid #369;
} * {
/*border:2px solid red;*/
} /*list下的所有li*/
.list li {
/*border: 1px solid orange;*/
}
/**/
.list>li {
border: 1px solid orange;
} /*群组选择器 或者 or*/
h1,hr,p,.item { } /* and */
p.item { } .item.first-item{ } </style>
</head>
<body>
<h1 id="yourFrind">CSS选择器</h1>
<hr> <ul>
<li>啊手动阀</li>
<li>啊手动阀</li>
<li>啊手动阀</li>
</ul> <hr> <ul class="list"> <!--一般遇到列表类型布局我们就使用<ul><li>列表标签布局。-->
<li>了撒旦发射点法发</li>
<li>了撒旦发射点法发</li>
<li>了撒旦发射点法发
<ul>
<li>撒发射点法按时打发</li>
<li>撒发射点法按时打发</li>
<li>撒发射点法按时打发</li>
<li>撒发射点法按时打发</li>
</ul>
</li>
<li>了撒旦发射点法发</li>
<li>了撒旦发射点法发</li>
<li>了撒旦发射点法发</li>
<li>了撒旦发射点法发</li>
</ul> <p class="item">撒旦萨芬记录卡是否健康拉法基</p>
<p class="first-item item">撒旦萨芬记录卡是否健康拉法基</p>
<p>撒旦萨芬记录卡是否健康拉法基</p>
<p id="myFriend">撒旦萨芬记录卡是否健康拉法基</p>
<p>撒旦萨芬记录卡是否健康拉法基</p>
<p class="item">撒旦萨芬记录卡是否健康拉法基</p>
<p>撒旦萨芬记录卡是否健康拉法基</p>
<hr>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
CSS选择器
5 选择器优先级
ID > CLASS > tagName > *
组合选择器 数数
<!DOCTYPE html>
<html>
<head>
<title>同志交友</title>
<style type="text/css">
#myItem {
color: red;
} div {
color: green;
} div.item {
color: yellow;
} ul>li>ul>li>ol>li .item { }
</style>
</head>
<body>
<h1>选择器优先级</h1>
<hr> <div class="item" id="myItem">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div> </body>
</html>
选择器优先级
6 CSS属性 常用
字体
font-family
font-size
font-weight normal/bold
font-style normal/italic
font-variant normal/small-caps
font 复合属性
font:[weith | style | variant] size family
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>同志交友</title>
<style type="text/css"> p {
font-family: 'Microsoft YaHei','宋体','楷体',sans-serif; /*如果本机前几种字体没有，会以最后一种默认的字体*/
/*
字体家族
非衬线字体： 微软雅黑 黑体 思源黑体 sans-serify
衬线字体： 宋体 楷体 仿宋 serify /*就是一些有不规则的字体，即字体的每个部分不是粗细一致的*/
*/ font-size:30px;
font-weight: bold; /*设置字体的粗细*/
font-variant: small-caps;/*定义元素的文本是否为小型的大写字母*/
font-style: italic; /*指定元素的字体是否为斜体-italic是指定为斜体*/ font: 12px '微软雅黑',sans-serify;/*指定字体的类型*/
font: bold 12px '微软雅黑',sans-serify;/*指定字体的大小和非衬线*/
font: bold italic 12px '微软雅黑',sans-serify;/*复合属性，指定字体粗体 斜体 字体大小 字体类型以非衬线*/
}
</style>
</head>
<body>
<h1>常用属性-字体属性</h1>
<hr> <p>
有个人特别喜欢我，偷偷地看我 hello
</p>
</body>
</html>
字体相关属性
颜色
color
文本
word-spacing
letter-spacing
text-align: left / center /right
vertical-align: baseline / middle ....
line-height 行高
text-decoration ： none/overline/underline/line-through
text-indent: 2em
word-wrap: break-word
overflow-wrap word-wrap的别名 CSS3
white-space pre pre-wrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>同志交友</title>
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
.text {
width: 600px;
height: 200px;
border: 1px solid #ccc;/*设置文本边框*/ color: #369; /*letter-spacing: 10px;*/
/*word-spacing: 30px;*/ /*定义文本修饰的种类*/
text-decoration: underline;/*定义修饰的文本内容有下划线*/
text-decoration: overline;/*定义修饰的文本内容有上划线*/
text-decoration: line-through;/*定义修饰的文本内容被一条线穿过*/ /*text-align: left;
text-align: right;
text-align: center;*/ vertical-align: middle;/*定义行内元素在行框内的垂直对其方式，垂直居中*/ /*text-indent: 30px;*/ line-height: 200px;/*设置行高*/
} a {
text-decoration: none;/**/
} img {
width:100px;
vertical-align: middle;/*垂直方向居中对其*/
} .content {
width: 400px;
padding: 20px;/**/
border: 1px solid #ccc;/**/ word-wrap: break-word;/*内容超过边界是会在边界内换行*/
} .box {
width: 600px;
padding: 20px;
border: 1px solid #ccc; white-space: pre; /*原封不动的保留你输入时的状态，空格、换行都会保留，并且当文字超出边界时不换行。等同 pre 元素效果*/
/*white-space: nowrap;*/ /*与normal值一致，不同的是会强制所有文本在同一行内显示。*/
/*white-space: nowrap;*/
white-space: pre-wrap; /*与pre值一致，不同的是文字超出边界时将自动换行。*/
white-space: pre-line; /*与normal值一致，但是会保留文本输入时的换行。*/
}
</style>
</head>
<body>
<h1>CSS文本属性</h1>
<hr> <p class="text"><!---->
我很帅 i am very shuai
</p>
<hr> <a href="http://www.baidu.com">百度</a><!----> <div >
<img src="./juhua.jpg" style="width:100"><!---->
你的菊花很美丽
</div> <hr> <p class="content"><!---->
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod sdfasdfajsdkfjaskdfjaksldfjaklsfjaskldfjskladfjsklafjdklasfjklasjdfkalsjdfklasjdfklasdfjklasdfjklasdfjklasdfjklasfjdklasfjsklafdj http://unclealan.cn/docs/python/frontend/chapter1/html3css3ji-chu.html
</p> <hr> <div class="box"><!---->
if a > 100:
print('NB')
msg = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod "
</div>
</body>
</html>
CSS文本属性
补充 markdown
markdown
一种格式，包含 标题、列表、代码块、图片、超链接、表格...
HTML5和CSS基础的更多相关文章
- HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- CSS基础教程 -- 媒体查询屏幕适配
响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...
- CSS 基础总结
CSS基础 Doctype 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的 ...
- 《HTML5与CSS3基础教程(第8版)》
<HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro ...
- HTML3/CSS基础
1. HTML 1.1 什么是HTML HTML是用来制作网页的标记语言 HTML是Hypertext Markup Language的英文缩写,即超文本标记语言 HTML语言是一种标记语言,不需要编 ...
- 第五模块：WEB开发基础 第1章·HTML&CSS基础
01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...
- HTML5与CSS3基础教程(第7版) 高清PDF扫描版
HTML5与CSS3基础教程(第7版)试读不仅介绍了文本.图像.链接.列表.表格.表单.多媒体等网页元素,也介绍了如何为网页设计结构.布局,添加动态效果.格式化等形式,此外还涉及调试和发布.聚合和吸引 ...
随机推荐
- swift知识点 [1]
swift知识点 [1] 循环遍历元素 三目运算符用途 Optional 与 ImplicitlyUnwrappedOptional 以及常规类型数据 is 的用法
- 铁乐学python_day28_模块学习3
大部份内容摘自授课老师的博客http://www.cnblogs.com/Eva-J/ OS模块复习一二 >>> import os >>> os.getcwd() ...
- AltiumDesigner元器件搜索中英文对照
个人常用 扬声器 spearker 计量表(电流表,电压表) meter 变压器 Trans CT 肖特基二极管 D Schotty 额外补充 英文名称 中文释义 2N3904 NPN型 ...
- fun() 的 拆分和 for 遍历 的结合---------> 函数容器
fun() 的 拆分和 for 遍历 的结合---------> 函数容器
- Programming Assignment 2: Deques and Randomized Queues
编程作业二 作业链接:Deques and Randomized Queues & Checklist 我的代码:Deque.java & RandomizedQueue.java & ...
- C++暑期学习笔记
# C++初步学习笔记 一.命名空间(namespace)相关 1 个人理解: 为了避免整合资源中存在的重名矛盾而采取的区别资源的措施: 2 命名空间的定义: 比如要定义一个命名空间A: namesp ...
- U-Mail：多方面因素避免EDM邮件进垃圾箱
有很多做邮件营销的企业客户给U-Mail来电或来函咨询一件困扰他们的事:群发邮件时,要怎么样才能降低被收件人列入垃圾邮件的概率呢?其实关于这个问题,U-Mail小编已经请资深营销专家解答过多次了,经常 ...
- RAID廉价磁盘冗余阵列介绍
RAID(廉价磁盘冗余阵列)技术主要是为了改善磁盘的访问延迟,增强磁盘的可用性和容错能力.目前服务器级别的计算机都支持插入多块磁盘(8块或者更多),通过使用RAID技术,实现数据在多块磁盘上的并发读写 ...
- bootstrap-multiselect样式修改
问题 bootstrap-multiselect是一款相当不错的bootstrap风格下拉框组件,但是它的某些样式我不是很喜欢,按钮文本和下拉符号 “” 都是居中的,且下拉列表的宽度也没有跟随变动. ...
- 取消centOS7虚拟机锁屏
https://blog.csdn.net/ViJayThresh/article/details/81076622