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

网页模块的命名规范