HTML-html
超文本标记语言,扩展名 .html 和 .htm。
文件名称区分大小写,标签不区分大小写,标签要成对出现。
属性以空格进行分隔,属性的值要用单双引号引起来
标签列表-语法
html标签语法 | 注释 | 说明 |
---|---|---|
< br> | 回车 | 注意’<'与br没有空格 |
  | 空格 | |
< !DOCTYPE html> | 注记 | 翻译html,标注html版本,当前是html5版本 |
< html> | 主标记 | 其他的标签都必须放在html里 |
< head> | 头部 | 窗体信息和外部导入文件 |
< body> | 身体 | 放页面上显示的东西 |
< title> | 窗体名称 | |
< meta charset=“utf-8”> | 修改字符集 | |
< h1>~< h6> | 标题标记 | |
< p> | 段落标记 | |
< a href="#"> | 超链接,href定义路径 | 绝对路径: http://www.baidu.com file://D:/aa/work.html(不建议) 相对路径: 1. 同一文件下:work.html 2. 子文件夹:aa/work.html 3. 不同文件夹:…/aa/work.html 4. 返回上一级目录 : …/ |
< span> | 布局标签 | |
< div> | 布局标签 |
CSS-css
层叠样式表,用来美化页面的 ,代码写作的简单,可以用来改多个标签
标签列表-语法
CSS语法 | 注释 | 说明 |
---|---|---|
< p style=“color:red”> | 行内样式 | 不建议这样使用 |
< style> p{color:red;} < /style> | 内嵌样式 | |
< link rel=“stylesheet” href=“css/style.css”> | 外部引用样式 |
标签列表-选择器
css选择器 | 解释 | 说明 |
---|---|---|
*{ } | 通配符选择器 | 获取所有标签 |
p{ } | 标签选择器 | 对"p"字符有效 |
.font{ } | 类选择器 | 获取class属性,可重复定义 |
#text{ } | id选择器 | 获得id属性,唯一 |
标签列表-文字
css文字 | 解释 | 说明 |
---|---|---|
color | 文字颜色 | 单词 color:red 十六进制 color:#0f0f0f 色阶:rgb(0,0,0),范围0-255 |
font-size | 字体大小 | 单位:像素px。默认 12px-14px 单位:百分比% |
font-weight | 字体粗细 | 范围:100-900,默认400 |
font-style | 字体倾斜 | 情况:normal正常、italic倾斜 |
font-family | 字体类型 | 例如:font-family:“隶书”,Anals。默认宋体 |
letter-spacing | 字体间距 | 单位:像素px 或 百分比% |
word-spacing | 单词间距 | 单位:像素px 或 百分比% |
line-height | 行高 | 单位:像素px 或 百分比% |
text-align | 水平对齐 | 情况:left左、right右、center中 |
text-decoraction | 文本装饰 | 情况:none无样式、underline下划线、overline上划线、line-through删除线(穿过文本的线)。 |
教师范例-两例
例一:
// A code block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="css/style1.css">-->
<style>
/*h1{*/
/*color: green;*/
/*}*/
*{
color: blueviolet;
}
.font{
color: #ff4e03;
}
p{
font-size: 40px;
font-weight: 900;
font-style: italic;
}
.font{
font-family: "华文隶书",Adobe Caslon Pro;
}
h1{
letter-spacing: 40px;
}
p{
word-spacing: 40px;
line-height: 70px;
text-align: center;
text-decoration: overline;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<h1 style="color: red">hhhhhhhhh</h1>
<p class="font">中文 文字 效果</p>
<a href="#" class="font">aaaaaaaaa</a>
<h1>hhhhhhhhh</h1>
<p>pppppppp</p>
<a href="#">aaaaaaaaa</a>
<h1>hhhhhhhhh</h1>
<p>pppppppp</p>
<a href="#">aaaaaaaaa</a>
</body>
</html>
css/style1.css文件内容
h1{
color: palevioletred;
}
例二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度</title>
</head>
<body>
hello word<br>
你好页面
<h1>这是标题文字</h1>
<h2>这是标题文字</h2>
<h3>这是标题文字</h3>
<h4>这是标题文字</h4>
<h5>这是标题文字</h5>
<h6>这是标题文字</h6>
<p> 超文本标记语言,扩展名.html和.htm,文件名称区分大小写,标签不区分大小写,标签要成对出现,属性以空格进
行分隔,属性的值要用单双引号引起来</p>
<p> 超文本标记语言,扩展名.html和.htm,文件名称区分大小写,标签不区分大小写,标签要成对出现,属性以空格进
行分隔,属性的值要用单双引号引起来</p>
<a href="http://www.baidu.com">超链接1</a>
<a href="../aa/main.html">超链接2</a>
<span>这是span标签</span>
<span>这是span标签</span>
<div>这是div标签</div>
<div>这是div标签</div>
</body>
</html>