前端期末1111

前端期末

超文本标记语言（英语：HyperText Markup Language，简称：HTML）

body：在网页文档中，所有文本，图像，音频和视频等代码只能放在标签内才能呈现给用户。

HTML中的标签不区分大小写

&nbsp；空格

常见的图片格式有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 >，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点：
① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
② 默认宽度就是它本身内容的宽度（行内元素特点）。
③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）

网页模块的命名规范