第一章 html介绍
1-4 标签的语法
- 标签由英文尖括号<和>括起来，如就是一个标签。
- html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个 /。
- 标签与标签之间是可以嵌套的，但先后顺序必须保持一致，如：里嵌套的前面。如下图所示。
，那么
必须放在 - HTML标签不区分大小写，
和
是一样的，但建议小写，因为大部分程序员都以小写为准。
1-5html文件基本结构
一个HTML文件是有自己固定的结构的。
...
...
- 称为根标签，所有的网页标签都在中。
- 标签用于定义文档的头部，它是所有头部元素的容器。
头部元素有、<script>、 <style>、<link>、 <meta>等标签.</li> <li>在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。</li> </ol> <h2>1-6 head标签</h2> <h4>head标签</h4> <p><strong>定义</strong>：文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。</p> <pre><code><head> <title>... title标签
定义：在
和 标签之间的文字内容是网页的标题信息，出现在浏览器的标题栏中。
作用：
1、用于告诉用户和搜索引擎这个网页的主要内容
2、搜索引擎可以通过网页标题，迅速的判断出网页的主题。
3、每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。hello world 1-7 代码注释
作用：帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途
优点：
1、方便程序员自己回忆起以前代码的用途
2、帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。第二章 认识标签
2-1 语义化
含义：明白每个标签的用途（在什么情况下使用此标签合理）
优点：
1、更容易被搜索引擎收录。
2、更容易让屏幕阅读器读出网页内容。2-3
标签（添加段落）
段落文本
注意：
1、每个段落都需要加标签
2、标签默认段前段后都会有空白，
2-4
标签（标题） 含义：文章的标题、栏目的标题,
标题标签一共有6个，
h1 —— 一级标题
h2 —— 二级标题
h3 —— 三级标题
h4 —— 四级标题
h5 ——五级标题
h6 —— 六级标题
注意：
1、依据重要性递减。是最高的等级。
2、标题标签的样式都会加粗，h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号最小。标题文本 (x为1-6)一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
2-5 和标签（强调）
注意：
1、 表示强调
浏览器中 默认用斜体表示
2、 表示更强烈的强调。 用粗体表示。
两个标签相比，目前国内前端程序员更喜欢使用表示强调。需要强调的文本 需要强调的文本2-6 标签（问文字设置单独样式）
作用：只是想为它设置和其它文字不同的样式（并不想让屏幕阅读器对文字加重音读出）
文本2-7
标签（短文本引用）
含义：引用别人的一句话
作用：在你的网页的文章里想引用某个作家的文字
注意：
1、不是作者自己的文字
2、不要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。引用文本
2-8
标签(长文本引用)
含义：在文章中引入大段某知名作家的文字
样式：浏览器对标签的解析是两边缩进样式
引用文本
2-9 br标签（分行显示文本）
作用：相当于word文档中的回车
注意：
标签是一个空标签，空标签只需要写一个开始标签，这样的标签有
、
和。
xhtml1.0写法：
html4.01写法：
2-10 空格
作用：在html代码中输入空格、回车都是没有作用的，必须单独输入代码
2-11 hr标签（水平横线）
作用：在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。
注意：
标签和
标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。
标签的在浏览器中的默认样式线条比较粗，颜色为灰色。- 现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范
html4.01版本
xhtml1.0版本
2-12 标签(为网页加入地址信息)
含义：一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以
标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。联系地址信息 本文的作者：lilian样式：在浏览器上显示的样式为斜体
2-13
标签(加入一行代码)含义：在介绍语言技术的网站中，当代码为一行代码时，可以使用
标签代码语言注意：如果是多行代码，可以使用
标签。
2-14
标签(加入大段代码)
作用：预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
语言代码段
var message="欢迎"; for(var i=1;i<=10;i++) { alert(message); }注意：网页中预显示格式也可以使用它
第三章 认识标签2
3-1
- 标签（添加新闻信息列表）
含义：ul-li是没有前后顺序的信息列表。
- 信息
- 信息 ......
样式：每项li前都自带一个圆点
3-2
- 标签（添加图书销售排行榜）
含义：网页中展示有前后顺序的信息列表
- 信息
- 信息 ......
样式：每项
- 前都自带一个序号，序号默认从1开始
3-3
标签(排版)含义：以把一些独立的逻辑部分划分出来，放在一个
标签中，这个标签的作用就相当于一个容器。…注意：确定逻辑部分：
什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。3-4
命名（逻辑清晰）含义：为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为
提供唯一的名称…3-5
标签(表格)
创建表格的四个元素：
table、tbody、tr、th、td…
：整个表格以标记开始、
标记结束。- …：如果不加
, table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。） … ：表格的一行，所以有几对tr 表格就有几行。… ：表格的一个单元格，一行中包含几对... ，说明一行中就有几列。… ：表格的头部的一个单元格，表格表头。- 表格中列的个数，取决于一行中数据单元格的个数。
注意：表头，也就是th标签中的文本默认为粗体并且居中显示3-6 用css样式，为表格加入边框
作用：Table 表格在没有添加 css 样式之前，是没有边框的。加边框便于对合并单元格的理解。
样式：为th，td单元格添加粗细为一个像素的黑色边框。
3-7
标签（为表格添加标题和摘要）
作用：表格还是需要添加一些标签进行优化，可以添加标题和摘要。
摘要
作用：增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
样式：摘要的内容是不会在浏览器中显示出来的标题
作用：用以描述表格内容
样式：标题的显示位置：表格上方标题文本 … … …第四章 认识标签3
4-1 标签（链接到另一个页面）
作用：使用标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签
链接显示的文本样式：只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色）
title
作用:这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）4-2 在新建浏览器窗口中打开链接
target="_blank"
click here!4-3
标签（链接Email地址） 作用:能让访问者便捷向网站管理者发送电子邮件。
注意:如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
4-4
标签（为网页插入图片）
src：标识图像的位置；
alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
注意：图像可以是GIF，PNG，JPEG格式的图像文件。第五章 与浏览者交互，表单标签
5-1 使用表单标签，与用户交互
定义:表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
form ：
结束。
action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
method ： 数据传送的方式（get/post）。
注意：
1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 标签之间（否则用户输入的信息可提交不到服务器上哦！）。
2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。5-2 文本输入框、密码输入框
作用 ：当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。
type ：
当type="text"时，输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
name：为文本框命名，以备后台程序ASP 、PHP使用。
value：为文本输入框设置默认值。(一般起到提示作用)5-3 文本域(多行文本输入)
cols ：多行输入域的列数。
rows ：多行输入域的行数。
注意 ：
1、 结束。
2.、在标签之间可以输入默认值5-4 单选框、复选框(让用户选择)
作用 ： 在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意
html中有两种选择框，即单选框和复选框
两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选type:
当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框
value：提交数据到服务器的值（后台程序PHP使用）
name：为控件命名，以备后台程序 ASP、PHP 使用
checked：当设置 checked="checked" 时，该选项被默认选中
注意：同一组的单选按钮，name 取值一定要一致5-5 下拉列表框（节省空间）
优点：
- 可以有效的节省网页空间
- 既可以单选、又可以多选
value:提交的值，文本内容是显示的值
selected="selected"：设置selected="selected"属性，则该选项就被默认选中。5-6下拉列表框进行多选
multiple="multiple"：在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。
5-7 提交按钮
定义:当用户需要提交表单信息到服务器时，需要用到提交按钮。
type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字5-8 重置按钮
定义:当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态
type：只有当type值设置为reset时，按钮才有重置作用
value：按钮上显示的文字5-9 form表单中的label标签
定义：如果你在 label 标签内点击文本，就会触发此控件。
就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
作用：为鼠标用户改进了可用性。注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
第六章 开始学习CSS，为网页添加样式
6-1 认识css样式
定义：CSS全称为“层叠样式表 (Cascading Style Sheets)”
作用：定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
优点：通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。p{ font-size:12px; color:red; font-weight:bold; }6-3 css代码语法
css 样式由选择符和声明组成，而声明又由属性和值组成
选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，
注意：
1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内6-4 css注释代码
/*注释语句*/第七章 CSS样式基本知识
7-1 内联式css样式（直接写在现有的HTML标签中）
CSS 样式代码插入的形式：内联式、嵌入式和外部式
内联式：这里文字是红色。
注意：css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。
7-2 嵌入式css样式(写在当前的文件中)
定义：嵌入式css样式，就是可以把css样式代码写在标签之间
之间。
注意：嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在7-3 外部式css样式（写在单独的一个文件中）
定义：外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在
内（不是在我想要在父容器中水平居中显示。15-2 水平居中设置-定宽块状元素
当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素
定义：块状元素的宽度width为固定值。
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的也可以写成： margin-left:auto; margin-right:auto;15-3 水平居中总结-不定宽块状元素方法（一）
实际工作中“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
1、加入 [table] 标签
2、设置 [display: inline]方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
3、设置 [position:relative]和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的第一种方法：
、
利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
1、为需要设置的居中的元素外面加入一个 table 标签 ( 包括、 )。
2、为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。15-4 水平居中总结-不定宽块状元素方法（二）
第二种方法：改变块级元素的 display 为 inline 类型（设置为 [行内元素 显示，然后使用
text-align:center来实现居中效果。html代码： css代码：这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
15-5 水平居中总结-不定宽块状元素方法（三）
方法三：通过给父元素设置float，然后给父元素设置 position:relative和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。
代码如下： css代码：15-6 垂直居中-父元素高度确定的单行文本
两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和line-height高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
hi,imooc!css代码：15-7 垂直居中-父元素高度确定的多行文本（方法一）
方法一：使用插入table(包括tbody、tr、td)标签，同时设置 vertical-align：middle。
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。
html代码：
css代码： table td{height:500px;background:#ccc} 因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。看我是否可以居中。
15-8 垂直居中-父元素高度确定的多行文本（方法二）
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
html代码：css代码： 这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
15-9 隐性改变display类型
当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
1、position : absolute
2、float : left 或 [float:right]
只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。 css代码你可能感兴趣的:(慕课 初识html+css)