课堂笔记
1.html 超文本标记语言
2.结构html 样式css 交互JavaScript
===========================================
1.基本结构
html
head
meta charset="utf-8"
title
body
h1-h6 标题字标记 属性：align（center left right）
p 段落标记 属性：align（center left right）
b 文本加粗标记
em
sup
sub
pre address
颜色de表示：p24 表的第一行
开发规范：
1.标记分为单标记和双标记
2.属性的书写：<标记 属性="属性值">
3.注释的格式 <!---->
4.以<开始，以>结束，并且再结束标记前应加/
5.标记可以嵌套，不可以交叉
6.不区分大小写
7.特殊符号在html中应该用代码代替
==============================================================
1.css的定义方式
style属性 行内样式
style标记 内部样式表
link标记 外部样式表
2.选择器
标记选择器： 使用标记名称作为一个选择器
id选择器：id是一个属性，每一个标记都可以去设置id属性 #+id属性值
类选择器：class是一个属性，每一个标记都可以去设置class属性 ： .+id属性值
伪类选择器： a标记的伪类
属性选择器：
3.复合选择器
后代选择器 空格表示后代。
并集选择器 p#p1 没有空格！
交集选择器
===============================
选择器{
css属性: css属性值;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<link href="first.css" />
<style>
/*选择器*/
h3{
color: red;
}
/*id选择器*/
#p1{
font-size: 18px;
}
/*类选择器*/
.e1{
color: greenyellow;
}
/*后代选择器*/
p b{
font-size: 12px;
}
/*并集,交集选择器*/
p#p1,p.p2{
font-family: "楷体";
}
</style>
</head>
<body>
<h3 align="center">我是一个标题</h3>
<p id="p1">我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是
<b class="e1">加粗一下我是一个段落我是一个段落</b>
</p>
<hr size="6px" color="red" />
<p class="p2">
我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落
</p>
<b class="p2">这个该不该楷体,这个不该</b>
<p>我是一个段落我是一个段落</p>
</body>
</html>
课堂小作业
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>课堂作业</title>
<style>
.pp1{
font-family: 隶书;
font-size: 25px;
color: cornflowerblue;
}
.ppp1{
color: red;
}
</style>
</head>
<body>
<h6><b>【1.标题字应用】</b></h6>
<h1 align="center">软件工程是全国就业薪酬涨幅最大的职业</h1>
<h6 align="left"><b>软件工程是全国就业薪酬涨幅最大的职业</b></h6>
<hr size="8px" color="#FF0000"/>
<h6><b>【2.段落，字体标记应用】</b></h6>
<p class="pp1">
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。
</p>
<h6><b>【3.文本标记应用】</b></h6>
<p>
<b>2X<sup>2</sup>+3x=9</b>
<small> x<sub>1</sub>+x<sub>2</sub>=10</small><br />
<em>地址：江苏省南京市珠江路1924号</em>
</p>
<h6><b>【4.其他排版标记应用】</b></h6>
<p>
<h1 class="ppp1"> 春 思</h1>
<p> --李白</p>
<pre>
燕草如碧丝，秦桑低绿枝。<br/>
当君怀归日，是妾断肠时。<br/>
春风不相识，何事入罗帏？
</pre>
</p>
<p><blockquote>
【评析】:这是一首描写思妇心绪的诗。开头两句以相隔遥远的燕秦春天景物起兴，写独处 秦地的思妇触景生情，终日思念远在燕地卫戍的夫君，盼望他早日归来。三、四句由 开头两句生发而来，继续写燕草方碧，夫君必定思归怀己，此时秦桑已低，妾已断 肠，进一层表达了思妇之情。五、六两句，以春风掀动罗帏时，思妇的心理活动，来 表现她对爱情坚贞不二的高尚情操。全诗以景寄情，委婉动人。</blockquote>
</p>
</p>
</body>
</html>
第四章：
a
课堂作业：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第四章</title>
<style>
*{
background-color: gainsboro;
}
h4{
font-weight: bolder;
font-family: 楷体;
text-align: center;
background-color: white;
font-size: 36px;
}
.uu{
color: blue;
}
</style>
</head>
<body>
<!--无序列表，有序列表，列表嵌套-->
<h4>高校资讯</h4>
<!--<ul type="circle">
<li>无序列表</li>
</ul>-->
<hr />
<ol type="A" start="7"class="uu">
<li>国防科技大学员问鼎2014国际数模竞赛最高奖 </li>
</ol>
<ol type="a" start="1"class="uu">
<li>同济大学教授阮仪三获2014亨利•霍普•里德奖 </li>
</ol>
<ol type="A" start="2"class="uu">
<li>中科大徐春叶教授获2014年国际材料科学奖 </li>
</ol>
<ol type="1" start="12"class="uu">
<li>北京和睦家医院肺癌诊疗会诊中心成立 </li>
</ol>
<ol type="A" start="13" class="uu">
<li>兰州大学博士生获全国优秀博士学位论文提名 </li>
</ol>
</body>
</html>
