一、html概述及html文档基本结构:
1. html概述:
Html是HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
2.html文档的基本结构:
一个html的基本文档结构如下:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>网页标题</title>
</heard>
<body>
这里网页显示的内容
</body>
</html>
第一行是文档声明，第二行“<html>”标签和最后一行“</html>”定义html文档的整体，“<head>”标签和“<body>”标签是它的第一层子元素，“<head>”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“<body>”内编写网页上显示的内容。
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页。
3.html文档快速创建:
新建一个html文档后,可以用快捷键的方式快速的创建html文档。
快捷键: !+tab 或者 html:5+tab
二、html标签入门:
1.标签语法:
学习html语言就是学习标签的用法, 学会这些标签的是用就基本上学会了HTML的用法。
2. 标签的使用方法:
<!--- 1.成对出现的标签: -->
<h1>这是h1标签</h1>
<p>这是一个段落标签</p>
<!-- 2.单个出现的标签: -->
<br/> <!-- 这是换行标签 -->
<input type="button" value="这是一个按钮,是单个出现的标签">
<!-- 3.带属性的标签 -->
<img src = "images/1.jpg" alt = "图片加载失败时显示的内容">
<a href = "#">超链接a标签</a>
<!-- 4.标签的嵌套 -->
<p>
<img src = "images/1.jpg">
<a href = "http://www.baidu.com">百度</a>
</p>
3.块级元素标签(行标签)和内联2元素标签(行内元素):
标签在页面上回显示成一个方块。除了显示成方块，特们一般分为下面两类：
块元素:在布局中默认会独占一行, 宽度默认等于父级的宽度, 块元素后的元素需要换行排列.
内联元素:元素之间可以排列在一行,设置宽高无效, 它的宽高有内容撑开.
3.1常用块级元素标签:
3.1.1标题标签:
表示文档的标题,除了具有块元素的基本特性外,还含有默认的外边距和字体大小.
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
3.1.2 段落标签:
表示文档中的一个文字段落，除了具有块元素基本特性外，还含有默认的外边距.
<p>本人叫张山，毕业于某大学计算机科学与技术专业，今年23岁，本人性格开朗、
稳重、待人真诚、热情。有较强的组织能力和团队协作精神，良好的沟通能力和社
交能力，善于处理各种人际关系。能迅速适应环境，并融入其中。</p>
<p>本人热爱研究技术，热爱编程，希望能在努力为企业服务的过程中实现自身价值。</p>
3.1.3 通用块容器标签:
表示文档中一块内容, 具有块元素基本特性,没有其他默认样式.
<div>这是一个div元素</div>
<div>这是第二个div元素</div>
<div>
<h3>自我介绍</h3>
<p>本人叫张山，毕业于某大学计算机科学与技术专业，今年23岁，本人性格开朗、
稳重、待人真诚、热情。有较强的组织能力和团队协作精神，良好的沟通能力和社
交能力，善于处理各种人际关系。能迅速适应环境，并融入其中。</p>
</div>
3.2 常用内联元素标签
3.2.1 超链接标签:
链接到另外一个网页,具有内联元素基本的特性. 默认文字蓝色,有下划线.
<a href="02.html">第二个网页</a>
<a href="http://www.baidu.com">百度网</a>
<a href="http://www.baidu.com"><img src="images/logo.png" alt="logo"></a>
<a href="#">默认链接</a>
3.2.2 通用内联元素标签:
具有内联元素基本特性,没有其他默认样式.
<span>我是span1</span>
<span>我是span2</span>
<span>我是span3</span>
3.2.3 图片标签:
在网页中插入图片,具有内联元素基本特性,但是他支持宽高设置.
<img src = "images/pic.jpg" alt = "图片" width="100px" height = 100&>
3.3 常用html字符实体:
代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体,代码如下：
<!-- 在段落前想缩进两个文字的空格，使用空格的字符实体： -->
<p>
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>
在网页上显示"<“和”>“会误认为是标签,想要在网页上显示”<“和”>"可以使用它们的实体,比如:
<!-- “<” 和 “>” 的字符实体为 < 和 > -->
<p>
<div>是一个html的一个标签<br>
3 < 5 <br>
10 > 5
</p>
三、html布局入门:
1.网页布局原理:
标签在网页中回显示成一个个的方块,先按照行的方式,把网页划分成多个行,再到里面划分列,也就是在表示行的标签中在嵌套标签用来表示列. 整体按照先整体,后局部; 先打后小的顺序来书写结构.
2.标签语义化:
在布局中需要尽量使用带语义的标签，使用带语义的标签的目的首先是为了让搜索引擎能更好地理解网页的结构，提高网站在搜索中的排名(也叫做SEO)，其次是方便代码的阅读和维护。
2.1带语义的标签:
a.h1 ~ h6: 表示标题;
b.p: 表示段落;
c. img:表示图片;
d. a: 表示连接;
2.2 不带语义的标签:
a. div: 表示一块内容;
b.span: 表示形内的一块内容;
四、CSS介绍:
1. css概述:
为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
2.css基本语法:
css的定义方法:
选择器{ 属性: 值; 属性: 值; … }
选择器是将样式个页面元素关联起来的名称, 属于是希望设置的样式属性, 每个属性有一个或多个属性. 属性和值之间用冒号(: ), 属性之间用分号(; ), 最后一个分号可以省略:
div{
width:100px;
height:100px;
background:gold;
}
五、CSS引入方式:
CSS引入页面的方式有三种:
1. 内联式:
通过标签的style属性,在标签上直接书写:
<div style="width:100px; height:100px; background:red ">内容</div>
2. 嵌入式(常用):
通过style标签,在网页上创建嵌入的演示表.
<hread>
...
<style type="text/css">
div{ width:100px; height:100px; background:red }
......
</style>
...
</hread>
3.外链式(常用):
通过link标签, 链接外部样式表到页面中.
<hread>
...
<link rel = "stylesheet" type = "text/css" href = "css/main.css">
...
</hread>
六、CSS选择器(一):
1.标签选择器:
这种选择器影响范围大, 一般用来做一些通用设置, 或者在层级选择器中.
<hread>
...
<style>
div {
background:red;
}
</style>
...
</hread>
<body>
<div>
这是第一个div
</div>
<div>
这是第二个div
</div>
</body>
2.类选择器:
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
<hread>
...
<style>
.blue {
color: blue;
}
.big{
font-size: 20px;
color: blueviolet;
}
.box{
background-color: yellow;
}
</style>
...
</head>
<body>
<div class = "blue">
我是第一个div
</div>
<h3 class = "big">
我是一个h3标签
</h3>
<p class = "box">
我是一个P标签
</p>
</body>
3.层级选择器:
主要应用在标签嵌套的结构中，层级选择器，是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.con{
width: 300px;
height: 80px;
background: green;
}
.con>span{ /*层级选择器中的子代选择器,对应父子关系*/
color: red;
}
.con .ponk {
color: pink;
}
.con .gold{
color: gold;
}
</style>
</head>
<body>
<div class = "con">
<span>span标签的内容...</span>
<br>
<a href="#" class = "pink">这是一个超链接标签</a>
<a href="#" class="gold">这是第二个超链接</a>
</div>
</body>
</html>
七、CSS属性:
1.布局常用样式属性:
- width 设置元素(标签)的宽度，如：width:100px;
- height 设置元素(标签)的高度，如：height:200px;
- background 设置元素背景色或者背景图片，如:background:gold; 设置元素背景色为金色;
- border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线;
以上也可以拆分成四个边的写法,分别设置四个边的: - border-top 设置顶边边框，如：border-top:10px solid red;
- border-left 设置左边边框，如：border-left:10px solid blue;
- border-right 设置右边边框，如：border-right:10px solid green;
- border-bottom 设置底边边框，如：border-bottom:10px solid pink;
- padding 设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
- margin 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。
2、文本常用样式属性(一):
- color 设置文字的颜色，如： color:red;
- font-size 设置文字的大小，如：font-size:12px;
- font-family 设置文字的字体，如：font-family:‘微软雅黑’;为了避免中文字不兼容，一般写成：font-family:‘Microsoft Yahei’;
- font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗;
- line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px;
- text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉;
- text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中;
- text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px;
441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
