HTML基础
2016-09-24 本文已影响20人
夷陵小祖
公有属性：
title（公有属性）：提示性文本（鼠标移到那里就显示）
name = xxx //给标签起名字
HTML（超文本标记语言）概述：
超文本：音频，视频，图片
标记：<英文单词或者字母> ，一个页面由各种标记组成，每个标签含义固定
- 是标记语言而不是编程语言，没有编译过程
HTML网络术语
标记
元素：可以理解成标签
XHTML：符合xml标准的html，可以自定义标签
DHTML：（动态html）html（数据的显示）+css（数据怎么显示）+js（实现动态的效果）
HTML的开发工具
- EditPlus--缺点：没有代码提示
- Notepad++（少用）
- 专业版DW(DreamWeaver)
优点：手机平板桌面都可以
HTML结构概述
- 扩展名：.html或者.htm(因为有些系统要求后缀名不能超过三个字符)
- 书写规范：不区分大小写
- 结构
第一个部分：文档的声明（告诉浏览器该页面使用哪个html标准 ）
第二：head，用于提供给服务器，作者，关键字，描述等
第三： body，写内容
排版标签
把标签理解成java中的对象，标签有公有和私有属性。
<p></p>标签：代表一个段落：
属性：<p align = "center">大家好</p>
<br>代表换行
<hr>：代表一条线，类似markdown中---
控制线的长度<hr width = "500" size = “10” color = “red” noshade>
>
width：长度
size：粗细
color：red
noshade：没有阴影
若在50后面加上%，则根据屏幕占50%
只有一个单位即像素
单引号，双引号，不加引号都行
</center>标签中的所有内容都居浏览器中间（html5已经废除这个）
<pre></pre>:预先格式化，不忽略空格和空行(所有浏览器都默认忽略空格和空行)
<div></div> 块级标签（必须单独占据一行）
属性：align=center 居中
<span>作用同div，区别--不换行</span>
字体标签
<h></h> 规定字体大小，1-6
<h1>帅哥</h1>
<h2>帅哥</h2>
<h3>帅哥</h3>
<font face=楷体 size=1 color=red >帅哥</font>
face：字体
size:1->7 大于7按7算
color：英文单词或者#000000（红绿蓝，将对应的00改成FF）或者color="new RGB(10,255,10)"
特殊符号
<p> ： <p>
空格：  ； ；
<b></b> 粗体 bold
<strong></strong> 粗体
<i></i> 或者<em></em> 斜体
<u></u> 下划线
<s></s> 中划线或者删除线
底<sub>下标</sub> 下标
底<sup>上标</sup> 上标
图片标签
<img src=路径 width=300 height=300 alt=帅哥 border=10 title>
alt：如果图片没显示出来则alt内容代替图片内容
border：图片边的宽度
title（公有属性）：提示性文本
align：图片和周围文字的相对位置
路径：相对和绝对
相对：相对当前页面的路径（..上一层路径 .当前路径）
绝对：a.以逻辑盘符开始的路径
b.网络路径： 例如：http：//www.baidu.com/images/2.jpg（照片来自其他网站，少用，如果其他网站图片改变）
超链接
有三种形式
a.外部链接：连接到一个外部文件
<a href =外部文件 例如xxx.html>链接的提示文字</a>
b.锚链接：连接到本页面或者其他页面的特定位置（例如回到顶部）--需要先在特定位置用name属性定义锚a
<a href =#a >回到顶部</a>
c.邮件链接：去到邮箱
<a href = mailto：351175318@qq.com>进入我的邮箱</a>
还要看电脑安装的是哪个邮件软件
属性target： 告诉浏览器用什么方式打开页面
target = _self :
target = _blank :打开一个新的浏览器（也可能是打开一个新的选项卡）
terget = _parent :（后面讲）
terget = _top : （后面讲）
热点问题（）
对图片的局部区域加超链
清单标记
a.无序清单ul - unordered lists
<ul type = disc>
<li> 内容 </li>
<li> 内容 </li>
<li> 内容 </li>
</ul>
属性:
type=disc 实心圆/circle 空心圆/square 方形
b.有序清单 ol - ordered lists(默认阿拉伯数字)
<ol type = 1 / a / A / i / I start = x>
<li> 内容 </li>
<li> 内容 </li>
<li> 内容 </li>
</ol>
type = 1 / a / A / i / I
start ：从哪个数开始
c.定义清单 - define
<dl>
<dt> 第一 </dt>
<dd> 内容 </dd>
<dd> 内容 </dd>
<dt> 第二 </dt>
<dd> 内容 </dd>
<dd> 内容 </dd>
</dl>
效果：
第一
内容
内容
第二
内容
内容
表格标签<table></table>
<table>
<thead>
<tr> //行
<td>d</td> //列的内容
<td>e</td>
<td>f</td>
</tr>
</thead>
</table>
（公有属性）dir = rtl / ltr （从右到左或者从左到有）
tr属性：
boeder = 1
width = 100
height = 100
** align = center 表格居中而不是里面的内容
cellpadding = xxx 内容到边的距离
cellspacing = xxx 单元格之间的间距（边的粗细）
bordercolordark= xxx 右下的颜色
bordercolorlight = xxx 左上的颜色
bgcolor = #00FF00 背景色
background = 路径 背景图片（优先级大于背景色）
td属性：
align = center 内容水平居中
valign = top / middle / bottom 内容垂直居中
bgcolor = #00FF00 背景色
注意：无法在单元格（tr）中显示图片，可在td中显示图片。
#####表格合并
rowspan = 合并的行数
colspan = 合并的列数
行内容加粗
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
表格标题（位置不限 ）
<caption>表格标题</caption>
属性：align = center / right / left / bottom
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
示例：
<thead> （加了这个之后这个可以放在表格中任意位置，但是显示的时候仍旧显示在第一行）
<tr> //行
<td>d</td> //列的内容
<td>e</td>
<td>f</td>
</tr>
</thead>
框架标签
表单标签：收集数据
a.文本框
<form action = "指定页面" method = get / post>
姓名：<input type = text //一个输入文本框
value = 请输入姓名 //
size = 10 //允许输入的字符长度
disabled //无法进入且无法编辑文本框
readonly > //能进入当无法编辑文本框
密码：<input type = password> //密码框
隐藏框：<input type = hidden > //不要求用户去输入，程序员自己用的
性别：<input type = radio
name = gender //name是提供给浏览器的
value = male //male是提供给浏览器的
checked //checked用来进行默认选中
>男 //"男"是显示在浏览器的
<input type = radio
name = gender
value = female>女<br>
国家：<input type = radio
name = country //name是提供给浏览器的
value = China //male是提供给浏览器的
checked //checked用来进行默认选中
>中国 //"中国"是显示在浏览器的
爱好：<input type = checkbox
name = love
value = eat
checked
>吃饭
下拉框：
学历：<select name = 学历 multiple>
<option value = 大学>大学</option>
<option value = 高中>高中</option>
</select>
备注：<textarea rows = 5 cols = 10>留言区</textarea>
<input type = button value = 普通按钮 onclick = "alert(this.value)">
//可用作例如绑定按钮
<input type = submit value = 提交按钮 >
//点击，就提交到action指定的页面中去
//method=get 即把提交的内容附加在网址后面；数据大小有限制（不能超1k）
//method=post 提交的网址中不包含内容；大小无限制
<input type = reset value = 重置按钮 >
//将表单中所有控件置换到初始状态
<input type = image src = 路径 width = 10 height = 10>
//功能同提交按钮
<button onclick = alert('大家好')>普通按钮</button>
</form>
思维导图
