**HTML笔记**
1、基本语法规则
由尖括号包括的关键词，通常成对出现，也有单标签。
2、关系
并立关系、嵌套关系
3、网页中Web三层标准
结构：网页元素（骨骼)、表现;修饰、CSS（衣着）、行为: 交互Js（动作）
4、HTML骨架标签
```html
<html> 根标签
<head>头部标签
<title>程序媛日常</title>标题标签
</head>
<body>
键盘敲烂，工资过万
</body>
</html>
```
5、标题标签
h1~h6,由大到小，字体依次变小
6、段落标签
<p></p> br
7、路径
./在同一文件夹下，也可以直接写
/下一级路径，必须要写文件名/目标文件
../上一级路径
8、图片标签
img 必须属性为src,还可以添加alt：替换文本，title:提示文本，鼠标移到图片上，显示图片。
9、div和span标签：盒子标签
div占一行，一个大盒子，span一行可以放很多个。这两个标签没有语义，两个盒子。
10、链接标签
（1）**外部链接**：a标签中间加文字，href链接路径，target窗口打开方式（_self为默认模式，在当前窗口打开；__blank在新窗口打开）
（2）**内部链接**：与src相似，href链接是文件，src链接图片
（3）**空连接**：href=“#”，空连接会刷新页面
（4）**下载链接**：地址链接为exe.zip等压缩文件，确定好路径
（5）**网页元素的链接**：把图片等元素当文字放在a中间
（6）**a标签的title属性**：写logo时会用到
（7）**锚点链接**：点击哪个就加a标签href=“#名字”，目的点标签内添加id=“名字”
11、注释标签和特殊字符
（1）**注释标签**：ctrl+/.<!--标签-->，快捷键ctrl+/
（2）**特殊字符**：空格 几个空格就写几个；大于号<小于号>
12、文本格式化标签 加粗：strong 或b
倾斜:em或i
删除线：del或s
下划线：ins或u
13、图像标签：img
| 属性 | 属性值 | 说明 |
| ----- | -------- | -------------------------------- |
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，当图像不能显示时 |
| title | 文本 | 提示文本，鼠标放在图像上显示文字 |
当然，插入图片可以设置宽高边框，也可以与父盒子一样大100%。
14、表格 目的：展示数据
<table>
<tr>定义行
<th>表头，一般第一行或第一列，文字加粗</th>
<td>表格内容：图片、文字、链接都可</td>
</tr>
</table>
| 属性名 | 属性值 | 描述 |
| ----------- | ----------------- | ------------------ |
| align | left\center\right | 与周围元素对齐方式 |
| border | 1或“” | 默认“”没有边框 |
| cellpadding | 像数值 | 内容与边缘的距离 |
| cellspacing | 像数值 | 单元格之间的空白 |
| width | 像数值或百分比 | 表格宽度 |
分清表格结构，<thead>标签表格的头部区域，内部必须拥有tr标签，<tbody>表格的主体区域，放数据。
**合并单元格**：
跨行合并：rowspan="合并单元格个数"，最上侧单元格为目标单元格，写合并代码。
跨列合并：clospan="合并单元格个数"，最左侧单元格为目标单元格，写合并代码。
书写步骤：确定跨列还是跨行，找到目标单元格，写上合并方式=合并单元格个数；删除多余单元格。
15、列表 目的：布局
**无序列表**：并列的，带有自己的样式，用css来设置
<ul>中输入其他标签或文字是不被允许的
<li>而li中可以容纳所有元素</li>
</ul>
**有序列表：**按一定顺序排列
<ol>
<li></li>
</ol>
**自定义列表：**对术语进行解释和描述
<dl>
<dt>名词</dt>
<dd>解释</dd>
</dl>
16、**表单标签**
form定义表单域，把里面的信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">各种表单元素控件</form>
**input**:表单控件（表单元素）,包含type属性，根据type不同属性值，输入多种形式。还有name定义input的名称；value规定input元素的值；checke="checked"input元素首次加载时应当被选中，maxlength=正整数，规定字段最大长度。
<input type=""></input>
type属性值有以下：
button可点击按钮；checkbox复选框；radio定义单选按钮；file供文件上传；hidden定义隐藏输入字段；image图像形式提交按钮；password密码字段；reset重置按钮；text输入文本；submit提交按钮。
**select** 表单元素，定义下拉列表
<select>
<option>选项1</option>
</select>
**textarea**：表单元素，定义多行文本输入
<textarea rows="3" clos="20"></textarea>
rows="显示的行数",clos="每行中的字符数"
**CSS笔记**
1、css:标记语言,是层叠样式表的简称。
2、css的构成;选择器以及一条或多条声明。
3、代码风格：选择器和大括号中间保留空格，属性值前面，冒号后面保留一个空格。
4、基础选择器
（1）标签选择器：不能差异化选择
（2）类选择器：.类名，需要用class来调用类。
长名称或词组可以使用中横线连接；不要使用纯数字、中文等，尽量使用英文；命名规范
（3）多类名选择器：在class属性中写多个类名；中间用空格分开；标签就可以分别具有这些类名。
（4）id选择器：css中id选择器以#来定义，id属性只能在每个 HTML文档中出现一次。
（5）通配符选择器：不需要调用，自动给所有元素使用样式。
5、css字体属性
（1）字体大小：font-size定义字体大小
px是网页常用单位；不同浏览器默认字体大小不一致，尽量给明确值；谷歌浏览器默认字体大小为16px；可以给body指定整个页面文字大小。
（2）设置文本字体粗细：font-weight
默认normal不加粗；bold定义加粗；400等同于normal，700等同于bold.
(3)设置文本的风格：font-style
默认值normal；斜体italic.
（4）字体综合写法
font: font-style font-weight font-size font-family有顺序，不能随意换位置；其中字体、字号必须一起出现。
5、css文本属性
（1）文本颜色：color
预定义颜色值：red,green;十六进制：#fff；rgb(255,0 ,0)
(2)文本对齐：text-align
属性值有：left\right\center.
(3)修饰文本:text-decoration
none默认，没有装饰线；underline下划线；overline上划线；line-through删除线。
（4）文本缩进：text-indent
（5）行间距（行高）：line-height
6、css样式表
（1）行内式
语法：<div style="color:red;"></div>
(2)内部样式表（嵌入式）
语法：<style>
div {
color: red;
}
</style>理论上可以放在任何地方，但一般放在<head>标签中。
（3）外部样式表（链接式）
新建一个后缀名为.css的样式文件，把所有css代码放到此文件中；在HTML中使用<link>标签引入。
|
|
收藏
淘帖
踩
