前端记录1
- HTML即HyperText Mark-up Language，意思是超文本标记语言，超文本指的是超链接，标记指的是标签
- 基本结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>
-
标签：<h1></h1> h1-h6,字体从大到小
-
段落：<p></p> 属性align可以设置位置
-
字体：<font></font> 属性color可设置颜色，size可设置字体大小，face可设置字体（宋体，楷体）
-
div：容器标签，表示文档中一块内容没有其他默认样式
-
换行：<br/> 换行只有单个标签
-
图片：<img src="" /> ，src为图片地址，属性alt可以设置图挂了以后显示的文字，可设置图片宽高属性：width="10px" height="10px"
-
超链接：<a></a> 属性href设置要跳转的地址，target设置在什么地方打开连接，如_blank在新窗口打开
-
css: css的定义方法是：选择器
-
引入的三种方式：
- 内联式：通过标签的style属性，在标签上直接写样式
<div style="width:100px; height:100px; background:red ">......</div>
- 嵌入式：通过style标签，在网页上创建嵌入的样式表
<style type="text/css">
div{ width:100px; height:100px; background:red }
......
</style>- 外链式：通过link标签，链接外部样式文件到页面中
<link rel="stylesheet" type="text/css" href="css/main.css">
-
css选择器：
- 类选择器：在CSS 中，类选择器以一个点号显示：.center {text-align: center} 表示所有拥有 center 类的 HTML 元素均为居中
<h1 class="center">
This heading will be center-aligned
</h1>\<p class="center"\> This paragraph will also be center-aligned. \</p\>- 标签选择器:如 div
- 层级选择器：h1 em {color:red;} 会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p> -
背景属性：background-image: url(地址); background-repeat设置背景图片重复 background-attachment 设置背景固定或者随页面滚动
-
边框属性：border: 10px double red; 设置边框宽度 样式和颜色
- 四边分开设置：border-bottom: 5px solid yellow; border-top: 10px dashed red; border-left: 5px dotted beige; border-right: 10px double aqua;
-
内边距：padding: 10px; 四边可分开用padding-left等设置，也可以用padding:10px 5px 15px 20px; 格式，分别为上右下左
-
外边距：margin:10px; 和内边距一样定义
-
浮动：float，可设置位置 float: left;
-
字体属性：color 颜色 font-family 字体（宋体等） font-size 大小 line-height 百分数 行高（行间距），这个是文本属性
