一、HTML(Hyper Text Markup language)
1. 超文本：就是一个连接
2. 标记语言：由标签构成的语言<标签名称>如：html，xml 标记语言不是编程语言
3. html文档后缀名为html或htm
4. 标签两种写法
- 围堵标签：如
<html></html> - 自闭标签：如
<br/>
5. 在开始标签中可以定义属性，由键值对构成，只需要添加''或""
6. html标签不区分大小写，建议使用小写。
7. 第一个html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这里是页面的标题</title>
</head>
<body>
<font color="red" size="100px">Hello world</font>
</body>
</html>
二、html标签
1. 文件标签：构成html最基本的标签
<html>： html文档的根标签<head>：头标签，用于指定html文档的一些属性，引用外部资源<title>：标题标签<body>：体标签- `：html5定义为html5文件
2. 文本标签
<br/>：换行符<!- -这里是注释- ->：注释<h1>：标题标签，h1~h6号字体<p>：段落标签<hr/>：水平线
属性：- color：颜色
- width：宽度
- size：粗细
- aligh：对其方式center(居中)、left(左对齐)、right(右对齐)
<b>：字体加粗<i>：斜体<font>：字体标签
属性：- color：字体颜色
- size：字体大小
- face：字体
3. 图片标签
<img>：图片标签
属性：src指定图片位置align图片位置错误显示文字
4. 列表标签
<ol>有序列表
属性：type：排序类型，排序类型有“123”，“abc…z”，“ABC…Z”start：起始序号
<ul>无序列表
属性：type：样式
5. 链接标签
<a/>：超属性连接
属性href：指定跳转资源位置target：指定打开资源方法，self(默认值)在当前页面打开，blank打开一个空白页访问
6. 表格标签
<table>：定义表格
属性：with：表格宽度border：表格边框大小cellpadding：表格内容和左边框距离cellspacing：单元格之间空隙bgcolor：背景颜色align：对其方式
<tr>：定义表格行<td>：定义单元格
属性：colspan：合并列rowspan：合并行
<th>：定义表头单元格<caption>：表格标题<thead>：表示表格头部分<tbody>：表示表格体部分<tfoot>：表示表格脚部分
7. 表单标签
表单：用于用户信息的录入
<form>：用于定义表单的，可定义一个范围，范围代表采集用户的录入数据的范围。
属性：action：指定提交数据的URLmethod：指定提交方式
表单项标签，表单项的数据要想被提交，必须指定其name属性
-
<input>：可通过type属性值改变元素展示的样式。
type属性：text：文本输入框password：密码输入框radio：单选框，所有选项的name值必须一致，一般会给每个单选框value指定单选选定的值，使用checked默认选中checkbox：复选框，所有选项的name值必须一致，一般会给每个复选框value指定单选选定的值，使用checked默认选中file：文件选择框hidden：隐藏域，用于提交一些页面不需要展示的信息。placeholder：输入提示submit：一个提交按钮，可以提交表单，使用value指定其按钮文字展示button：一个普通按钮，使用value指定其按钮文字展示image：图片提交按钮，可以通过src属性指定图片路径textarea：文本域，cols每行的字体个数rows行数
-
<label>：指定输入项的文字描述信息，其for属性指定组件id。 -
<select>：下拉列表，使用<option>指定下拉列表项
三、CSS页面布局和控制
1. 概念：Cascading Style Sheets 层叠样式表，其中层叠指的是多个样式可以作用再同一个html的元素上，同时生效。使用css的优点是可以降低程序之间的耦合度。
2. css的使用方式：结合html语言结合使用。
3. css的几种使用方式
- 内联样式：在标签内使用style属性指定css代码。
如：<div style="font-size: 20px"> hello world </div> - 内部样式：在head标签内，定义
<style>标签，<style>标签的标签体内容就是css代码
如：<style> div { font-size: 16px; } </style> <div> hello world </div> - 外部样式：定义css资源文件，在
<head>标签内定义标签，引入外部的资源文件
如：
a.css文件<style> div { font-size: 16px; } </style>b.html文件<link rel="stylesheet" href="a.css"> <div> hello world </div>
4. css语法
格式：
选择器{
属性名1:属性1;
属性名2:属性2；
}
5. 选择器：筛选具有相似特征的元素
id选择器：选择具有id属性值的元素- 语法：#id属性的值{ }
元素选择器：选择具有相同标签的元素，id选择器优先于元素选择器- 语法：标签名称{ }
类选择器：选择具有相同class属性值的元素，类选择器优先于元素选择器- 语法：.class属性值{ }
选择所有元素：- 语法：*{ }
- 并集选择器：根据不同选择器选择多个元素
- 选择器1,选择器2{ }
子选择器：筛选选择器1元素下的选择器2的元素- 语法：选择器1 选择器2{ }
父选择器：筛选选择器2父元素选择器1- 语法：选择器1 > 选择器2{ }
属性选择器：选择元素名称对应属性名为指定属性值的元素- 语法：元素名称[属性名=“属性值”]{ }
伪性选择器：选择一些元素具有的状态，当元素处于某种状态时起作用-
语法：元素:状态{ }
如<a>标签有几种状态：
1.link：初始化状态
2.visited：被访问过的状态
3.active：正在被访问状态
4.hover：鼠标悬浮状态<style> a:link{ color: pink; } a:visited{ color: red; } a:active{ color: gray; } a:hover{ color: aqua; } </style> <a href="http://www.baidu.com">这里是链接</a>
6. CSS的属性
- 字体、文本
font-size：字体大小color：字体颜色text-align：对其方式line-height：行高font-family：字体样式
- 背景
background：设置背景颜色background-image: url(“image/xxx.png”)：设置背景图片background-position: center center;背景图垂直、水平均居中background-repeat: no-repeat：背景图不平铺background-attachment: fixed：当内容高度大于图片高度时，背景图像的位置相对于viewport固定background-size: cover：让背景图基于容器大小伸缩background-color: #464646：设置背景颜色，背景图加载过程中会显示背景色
- 边框
- border:设置边框
- 尺寸
- width：宽度
- height：高度
- display：隐藏内容，none标识在页面内不占用空间
- 盒子模型：控制布局
- margin
：外边距，margin-left、margin-right、margin-top、margin-bottom`分别控制其他方向的外边距。 padding：内边距，padding-left、padding-right、padding-top、padding-bottom分别控制其他方向的内边距。box-sizing:border-box;设置盒子的属性，让with和height就是盒子最终的大小。float：盒子浮动left：左浮动right：右浮动
- margin
-
扫一扫
518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
