朝花夕拾-HTML&CSS-学习笔记1
朝花夕拾,一个老年人的学习笔记,不妥请指,感谢
学习《HTML网页制作》王朝梅 伍秋菊 著
第一章 HTML概述
1.1 web概述
Web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
1.1.1 起源
1.1.2 表现形式
1-超文本-Hyper text
2-超媒体-Hypermedia
3-超文本传输协议-http hypertext transfer protocol
1.2 HTML超文本标记语言
1.2.1 简介
1.2.2 发展历程
1.2.3 特点
1.3 HTML开发工具
HBuildr/HBuilderX
Dreamweaver
visual studio
WebStorm
1.4 HTML项目创建
1.5 HTML主体标签
1.5.1 <! DOCTYOE>
<! DOCTYPE> 声明必须是 HTML 文档的第一行，位于 标签之前，它不是 HTML标签；它是指示 Web 浏览器关于页面使用哪个 HTML 版本进行编写的指令
1.5.2 文档主题标签
1.HTML标签
2.head标签
3.body标签
1.6 HTML注释
1.7HTML字符实体
第2章 HTML基本标签和属性
2.1 HTML标签属性
2.1.1 通用核心属性
1 id属性
语法：
Value：规定元素的唯一id
<! DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1 id="myHeader">html is the best! </h1>
</body>
</html>
id 属性规定 HTML 元素的唯一的 id。
id 在 HTML 文档中必须是唯一的。
id 属性可用作链接锚（link anchor），通过 CSS 为带有指定 id 的元素改变或添加样式(第三章会详细讲解样式设置)。
2. Class属性
语法：
value：规定元素的类的名称。如需为一个元素规定多个类，用空格分隔类名。
<! DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1 class="myHeader">html is the best! </h1>
</body>
</html>
3.title属性
4.Style属性
2.1.2 特殊属性
1.bgcolor属性
2.background属性
html常用块级标签
2.2.1 标题标签
h1~h6
2.2.2 段落标签
p
2.2.3 div标签
可定义文档中的分区或节（division/section）。
标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 可以对同一个
元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。 ### 2.2.4 水平线标签 hr ## 2.3 常用内联标签 a span br img input font ### 2.3.1 超链接标签 a标签 ### 2.3.2 span标签 DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表。两者最明显的区别在于DIV是块元素，而SPAN是行内元素。
标签被用来组合文档中的行内元素。 在行内定义一个区域，也就是一行内可以被划分成好几个区域，从而实现某种特定效果。本身没有任何属性。 在 CSS 定义中属于一个行内元素，而
是块级元素，可以通俗地理解为
为大容器，大容器可以放多个小容器，
就是小容器。 ### 2.3.3 换行标签 br ### 2.3.4 字体样式标签 1 文字倾斜 i em 2 文字加粗 b 3 文字下划线 u 4 预格式化标签 pre # 第3章 CSS基础样式 ## 3.1 css概述 ## 3.2 基础选择器 ### 3.2.1 HTML标签选择器
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML标签选择器</title>
<style type="text/css">
p {
text-align: center;
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<p>每个段落都会受到样式的影响。</p >
<p id="para1">我也是！</p >
<p>还有我！</p >
</body>
</html>
3.2.2 类选择器
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style type="text/css">
.nav{
width: 300px;
height: 40px;
line-height: 40px;
background-color: skyblue;
margin: 0 auto;
text-align: center;
}
.content{
height: 200px;
border: 3px solid skyblue;
margin: 20px;
}
</style>
</head>
<body>
<div class="nav">
首页
商品展示
新闻资讯
个人中心
</div>
<div class="content">
首页内容
</div>
</body>
</html>
3.2.3 ID选择器
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ID选择器</title>
<style type="text/css">
#intro{
color: red;
}
</style>
</head>
<body>
<p id="intro">这是一段文本内容。</p >
</body>
</html>
3.2.4 后代选择器
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div a{
color: pink;
}
</style>
</head>
<body>
<div>
<h3>这是文章标题标题中的链接</h3>
<p>这是一篇文章的简介点击查看全文</p >
</div>
这是其他说明
</body>
</html>
3.2.5 群组选择器
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>群组选择器</title>
<style type="text/css">
h1, h2, h3{color:black; text-align:center; font-family:"微软雅黑"; }
h1{font-size:24px; }
h2{font-size:16px; }
h3{font-size:12px; }
</style>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
</body>
</html>
3.3 CSS样式属性
3.3.1 背景
3.3.2 框模型
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
常用的样式属性_边框
3.3.3 文本属性
常用的css样式属性
3.3.4 字体
3.3.5 其他杂项
3.4 样式编写位置
之前的范例中，样式规则声明大部分都是编写在网页头部中的标签内部，在这里声明的样式规则称为内部样式表，或叫内嵌样式表，它们将对整个页面全局有效。
实际上，样式规则声明还可以写在需要这个样式的特定的标签内部，或者写在HTML网页文档之外。
第4章 html图像应用
4.1 图像的基础应用
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像</title>
</head>
<body>
<p>
这是我家可爱的狗狗<br />
< img src="img/dog.jpg" alt="这是一个非常可爱的狗狗" width="200" />
</p >
</body>
</html>
4.2 图像实例
插入图像
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插入图像</title>
</head>
<body>
<p>
一幅图像：
< img src="img/horse.png" width="128" />
</p >
<p>
一幅动画图像：
< img src="img/eg_cute.gif" width="50" height="50" />
</p >
</body>
</html>
4.2.2 插入不同位置的图像
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>插入不同位置的图像</title>
</head>
<body>
<p>
来自另一个文件夹的图像：
< img src="img/cat.jpg" width="200" />
</p >
<p>
来自 www.baidu.com 的图像：
< img src="https://www.baidu.com/img/flexible/logo/pc/result.png"
/>
</p >
</body>
</html>
4.2.3 背景图像
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图像</title>
<style type="text/css">
div{
background-image: url(img/bg.jpg);
padding: 20px;
}
</style>
</head>
<body>
<div>
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作背景图像。</p >
<p>如果图像小于区域，图像会进行重复。</p >
<p>如果不需要图像重复，可使用样式设置。</p >
</div>
</body>
</html>
4.2.4 排列图片
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>排列图片</title>
</head>
<body>
<h2>未设置对齐方式的图像：</h2>
<p>图像 < img src ="img/eg_cute.gif"> 在文本中</p >
<h2>已设置对齐方式的图像：</h2>
<p>图像 < img src="img/eg_cute.gif" align="bottom"> 在文本中</p >
<p>图像 < img src ="img/eg_cute.gif" align="middle"> 在文本中</p >
<p>图像 < img src ="img/eg_cute.gif" align="top"> 在文本中</p >
</body>
</html>
4.2.5 浮动图像
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动图像</title>
</head>
<body>
<p>
< img src ="img/eg_cute.gif" align ="left">
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的
左侧。
</p >
<p>
< img src ="img/eg_cute.gif" align ="right">
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本
的右侧。
</p >
</body>
</html>
4.2.6 文本代替图片显示
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本代替图片显示</title>
</head>
<body>
< img src="img/cat.jpg" alt="这是一群可爱的小猫咪" width="200"/>
<br />
<br />
< img src="img/ca.jpg" alt="这是一个地址写错了的图片"/>
</body>
</html>
4.2.7 图像链接
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像链接</title>
</head>
<body>
您也可以把图像作为链接来使用：
<a href=" ">
< img src="img/result.png" width="100" />
</a >
</body>
</html>
第5章 HTML表格
5.1 表格结构
5.1.1 基础结构
table
5.1.2 表格标题和标题单元格
table
caption
tr -rd（th）
5.2 表格属性
5.2.1 table属性
5.2.2 td属性
5.3 案例实践
5.3.1 表格的表头
tr和td的竖向和横向排列
5.3.2 单元格合并
colspan和rowspan
5.3.3 单元格内的标签
5.3.4 表格的边框合并
第6章 HTML列表
6.1 有序列表
ol li
6.1.1 默认列表样式
6.1.2 数字序号列表
6.1.3 字母序号列表
6.1.4 时辰序号列表
6.2 无序列表
6.2.1 默认样式列表
<html>
<head>
<title>无序列表</title>
</head>
<body>
<p>海鲜自助餐重点推荐</p >
<ul>
<li>口味大肉蟹</li>
<li>盐焗濑尿虾</li>
<li>蒜蓉清蒸小鲍</li>
<li>辣椒炒海瓜子</li>
<li>哈贝冬瓜汤</li>
</ul>
</body>
</html>
6.2.2 嵌套列表
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套列表</title>
</head>
<body>
<p>饮品列表</p >
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>黑菜</li>
<li>绿茶
<ul>
<li>中国</li>
<li>非洲</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>
6.2.3 序号图片样式
<! DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>序号图片样式</title>
<style type="text/css">
p{
color: #2BAE2E;
font-weight: bold;
}
li{
list-style: url(img/list-style-img.png);
border-bottom: 1px dashed #01ac31;
line-height: 40px;
color: #01AC31;
width: 200px;
}
</style>
</head>
<body>
<p>海鲜自助餐重点推荐</p >
<ul>
<li>口味大肉蟹</li>
<li>盐焗濑尿虾</li>
<li>蒜蓉清蒸小鲍</li>
<li>辣椒炒海瓜子</li>
<li>哈贝冬瓜汤</li>
</ul>
</body>
</html>
6.3 定义列表
dl dt
总结
ol 创建有序列表
ul 创建无序列表
li 创建列表项目
dl 创建定义列表
dt 定义列表中的项目
dd 描述定义列表中的项目
第七章 表单和表单元素
7.1 表单
form
7.2 表单元素
7.2.1 input标签
7.2.2 textarea标签
7.2.3 select 标签
7.2.4 button标签
7.2.5 labe标签
7.2.6 fiedlset和legend标签
<html>
<head>
<title>fieldset和legend示例</title>
</head>
<body>
<h1>在此填写会员注册资料</h1>
<form>
<fieldset>
<legend>帐户信息</legend>
会员名：<input id="txtName" type="text" name="txtName"
value="请输入会员名" size="20" /><br />
登录密码：<input id="txtPwd" type="password" name="txtPwd"
maxlength="18"/><br />
</fieldset>
<fieldset>
<legend>个人资料</legend>
性别：
<input id="radioGenderMale" type="radio" name="radioGender"
value="male" checked="checked" />男
<input id="radioGenderFemale" type="radio" name="radioGender"
value="female" />女<br />
婚姻状况：<input id="chkMarried" type="checkbox" name="chkMarried"
value="true" />已婚<br />
兴趣爱好：
<input id="chkTravel" type="checkbox" name="chkHobbies"
value="travel" checked="checked">旅行
<input id="chkGame" type="checkbox" name="chkHobbies"
value="game">游戏
<input id="chkShopping" type="checkbox" name="chkHobbies"
value="shopping" checked="checked">购物
<input id="chkChat" type="checkbox" name="chkHobbies"
value="chat">聊天
<input id="chkBar" type="checkbox" name="chkHobbies"
value="bar" checked="checked">泡吧<br />
相片：<input id="filePhoto" type="file" name="filePhoto"/><br />
年龄：
<select>
<option value="">--请选择--</option>
<option value="18">18岁</option>
<option value="19">19岁</option>
<option value="20">20岁</option>
<option value="21" selected="selected">21岁</option>
<option value="22">22岁</option>
<option value="23">23岁</option>
</select><br />
简介：<textarea name="txtDescription" cols="50" rows="6"
wrap="virtual">在此填写你最近两年来的工作经历。</textarea><br />
</fieldset>
<input id="btnSubmit" type="submit" name="btnSubmit"
value="确认注册" />
<input id="btnReset" type="reset" name="btnReset"
value="重新填写" />
<html>
<head>
<title>表单的属性</title>
</head>
<body>
<h1>登录</h1>
<form name="frmLogin" action="login.html" method="get">
会员名：<input type="text" name="txtName" /><br />
密 码：<input type="password" name="txtPwd" /><br />
<input type="submit" name="btnSubmit" value="登录" />
<input type="reset" name="btnReset" value="重填" />
</form>
</body>
</html>
第8章 框架集及框架
8.1 框架集和框架关系
使用frameset和frame可以建立框架集和框架
<html>
<head>
<title>框架集与框架示例</title>
</head>
<frameset cols="50%,50%">
<frame src="nav.html" />
<frame src="content.html" />
</frameset>
<noframes>
<body>
<p>您的浏览器不支持框架集和框架，所以您看到了这个提示。</p >
</body>
</noframes>
</html>
8.2 框架集的属性
表8.1 框架表的属性
<html>
<head>
<title>框架集的cols属性——垂直分割</title>
</head>
<frameset cols="150px, *,25%">
<frame src="left.html" />
<frame src="center.html" />
<frame src="right.html" />
</frameset>
</html>
<html>
<head>
<title>框架集的rows属性——水平分割</title>
</head>
<frameset rows="100, *,100px">
<frame src="top.html" />
<frame src="middle.html" />
<frame src="bottom.html" />
</frameset>
</html>
8.3 框架的属性
<html>
<head>
<title>框架的属性</title>
</head>
<frameset cols="150px, *">
<frame src="nav.html" name="leftFrame" scrolling="no"
noresize="noresize" />
<frame src="content.html" name="mainFrame" scrolling="auto"
noresize="noresize"/>
</frameset>
</html>
8.4 框架集的嵌套
<html>
<head>
<title>框架的属性</title>
</head>
<frameset cols="150px, *">
<frame src="nav.html" name="leftFrame" scrolling="no"
noresize="noresize" />
<frame src="content.html" name="mainFrame" scrolling="auto"
noresize="noresize"/>
</frameset>
</html>
8.5 浮动框架
iframe
8.6 超链接和表单的目标框架窗口
<html>
<head>
<title>XX论坛</title>
</head>
<frameset cols="150px, *">
<frame src="nav.html" name="leftFrame" />
<frame src="content.html" name="mainFrame" />
</frameset>
</html>
824
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
