使用HTML和CSS开发商业站点_html/css_WEB-ITnose

第一章HTML 基础
1.html 的基本结构？
解析：
2.HTML 全称
Hyper Text Markup Language（超文本标记语言）
扩展XML:Extendsible Markup Language(可扩展性标记语言)
3.高级记事本
Ue（UltraEdit）
nodepad++
Editplus
快捷键用熟一个即可。
4.编写html 文档的注意点
01.所有标签字母均小写。
02.有开始就要有闭合标签
03.每个层次的标签有一定程度的缩进。
解析：如果发现body 内书写了内容，用浏览器打开后发现没有内容，那么
就需要检查下title 标签有没有闭合。
5.三种文档类型
严格类型，过渡类型，框架类型
6.编码方式
gb2312
Gbk
Gb2312 和gbk 的区别
GB2312 是中国规定的汉字编码，也可以说是简体中文的字符集编码;GBK 是GB2312 的
扩展,除了兼容GB2312 外，它还能显示繁体中文，还有日文的假名
utf-8:全球通用编码
用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。
7.W3C：组织
解析：是一个组织，专门用来给各个浏览器厂商等指定规范的。
8.标签
01.h 标签：从h1 到h6 字体逐渐减小。
效果：自身加粗，并且可以控制字号。
02.p 标签：和其他的内容行之间有一个空行。
03.br 换行标签：是自身闭合标签。
04.hr 水平线标签，是自身闭合标签。
05.strong（加粗）、06.em（倾斜）
07.特殊符号：所有的特殊符号都是包括在&;中
空格：
大于号：>
小于号:<
双引号:"
版权符号:©
林徽因：冰心(谢婉莹)，小桔灯() 99
你是人间的四月天
9.图像标签
夏洛特的网
html 中两种路径：
第一种：绝对路径，就是挂着盘符的路径形式，例如：c:\\123\\01.jpg
相对路径：相对的对象时当前你访问的html 文档。符号是(上一级目录)
注意问题：相对路径：去该html 文件对应的上层文件夹
一般不会使用绝对路径：D:\\1.html
显示的文字”/>
自身闭合标签
10.超链接
分类：页面间链接，锚链接，功能性链接。
页面间链接：
去百度
锚链接：
01.同页面间锚链接
分两步：第一步：在页面目标位置设置一个锚记。 />
第二步：在另一处创建出一个超链接：去看明星的隐私信
息吧
02.跨页面的锚链接
功能性链接：
站长信箱
打开QQ
迅雷
电驴
ek2k://
QQ 旋风
第二章列表、表格与框架
第二章列表、表格与框架
收作业
听写
补充a 标签的一个属性target
1._blank:在新选项卡中打开
2._self:如果没有设置target 属性，默认取值是_self
01.列表
001.无序列表：



002.有序列表



003.定义描述标签：应用场景：在图文混编的情况下使用

放置图片

....

02.表格


表格




北京
上海
广州


北京
上海
广州


北京
上海
广州




重点：表格的跨行跨列
步骤：1、有几行几列？
解析：3 行两列
2.该跨行的跨行(rospan)，该跨列的跨列(cospan)
3.核心原则：跨行和跨列只能出现在td 中
一定要注意的是：所有的跨行和跨列操作都出现在td 中。
表格跨行跨列步骤：
01.确定表格的行和列
02.搭建出表格架构
03.根据需求，删除多余的td(单元格)
3.框架集和内嵌框架
再来一遍Frameset
作用：当我们需要将一个比较大的页面切割成多个小页面的时候，可以使用FrameSet，它
一般用于后台管理员布局方式。
重要内容：FrameSet 和body 不能共存。
实现：
首先：创建出https://img.gxlcms.com/top.html, left.html right.html 三个子页面
然后，在主页面index.html 中通过frameset 标签来引入三个子页面












注释：01.border 可以设置边框的宽度，如果是20，那么代表边框宽度是20px，如果设置为
0，代表无边框。
02.noresize=”noresize”不允许用户拖动框架
03.scrolling=”no” 不显示滚动条
Iframe 用法：
应用场景：链接外部的页面，实现样式的代码重用。
FrameSet:
01.不能和body 共存
02.将index 页面用三个页面组合起来，将一个大
页面Index 切成3 小块，每一个小块儿对应一个页面
https://img.gxlcms.com/top.html
left.html
right.html
04.框架集Frameset 和内嵌框架iframe
frameset 用于进行网页布局，对多个页面进行组
合。比较复杂，而iframe 一般用于引入站外链接，天气预
报
frameset 关键属性：
border：设置边框：可以取值100
frameborder:0 和1
borderColor:颜色
frame:noresize srcolling
iframe：noresize srcolling width height
第三章表单
第三章表单
01.什么是表单？？
解析：表单就是form

