爱站程序员基地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>
