前端期末
超文本标记语言（英语：HyperText Markup Language，简称：HTML）
body：在网页文档中，所有文本，图像，音频和视频等代码只能放在标签内才能呈现给用户。
HTML中的标签不区分大小写
 ； 空格
常见的图片格式有GIF动图、PNG和JPG。
在img标签中有
| 属性 | 属性值 | 描述 |
|---|---|---|
| alt | 文本 | 当图片未找到，显示的文字 |
| title | 文本 | 鼠标悬停在图片上显示的文字 |
| width | 像素 | 宽度 |
| height | 像素 | 高度 |
| border | 数字 | 图片边框 |
| vspace | 像素值 | 垂直边距 |
| hspace | 像素值 | 水平边距 |
| align | 方向 | left、right、top、middle、bottom |
a标签的写法<a href='www.baidu.com' target='_blank'>百度</a>
- 其中 href 是跳转的地址url
- target：默认值
_self在当前窗口打开，_blank在新窗口打开。
主题标签
- header 头部标签
- nav
- main 主题标签
- footer 尾部标签
CSS使用的三种方式
一、行内式
<html>
<head>
</head>
<body><footer style='background-color: DarkSalmon; color: white;'><p>作者：Bill Gates<br><a href="mailto:bill@example.com">bill@example.com</a></p>
</footer></body>
</html>
二、页面嵌入
<html>
<head>
<style>
footer {text-align: center;padding: 3px;background-color: DarkSalmon;color: white;
}
</style>
</head>
<body><footer><p>作者：Bill Gates<br><a href="mailto:bill@example.com">bill@example.com</a></p>
</footer></body>
</html>
三、外链式
-
index.html<html> <head><link href="style.css" rel="stylesheet" /> </head> <body><footer><p>作者：Bill Gates<br><a href="mailto:bill@example.com">bill@example.com</a></p> </footer></body> </html> -
style.css* {padding: 0;margin: 0; } footer {text-align: center;padding: 3px;background-color: DarkSalmon;color: white; }
Css中的技术选择器有**标签选择器，class类选择器(.)，id选择器(#)，通配符选择器，交集选择器，并集选择器(,)，后代选择器(空格)**。
CSS
-
.box {/* 文字大小 */font-size: 20px;/* 文字加粗 */font-weight: 400;/* 字间距 */letter-spacing: 20px;/* 英文单词间距 */word-spacing: 20px;/* 行间距 */line-height: 25px;/* 文字居中 */text-align: center;/* 首行缩进 , 2em是两个字符*/text-indent: 2em; } a {/* 文字 取消下划线 , underline 下划线、overline上划线、line-through设置删除线*/text-decoration: none; }/* a标签 超链接 样式 */ /* 超链接默认样式 */ a:link {} /* 超链接被点击后的样式 */ a:visited {} /* 鼠标经过的样式 */ a:hover {} /* 单击时的样式 */ a:active{}/* 盒子模型 */ .box1 {/* 边框连接：宽度、样式、颜色 */border: 20px solid red;/* 下面是边框单独设置 *//* 设置边框颜色 */border-color: black;/* 边框大小 */border-width: 30px;/* 边框样式 */border-style: solid;/* 圆角 */border-radius: 5px;/* 盒子阴影 *//* x 偏移量 | y 偏移量 | 阴影颜色 */box-shadow: 10px 10px black;/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */box-shadow: 10px 5px 5px black;/* 背景图片 no-repeat 不平铺、repeat-y 垂直方向平铺， repeat-x 水平方向平铺*/background-repeat: no-repeat;/* 背景图片位置 x轴 、 y轴*/background-position: 20px 20px;/* 设置透明 */opacity: 0.5;/* 浮动 left 左浮动、right右浮动、none 取消浮动*/float: left;/* 定位 static 静态、relative相对、absolute绝对、fixed固定*/position: static; }
一、html元素分类
html元素：行内元素、块元素、行内块元素
二、块元素
常见的块级元素：< h1 >~< h6 >、< p >、< div >、< ul >、< ol >、< li >、< dd >、< dt >、< dl >等，其中 < div > 标签是最典型的块元素。
块级元素的特点：
① 比较霸道，自己独占一行。
② 高度，宽度、外边距以及内边距都可以控制。
③ 宽度默认是容器（父级宽度）的100%。
④ 是一个容器及盒子，里面可以放行内或者块级元素。
注意：
文字类的元素内不能使用块级元素
< p > 标签主要用于存放文字，因此 < p > 里面不能放块级元素，特别是不能放< div >。同理， < h1 >~< h6 >等都是文字类块级标签，里面也不能放其他块级元素
三、行内元素
常见的行内元素： < a >、< strong >、< b >、< em >、< i >、< del >、< s >、< ins >、< u >、< span >、< img />、< input />、< select >、< textarea >、< br />、等，其中 < span > 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点：
① 相邻行内元素在一行上，一行可以显示多个。
② 高、宽直接设置是无效的。
③ 默认宽度就是它本身内容的宽度。
④ 行内元素只能容纳文本或其他行内元素。
注意：
链接里面不能再放链接
特殊情况链接 < a > 里面可以放块级元素，但是给 < a > 转换一下块级模式最安全
四、行内块元素
在行内元素中有几个特殊的标签 —— < img />、< input />、< td >，它们同时具有块元素和行内元素的特点。 有些资料称它们为行内块元素。
行内块元素的特点：
① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
② 默认宽度就是它本身内容的宽度（行内元素特点）。
③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）
网页模块的命名规范
- 避免使用中文字符命名
- 不能以数字开头命名
- 不能用关键字
- 用最少的字母达到最容易理解的效果
- 常用的命名还有驼峰命名，蛇形命名