注意点：
02.表单元素？
解析：在表单中的标签就是表单元素
03.老湿：你说get 和post 提交方式有什么区别？
解析：get 在地址栏显示提交的数据（危险）
2k
1byte=8bit(位)）
（1kb=1024byte(字节)
1mb=1024kb
1Gb=1024mb
1Tb=1024Gb
4M: 4m/s 512k/s
post 在表单，通过开发人员工具可以看到（安
全）没有上限
要想让表单元素中的value 值提交到服务器，
表单元素必须有name 属性
重置和清空？？
解析：
表单元素：
input: type="text" 文本框
type="passsword" 密码框
type="radio" 单选框
type="checkbox" 复选框
type="submit" 提交按钮
type="reset" 重置按钮
type="button" 普通按钮
type="image" 图片按钮
type="file"文件域
type="hidden" 隐藏域
下拉框
select ---option 下拉框
多行文本域
多行文本域
属性
：只读readonly="readonly"
禁用： disabled="disabled"
-->
第四章初识CSS
1.任务
1.第三章和第四章单词
2.考试
3.前三章总结
4.第四章内容讲解
引入dreamweaver 工具使用
2.内容：
1.使用css 的意义：为了实现代码和样式的分离
01.什么是CSS：(Cascading Stylesheet)层叠样式表
02.CSS 在页面中的应用：
解析：

P{
font-size:20px;
Color:red;
}

03.CSS 的优势
CSS 的基本语法
01.CSS 基本语法结构
02.认识 标签
03.CSS 选择器
标签选择器:通过标签名来设置元素的样式。
类选择器
解析：两步：第一步：在要设置样式的目标标签中起一个名字为class 的属性名
第二步：在style 标签中，通过.属性名{}设置
ID 选择器
解析：
第一步：在要设置样式的标签中起一个名称为id 的属性，
第二步：在style 标签中通过#属性名{}设置
在HTML 中引入CSS 样式
01.行内样式
解析：直接在html 代码的标签中设置style 属性，这种方式缺点做不到代码和样式分离。
02.内部样式表
解析：直接在style 标签中书写样式代码，但是真正在项目发布的时候，还是最好将样式
单独出一个文件，这样会提高网站的性能。
03.外部样式表
解析：通过link 标签引入当前网站css 文件夹中某一个后缀名是.css 的文件，

04.样式优先级
规律：
行内>内部样式表>外部样式表
也就是遵循的是就近原则。
CSS 高级应用
01.CSS 复合选择器
A.后代选择器
B.交集选择器
C.并集选择器
02.CSS 继承特性
A.继承关系
B.继承的应用
注意点：
01.如何调整dreamweaver 中代码视图的字体大小。
.
2.问：
声明：下次课的预习大家一定要好好预习，因为里面的东东很多很杂，所以需要大家多用点
心。
总结：
1.为什么使用CS
2.CSS 语法

标签类ID 选择器

3.选择器的优先级
近者优点
4.三种引入样式表方式
第一种：行内样式
第二种：内部样式表
第三种：外部样式表
5. 复合选择器
01.后代选择器空格
02.并集选择器，，，，
03.交集选择器连接写，第一个只能是标签，后续跟的是类样式，ID
6.CSS 当中的继承
作业：
1.预习第五章（难点，希望大家好好预习）
第五章CSS 美化网页元素
内容回顾：
01.CSS：让网页看起来更加美观，可以实现页面样式的复用。层叠样式表
02.CSS 选择器：ID 类选择器标签
03.复合选择器：交集，并集，后代
现阶段，大家所用的选择器，只要能满足题目要求即可，没有必要刻意去使用复合选择器，
等到有一天，你发觉使用常见3 种选择器，定位某一个标签特别麻烦的时候，思路可以往这
个方向偏移。
交集选择器：p.name div#name
并集选择器：p,div
后代选择器: p ul li
04 选择器的.优先级
ID>类选择器>标签选择器
05.CSS 中的继承
子标签可以继承父标签的样式
CSS 美化网页元素
1.span 标签引入
老师说了，通过span 标签，我们学了一个知识点，就是行级标签和块级标签。
行级标签：；所有的行级标签都显示在同一行（span，img）
块级标签：独占一行（p ，div）
2.字体样式
大家教了我一点，就是如果font-family 属性值有多个，用逗号
隔开。如果英文字体和中文字体同时出现，英文位于前面。
02.如果字体属性值有空格，必须有””,
03.如果字体属性是中文，也要有””
分开设置属性：
设置字体类型:font-family:到底是楷体呢还是宋体”楷体_GB2312”
设置字体大小:font-size：设置字体大小
设置字体风格:font-style;倾斜：font-style:italic
设置字体粗细font-weight:bold; 700px
整体设置属性：font:字体风格字体的粗细字体大小字体类型;

----------------------------------------------------

查看更多关于使用HTML和CSS开发商业站点_html/css_WEB-ITnose的详细内容...