Html基础
1 常用快捷键
Ctrl+c | 复制 |
Ctrl+v | 粘贴 |
Ctrl+x | 剪切 |
Ctrl+a | 全选 |
Ctrl+s | 保存 |
Ctrl+z | 撤销一步 |
Windows+d | 返回桌面 |
Windows+e | 我的电脑 |
Windows+r | 打开运行 |
Alt+tab | 切换软件 |
Ctrl+tab | 软件文档之间的切换 |
F2 | 重命名 |
F5 | 刷新页面 |
2 认识html
2.1 Hyper text markup language
超文本标记语言。
超文本:超链接。(实现页面跳转)
2.2 Html结构标准
<! doctype html> 声明文档类型
<html> 根标签
<head> 头标签
<title></title> 标题标签
</head>
<body> 主体标签
</body>
</html>
Html 与htm是一样的。
后缀名不能决定文件格式,只能决定打开文件打开的方式。
2.3 开发工具
Dw
历史悠久,设计师使用。
Sublime 轻量级 有很多好用的插件。
Webstorm 重量级 太过智能。
新建文件、打开文件、打开文件夹 | |
Html:xt+tab | Html结构代码 |
tab | 补全标签代码 |
Ctrl+shift+d | 快速复制一行 |
Ctrl+shiif+k | 快速删除一行 |
Ctrl+鼠标左键单击 | 集体输入 |
Ctrl+h | 查找替换 |
Ctrl+f | 查找 |
Ctrl+/ | 注释 |
Ctrl+L | 快速选择一行 |
Ctrl+shift+↑(↓) | 快速上移(下移)一行 |
F11 | 全屏 |
查看----布局 |
sublime快捷键使用:http://blog.csdn.netdetails/11530751
3 标签
3.1 单标签
◆注释标签 ctrl+/
◆ 换行标签 <br/>
◆ 水平线标签 <hr />
3.2 双标签
<p>文本内容</p>
特点:上下自动生成空白行。<br>换行不会生成空白行。
标题标签
h1-h6 取值到h6
h1 在一个页面里只能出现一次。
文本标签
<font>文本内容</font>
文本格式化标签
文本加粗标签 <strong></strong> <b></b> 工作里尽量使用strong
文本倾斜标签
<em></em> <i></i> 工作里尽量使用em
删除线标签
<del></del> <s></s> 工作里尽量使用del
下划线标签
<ins></ins> <u></u> 工作里尽量ins
◆注意:之所以工作里使用<strong></strong> <em></em> <del></del>
<ins></ins> 是因为更有语义化。
3.3 图片标签和属性
Src 图片的来源 必写属性
Alt 替换文本 图片不显示的时候显示的文字
Title 提示文本 鼠标放到图片上显示的文字
Width 图片宽度
Height 图片高度
◆图片没有定义宽高的时候,图片按照百分之百比例显示,如果只更改图片的宽度或者高度,图片等比例缩放。
4 路径
4.1 相对路径
相对于文件自身出发,就是相对路径。
◆文件和图片(html文档)在同一个目录(文件夹) ,直接写文件名。
◆图片(html文档)的 文件在下一级目录里。文件夹名称+/+图片(html)名称
◆图片(html)在文件的上一级目录里,..+/+图片(html)名称
◆图片在文件的上一级的其他目录里,../文件夹名称/图片名称
★总结:找到下一级目录(文件夹)的图片(文件)用 /
跳出当前目录使用../
4.2 绝对路径
5 超链接
href 去往的路径(跳转的页面) 必写属性
title 提示文本 鼠标放到链接上显示的文字
target=”_self” 默认值 在自身
页面打开(关闭自身页面,打开链接页面)
Target=”_blank” 打开新页面(自身页面不关闭,打开一个新的链接页面)
5.1 锚链接
1.先定义一个锚点
2.超链接到锚点
5.2 ,空链 不知道链接到那个页面的时候,用空链
5.3 压缩文件下载 不推荐使用
5.4 超链接优化写法
在<head></head>中写道:<basetarget="_blank"> 让所有的超链接都在新窗口打开
6 另存为 ctrl+shift+s
7 特殊字符
8 列表
8.1 无序列表
<ul>
<li></li> 列表项
<li></li>
<li></li>
</ul>\
type=”square” 小方块
Type=”disc” 实心小圆圈
Type=”circle” 空心小圆圈
8.2 有序列表
<ol>
<li></li> 列表项
<li></li>
<li></li>
</ol>
◆type=”1,a,A,i,I” type的值可以为1,a,A,i,I
start=”3” 决定了开始的位置。
8.3 自定义列表
<dl>
<dt></dt> 小标题
<dd></dd> 解释标题
<dd></dd> 解释标题
</dl>
9 音乐标签
10 滚动
11新的html结构
11.1 !+tab html5的标签结构,不用html:xt+tab了
Charset 编码
Ascll
Ansi
Unicode
Gbk
Gb2312
Big5
Utf-8 通用字符集
11.2 关键字
11.3 网页描述
11.4 网页重定向
这里表示五秒之后跳转到一个新的网站域名(比如原来的网站不用了,方便老用户能通过原来的网跳到新页面)
11.5 链接外部样式表
11.6 设置icon图标
网页打开最上面的小图
12 表格
展示数据。 是对网页重构的一个有益补充。
<table> 表格
<tr> 行
<td></td>列
<td></td>
<td></td>
</tr>
</table>
◆属性:
Border=”1” 边框
Width=”500” 宽度
Height=”300” 高
cellspacing=”2” 单元格与单元格的距离
cellpadding=”2” 内容距边框的距离
align=”left | right | center”
如果直接给表格用align=”center” 表格居中
如果给tr或者td使用 ,tr或者td内容居中。
bgcolor=”red” 背景颜色。
12.1 h表格的标准结构
<table>
<thead>
<tr>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
12.2 表头和单元格合并
◆ 表头 <caption></caption>
快速输入表格代码:table>tr*3>td*4s +tab
三行四列
colspan=”2” 合并同一行上的单元格
rowspan=”2” 合并同一列上的单元格
12.3 表格标题、边框颜色、内容垂直对齐
◆表格标题 <th></th>用法和td一样
标题的文字自动加粗水平居中对齐
◆边框颜色
◆内容垂直对齐方式
Valign=”top | middle | bottom”
13 表单
表单的作用是收集信息。
表单的组成
◆提示信息
◆表单控件
◆表单域
属性:action:处理信息
Method=”get | post”
Get通过地址栏提供(传输)信息,安全性差。
Post 通过1.php来处理信息,安全性高。
◆文本输入框
maxlength="6" 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态(不能编辑)
disabled="disabled" 输入框未激活状态
name="username" 输入框的名称
value="大前端" 将输入框的内容传给处理文件
◆密码输入框
★注意:文本输入框的所有属性对密码输入框都有效。
◆单选框
★只有将name的值设置相同的时候,才能实现单选效果。
★checked=”checked” 设置默认选择项。
◆下拉列表
<select>
<option>下拉列表选项</option>
<option>下拉列表选项</option>
</select>
属性:
Multiple=”multiple” 将下拉列表设置为多选项
Selected=”selected” 设置默认选中项目
<optgroup></optgroup> 对下拉列表进行分组。
Label=”” 分组名称。
◆多选框
Checked=”checked” 设置默认选中项
◆多行文本框
Cols 控制输入字符的长度。
Rows 控制输入的行数
◆ 文件上传控件
◆文件提交按钮
★:可以实现信息提交功能
◆普通按钮
★不能提交信息,配合JS使用。
◆图片按钮
★图片按钮可实现信息提交功能
◆重置按钮
★将信息重置到默认状态
◆表单信息分组
<fieldset></fieldset> 对表单信息分组
<legend></legend> 表单信息分组名称
html5补充表单控件
14 标签语义化
好的语义化的网站标准就是去掉样式表文件之后,结构依然很清晰。
标签语义化概念:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)
-标签语义化意义:
1:网页结构合理
2:有利于seo:和搜索引擎建立良好沟通,有了良好的结构和语 义你的网页内容自然容易被搜索引擎抓取;
3:方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)
4:便于团队开发和维护
1:尽可能少的使用无语义的标签div和span;
2:在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
3:不要使用纯样式标签,如:b、font、u等,改用css设置。
4:需要强调的文本,可以包含在strong或者em标签中strong默认样式是加粗(不要用b),em是斜体(不用i);