一、
网站:在万维网上根据规则使用HTML工具制作的网页的集合,是web的基础。
网页:网站由网页组成,是构成网站的基本元素。网页元素包括:文字、图片、动画音乐程序等。
WEB主流浏览器(调试工具):IE 、谷歌、火狐、opera、safari
WEB常用的开发工具:Webstorm、Dreaweaver、Phpstorm、Hbuilder、Sublime
WEB标准的组成:结构、表现、行为
HTML:Hyper Text Markup Language的缩写,超文本标记语言。是一种标记语言
二、
1.HTML文件的基本结构
``` python
<!DOCTYPE html> //html5标准网页声明
<html> //文件开始标记
<head lang="en"> //文件头部开始的标记
<meta charset="UTF-8"> //使用最广泛的网页编码是utf-8
<title></title> //定义文件的标题
</head> //文件头部结束的标记
<body> //文件主体开始的标记
//文件主体的内容
</body> //文件主体结束的标记
</html> //文件结束标记
```
2.基础标签的认识
1).** <p>段落标签</p>
**:用来定义网页中的一段文本,段落与段落之间换行。
属性:algin ;定义段落中的文本水平方向的对齐方式。
属性值:left(左对齐)、right(右对齐)、center(居中对齐)
2).<br/>
:换行标签,指行与行之间换行,他是一个单标签。
两者的区别:
<br/>
:是单标签,小行换行提行;
<p></p>
:是双标签,大行换行分段;
3).** <h1></h1>---<h6></h6>
**:
<h1></h1>
:代表一级标题,级别高,字体 也最大,其他依次递减。
<h6></h6>
:级别最小,字体最小
属性:algin ;定义标题中的文本水平方向的对齐方式。
属性值:left(左对齐)、right(右对齐)、center(居中对齐)
4).<blockquote>文字段落缩进</blockquote>
:在标签中包含块级标签,而不是纯文本。
<blockquote>
<p>自动缩进p标签内的文本</p>
</blockquote>
5). 建立无序列表
<ul type="circle">
<li>列表项</li>
<li>列表项</li>
</ul>
属性:type ;定义列表项的符号。
属性值:circle(空心圆)、disc(实心圆)、square(实心方块)
6). 建立有序列表
<ol type="a">
<li>列表项</li>
<li>列表项</li>
</ol>
属性:type ;定义列表项的符号。 start:用来设置列表编号的起始数值。
属性值:a、A、i、I
7).** 建立自定义列表**
<dl>
<dt>列表标题</dt>
<dd>列表项</dd>
<dd>列表项</dd>
</dl>
8). 文字特殊样式
<i>倾斜</i>
<u>下划线</u>
<s>删除线</s>
<big>放大</big>
<small>缩小</small>
<strong>加强强调</strong>
<em>强调倾斜</em>```
#三、
1.** ```<img/>``` :图片标签 **
属性:
src:指定图片源文件;
alt :图片未加载成功的提示文字;
width:指定图片的宽度;
height:指定图片的高度;
border:指定图片的边框样式;
alghr:top/bottom/middle;图片位于两端文字在垂直方向的一个上/中/下的对齐方式;
2.**``` <a></a>```:超链接**
属性:
href:连接地址;空连接可以用"#"代替;
target :_self/_blank;打开方式;_self在当前页面中打开,_blank在新的空白窗口打开。
3.** URL的格式**
URL定义:每一信息资源都有统一的且在网上唯一的地址,改地址就叫做统一资源定位符;
URL的组成:资源类型、存放资源的主机域名、资源文件名;
URL的语法格式一般为:(带方括号[]的为可选项);
绝对路径:包含文件的所有信息;
相对路径:指向相对于原文档统一服务器或者同一文件夹中的文件;
"../":返回上级目录;"/" :表示下一级目录;
4. **``<a>标签制作锚点、锚记``**
```<a href="#C3">查看 Chapter 3</a> (锚点)href里面的#是固有格式c3是随便起的名字;
<h2><a name="C3">Chapter 3</a></h2> 锚记)name里的名字与#后面相同```
#四、
####``<table></table>``:表格基本结构
``` python
<table>
<caption>表格标题</caption>
<tr>
<td>我是第一行的第一个单元格</td>
<td>我是第一行的第二个单元格</td>
</tr>
<tr>
<td>我是第二行的第一个单元格</td>
<td>我是第二行的第二个单元格</td>
</tr>
</table>
表格的表头<th>是<td>单元格的一种变体,实质上是一种单元格加粗和居中
table的属性:
width:表格的宽度
height:表格的高度
align:表格的对齐方式
border:表格的边框
bordercolor:边框的颜色
cellspaning:单元格之前的距离
csllpadding:单元格与内容之间的距离
bgcolor:表格的背景颜色
background:表格的背景图片
tr的属性:
height:行的高度
bordercolor:边框的颜色
bgcolor:表格的背景颜色
background:背景图片
align:文本水平对齐方式
valign:文本垂直对齐方式
tr的属性:
width:单元格的宽
height:单元格的高度
bordercolor:边框的颜色
bgcolor:背景颜色
background:表格的背景图片
align:文本水平对齐方式
valign:文本垂直对齐方式
colspan:水平合并单元格(跨列)
rowspan:垂直合并单元格(跨行)
完整的表格标记
如果使用thead、tfoot、tbody元素,就必须使用全部的元素
四、
表单 (form)输入类型
单选按钮 (checked默认)
<input type="radio" name=" " checked />
<input type="radio" name=" " />
复选按钮 (checked默认)
<input type="checkbox" name=" " checked />
<input type="checkbox" name=" " />
密码输入框
<input type="password" />
提交按钮
<input type="submit" />
重置按钮
<input type="reset" />
普通按钮
<input type="button" />
图片按钮(有提交功能)
<input type="image" />
多行文本框
<textarea cols="一行多少字符" rowa="多少行"><textarea>
列表框
<select size="一次显示多少个" multiple="可多选">
<option selected>默认的下拉菜单1</option>
<option>下拉菜单2</option>
</select>
单行文本框
<input type="text" size="文本框显示的长度" maxlength="最长字符数"/>
隐藏域
<input type="hidden"/>
文件域
<input type="file"/>