HTML和CSS学习
HTML和CSS
HTML
基础讲解
要点：
- 标记语言不是编程语言
- .html和.htm都是html文档的后缀
- 标签有围堵和自闭两类
- 开始标签中可以定义属性，属性的值要用引号引起来
H5一般用于移动端的开发
文件标签
H5中新增了一个lang标签，放在<!DOCTTPE html>之后，用于表示页面目标群体所在的国家，我们一般这样写：
<html lang="ch">
meta标签用来指定字符集:<meta charset="UTF-8">
注意，html中的注释格式为：<!-- 内容 -->
图片标签
图片标签是自闭标签
<img src="图片的相对路径"/>
相对路径从html所在的文件夹开始，可以用.表示当前文件夹，".."代表上一层目录，"/"代表根目录。如果图片和html放置在同一个文件夹下，则相对路径可以写为./图片名，也可以写为当前文件夹名/图片名，当然，也可以什么都不写，此时默认就是./
img标签下的属性：
图片加载失败了，就显示alt中的文字信息
列表标签
链接标签
<a herf="点击后要跳转到的位置">要显示的文本内容</a>
属性：
target: _self:在本页面打开； _blank：在空白页面打开
mailto:邮箱名：点击之后会启动邮箱对其发邮件：
也可以为图片添加超链接（但这种方法其实不常用，更多时候是用Javascript实现的)：
块标签
div和span，与CSS搭配使用。
span默认在一行中展示，是行内标签；而div会换行，是块级标签
题外话：
标签：
标签定义 HTML 页面中的主题变化（比如话题的转移），并显示为一条水平线。
语义化标签：H5新定义
在html4中，为了区分不同块的作用以及提高文档可读性，我们会在每一个div标签中定义一个id，而在H5中则直接提供了语义化标签：
<header>:头部
<footer>:尾部
这些标签同样是要结合CSS一起来使用的
表格标签
HTML中，表格只有行的概念，列要分别在行中定义单元格进行。输入的时候是一行一行输入
<table>：定义表格，border属性定义表格线，width表示表格宽度
注意，这里border对应的是“1”“2”等，这个1表示的是用几条线包围td\tr，所以如果这个值是1，两个单元格之间其实有两条线。如果要变成一条线，应该将cellspacing属性，也就是定义单元格之间空白的属性，设置为0.
<tr>:定义行
<td>：定义单元格
<th>:定义表头单元格
<caption>:定义表格标题
上面三个没有样式，而同样是为了与CSS搭配，同时增强阅读性
定义了三个部分之后，表格就会按thead-tbody-tfoot的顺序展示，和书写的顺序就无关了
合并单元格：
合并行
colspan，值为几就合并从这里向下几个行，合并之后的算在第一行中
例如：
合并列
rowspan，值为几就合并从这里向右几个列，合并之后的算在第一列中
如果不使用CSS,table也可以用来做布局，由于网页的布局总是比较复杂的，并不好说有几列，所以多使用table的嵌套来完成，这样每一行就只有一个单元格了
实例：旅游网首页简版
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>黑马旅游网</title>
</head>
<body>
<!--采用Table来完成布局-->
<!-- 最外层Table，用于整体布局-->
<table width="100%",align="center">
<tr>
<td>
<img src="./source/image/top_banner.jpg" width="100%" alt="">
</td>
</tr>
<tr>
<td>
<table width="100%" align="center">
<tr>
<td>
<img src="source/image/logo.jpg" alt="">
</td>
<td>
<img src="source/image/search.png" alt=">"
</td>
<td>
<img src="source/image/hotel_tel.png"alt="">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<table width="100%" align="center" cellspacing="0">
<tr bgcolor="orange" align="center" height="45" >
<td>
<a href="https://www.baidu.com">首页</a>
</td>
<td>
门票
</td>
<td>
酒店
</td>
<td>
香港车票
</td>
<td>
出境游
</td>
<td>
国内游
</td>
<td>
港澳游
</td>
<td>
抱团定制
</td>
<td>
全球自由行
</td>
<td>
收藏排行榜
</td>
</tr>
</table>
</tr>
<tr>
<!-- 轮播图-->
<td>
<img src="source/image/banner_3.jpg" width="100%">
</td>
</tr>
<tr>
<td>
<img src="source/image/icon_5.jpg">黑马精选<hr color="orange">
</td>
</tr>
<tr>
<td>
<table width="95%">
<tr>
<td>
<img src="source/image/jiangxuan_1.jpg">
<p>上海飞三亚，五天四晚自由行</p>
<font color="red">¥899</font>
<!-- ¥是人民币符号的表示，其后必须加一个分号-->
</td>
<td>
<img src="source/image/jiangxuan_1.jpg">
<p>上海飞三亚，五天四晚自由行</p>
<font color="red">¥899</font>
<!-- ¥是人民币符号的表示，其后必须加一个分号-->
</td>
<td>
<img src="source/image/jiangxuan_1.jpg">
<p>上海飞三亚，五天四晚自由行</p>
<font color="red">¥899</font>
<!-- ¥是人民币符号的表示，其后必须加一个分号-->
</td>
<td>
<img src="source/image/jiangxuan_1.jpg">
<p>上海飞三亚，五天四晚自由行</p>
<font color="red">¥899</font>
<!-- ¥是人民币符号的表示，其后必须加一个分号-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="source/image/icon_6.jpg">国内游<hr color="orange">
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td rowspan="2" height="100%">
<img src="source/image/guonei_1.jpg">
</td>
<td>
<img src="source/image/jiangxuan_2.jpg">
<p>上海飞三亚，五天四晚自由行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_2.jpg">
<p>上海飞三亚，五天四晚自由行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_2.jpg">
<p>上海飞三亚，五天四晚自由行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_2.jpg">
<p>上海飞三亚，五天四晚自由行</p>
<font color="red">¥899</font>
</td>
</tr>
<tr>
<td>
<img src="source/image/jiangxuan_2.jpg">
<p>上海飞三亚，五天四晚自由行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_2.jpg">
<p>上海飞三亚，五天四晚自由行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_2.jpg">
<p>上海飞三亚，五天四晚自由行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jingxuan_2.jpg">
<p>上海飞三亚，五天四晚自由行</p>
<font color="red">¥899</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="source/image/icon_7.jpg">境外游<hr color="orange">
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td rowspan="2" height="100%">
<img src="source/image/jiangwai_1.jpg">
</td>
<td>
<img src="source/image/jiangxuan_3.jpg">
<p>上海飞三亚，五天四晚自由行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_3.jpg">
<p>上海飞三亚，五天四晚自由行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_3.jpg">
<p>上海飞三亚，五天四晚自由行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_3.jpg">
<p>上海飞三亚，五天四晚自由行</p>
<font color="red">¥899</font>
</td>
</tr>
<tr>
<td>
<img src="source/image/jiangxuan_3.jpg">
<p>上海飞三亚，五天四晚自由行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_3.jpg">
<p>上海飞三亚，五天四晚自由行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_3.jpg">
<p>上海飞三亚，五天四晚自由行</p>
<font color="red">¥899</font>
</td>
<td>
<img src="source/image/jiangxuan_3.jpg">
<p>上海飞三亚，五天四晚自由行</p>
<font color="red">¥899</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<img src="source/image/footer_service.png" width="100%">
</tr>
<tr>
<td >
<table bgcolor="orange" align="center" width="100%">
<tr>
<td align="center">
<font color="gray" size="2" >
贾丁版权所有
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
表单标签
表单：用于采集用户输入的数据，用来和服务器进行交互
使用的标签：form,用于定义一个范围，表示采集用户数据的范围
表单项中的数据要想被提交，必须指定其name属性
#可以用来表示当前页面
get和post的区别：
input:可以通过修改type属性值，改变元素展示的样式
Input常见元素类型：
text：文本输入，是input项的默认值
password：密码输入框，是密文显示的
radio：单选框。要想让多个单选框实现单选的效果，则多个单选框name属性值必须一样，这样才能声明他们是归于同一组的
为每一个单选框设置value属性作为提交时的值，注意，value和name是不一样的，不能混为一谈
4. checkbox：复选框? checked="checked"//默认被选中
placeholder属性：给出输入框的提示信息
题外话：label元素的作用。如果将输入框对应的文字放置在label中：
- file:文件选择框
<input tyep="file" name='file'> - hidden:隐藏域：不被显示，但是值可以被提交，以便于携带隐藏数据一并提交
- submit:提交按钮
- button:一个纯按钮，一般和JavaScript配合使用以实现动态效果
- 用image做按钮：src引用图片位置，input类型中就填image,这样就会把图片作为按钮了
- color：取色器，选中的颜色也会被提交
- data:年月日
- datatime-local:年月日+小时分钟
- email：会自动对输入的内容进行校验，必须符合邮箱格式
- number：自动校验输入内容是否为数字
select:下拉列表
列表项要用option进行定义，当然我们也要给select加value
一般第一项都会写“请选择之类的引导性的话，当然用户要是提交了这个也不行，所以要对它设计特定的值并在随后检验题外话：最后提交的表单项是一个key:value形式的，这里的key就是select的name（注意不是它的value,我们不会直接对select设置value的，那就没有选的意义了)
textarea:文本域
多行的待输入区域
常用属性:
- cols:列数
- rows:行数
CSS
CSS概述
CSS的优点：
- 功能强大
- 将内容的展示和样式的控制分离（解耦）：降低耦合度以便于分工协作、提高开发效率以及CSS的重用性（因为不需要和具体HTML内容绑定了，可以套在不同HTML上）
CSS与HTML结合
内联样式：在标签内使用style属性指定css代码
不推荐使用，没有实现解耦的效果，并且只对当前元素生效内部样式:在head标签内定义style标签，其的标签体内容就是css代码
作用域更大了，可以作用域整个HTML页面
外部样式:在外部的CSS文件中写CSS代码
- 定义CSS资源文件
- 在head标签内，定义link标签，引入外部资源文件
这种方式下，CSS文件的作用域可以拓展到整个项目
? 也可以写为：
CSS基础语法
CSS格式
选择器：筛选具有相似特征的元素。例如如果我们写div，那么所有的div都会被控制
CSS的注释：
/*
注释内容
*/
注意，每一对属性都要用分号隔开，最后一个可以不加
如果CSS格式有问题，则不会生效
CSS选择器
基础选择器
id选择器：选择具体id属性值的元素
语法：#id属性值{内容}
注意，对于div和p,我们也能给他们赋id
建议在一个html中选择唯一id
元素选择器:选择有相同标签名称的元素
如果一个元素被多个同级别的css控制且控制的类型相同，则后面的会覆盖前面的
id选择器的优先级高于元素选择器
类选择器：选择具有相同的class属性值的元素
语法:.class属性值{}//注意前面那个.
在元素内部可以定义类：
类选择器的优先级也高于元素选择器
拓展选择器
*{}:选择所有元素
并集选择器，语法为 ；选择器1，选择器2{}。
子选择器，语法为“选择器1 选择器2{}“:筛选选择器1元素下的选择器2元素
例如像这样，操作div下的p父选择器,语法为“选择器1>选择器2{}":筛选选择器2的父元素选择器1
操作的是p标签的父类div标签属性选择器,语法为"元素名称[属性名=“属性值]{}",一般用于input元素下的选择（因为input元素下的种类太多了，需要通过指定属性名来指定元素）
伪类选择器,选择一些元素具有的状态，语法为：“元素：状态{}”，一个典型的使用是用来控制超链接：
CSS属性
字体、文本
- font-size:字体大小
- color:文本颜色
- text-align:对齐方式
- line-height:行高
背景
background:背景，可以使用图片
background: url("image/test.png")no-repeat center;
边框
border:设置边框，是一个复合属性。
四条线组成一个边框，每一条线都可以单独设置，如果泛指border那就是指四个一起。
多个属性值用空格隔开就好了
尺寸
- width:宽度
- height:高度
盒子模型
把元素当成盒子来看待，主要用来控制布局。
- mergin:外边距
- padding:内边距
每一个方向上的内外边距其实都是可以单独设置的内外边距都是相对的，它取决于当前我们所研究的元素是哪个。
举个例子：
注意，修改内边距会改变盒子大小。解决方案：设置盒子属性box-sizing为border-box，让width和height就是最终盒子的大小。
浮动：float
left/right:左浮动、右浮动
最最最最最简单的理解是，浮动可以实现元素排列在一行
关于浮动，这里有更加详细的介绍：https://www.jianshu.com/p/07eb19957991
HTML和CSS学习的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- css学习归纳总结（三） 转
原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...
- css学习归纳总结（二） 转
原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...
- css学习归纳总结（一） 转
原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...
- 【2016年特别福利】史上最全CSS学习资料大全
css学习篇 [2016年特别福利]史上最全CSS学习资料大全
- 【转】css学习专题-BFC
css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...
- css学习归纳总结
来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...
- html+css学习总结
HTML与css学习总结 一:html概念 1. html是一种描述网页的语言,并不是计算机语言这要分清楚:标记语言是运用一套标记标签描述网页的: 注意点: ①标签字母都要小写,标签一般都是成对出现, ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
随机推荐
- （十八）C语言之预编译命令、宏
- laravel 5以后数据库插入自动转化方式
- 去掉input type=file的默认样式
原样式: 解决: 加style="opacity: 0;"变成透明的 然后可以外面套个div,在div上自定义样式.
- Vue踩坑系列
前言 前端开发对于vue的使用已经越来越多,它的优点就不做介绍了, 本篇是我对vue使用过程中遇到的问题中做的一些总结,帮助大家踩坑.如果喜欢的话可以点波赞,或者关注一下,希望本文可以帮到大家!!! ...
- XAMPP是什么？
XAMPP=Apache + MySQL + PHP + Perl,是一个完全免费,易于安装和使用Apache发行版,包含了Apache.MySQL.PHP和Perl.支持Windows.Linux和 ...
- 时间总线框架之EvenBus
概述 EventBus定义:是一个发布 / 订阅的事件总线. 这么说应该包含4个成分:发布者,订阅者,事件,总线. 那么这四者的关系是什么呢? 很明显:订阅者订阅事件到总线,发送者发布事件. 订阅者可 ...
- shell做成csv文件
echo a,b,c,d >aa.csv 其实就是用逗号做分隔符
- ControlTemplate in WPF —— Calendar
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x ...
- 【转载】如何在 Kaggle 首战中进入前 10%
本文转载自如何在 Kaggle 首战中进入前 10% 转载仅出于个人学习收藏,侵删 Introduction 本文采用署名 - 非商业性使用 - 禁止演绎 3.0 中国大陆许可协议进行许可.著作权由章 ...
- CentOS 6 系统基础配置
系统版本:CentOS 6.8 Minimal 采用最小化系统安装,许多组件默认是不安装的,通过手工安装一些常用工具包,让系统用起来更顺手. 1.设置机器名: # echo "NETWORK ...