Html总结
一：前言以及web标准
web：
广义：互联网
狭义：网页
网页：
1）网页中的内容：文字、图片、视频、音频、链接、flash。
2）制作网页：
通过html代码
3）浏览网页：
通过浏览器（IE、谷歌、火狐、苹果、欧朋）
问题？
同一个网页，在不同的浏览器中，显示效果可能不一样。
4）浏览器软件的厂商不同的，使用的技术（内核）是不一样的。
5）江湖盟主：W3C组织，制定一系列跟网页相关的标准。
6）web标准：
网页中有哪些代码组成？
1）html代码 （网页排版） ---网页结构
2）css代码 （外观样式） ---网页表现
3）javascript代码 （网页特效）---网页行为
二:认识html
HTML：
1）超文本标记语言。
2）语言的规范：
1》由各种标签组成，例如：图片标签、文字标签、超链接标签等等等等。
2》标签都使用<>来包裹。<img />
3》网页文件有固定的骨架代码：
4》标签的分类（特点）：
A、双标签，有开始有结束，例如：<head></head>
B、单标签，只有1个标签，例如：<br />、<img />
5》标签和标签之间的关系：
A、并列关系（兄弟关系），例如：<head></head>和<body></body>
B、嵌套关系（父子关系），例如：<head></head>和<title></title>
三：html常用标签
html中的标签：
1）标题标签：
1》<h1></h1>.....<h6></h6>
2》双标签
3》特点：
1）标签中的文字加粗
2）标签在网页中独占一行
2）段落标签：
1》<p></p>
2》双标签
3》特点：
1）独占一行
3）水平线标签：
1》<hr />
2》单标签
4）换行标签
1》<br />
2》单标签
5）div和span
1》<div></div>、<span></span>
2》特点：
div独占一行
span一行可以放多个
6）文本格式化标签（对标签中的文字有修饰效果）
1》加粗效果：<b></b>、<strong></strong>
2》斜体效果：<i></i>、<em></em>
3》删除线效果：<s></s>、<del></de>
4》下划线效果：<u></u>、<ins></ins>
7）图像标签
1》<img src="" />
2》标签属性
alt属性：不能显示的图片显示的文字
title属性：
width属性：宽高不继承。一般表格居中用w600
height属性：
8）链接标签
1》<a href=""></a>
2》标签属性：
href属性：链接到的网页地址。
1）打开一个其他网站的页面（外部链接）
2）打开一个自己网站的页面（内部链接）
href="demo01.html"
3）空链接
href="#"
target属性：链接页面的打开方式。
1）当前窗口打开。【默认】
target="_self"
2）在新窗口打开。
target="_blank"
9）注释标签
1》提示作用
2》<!-- 注释文字 -->
3》快捷键：ctrl + /
扩展标签：
1）锚点定位
① 在当前页面，可以快速定位。
② 使用步骤
第1步，先找到目标位置，添加个id属性
第2步，创建一个超链接，href的值为“#id值”
2）base标签
① 统一设置页面中所有a标签的打开方式
② 使用：
<base target="_blank" />
1）单标签
2）必须写在head标签中
3）pre标签
<pre></pre>
保留标签中文字的格式。
4）特殊字符
html中预留（征用了）一些符号，例如：><。
如果我们想在页面显示这些符号，就用特殊字符代替。
空格：
> ：>
< ：<
四：路径
路径：
1）相对路径（相对于自己）
A、同级路径（跟自己在同一个文件夹） 直接写文件名
B、下一级路径 /
C、上一级路径 ../
2）绝对路径（不变的路径）
A、绝对的本地地址（本机地址）---基本不用
C:\Users\muxiaoshuai\Desktop\html01\images\timg.gif
B、绝对的网络地址（别人网站上文件的路径）
http://www.itheima.com/images/logo.png
五：表格table
表格：
1)表格相关的标签
<table></table>
<tr></tr>
<td></td>、<th></th>加粗居中
<caption></caption>写在table内tr前面
2）表格的属性（加给table标签）
边框：border
宽width、高height
水平方向的位置:align
单元格外面的距离：cellspacing
单元格内文字距边框的距离：cellpadding
3）合并单元格
1）区分跨行合并还是跨列合并
2）步骤：
1.先确定是跨行rowspan还是跨列colspan
2.找到目标单元格（起始单元格），写合并方式和合并数量
3.删除多余的单元格
六：列表
列表：
1）无序列表
<ul>
<li></li>
</ul>
2）自定义列表
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
七：表单
表单要提交必须用<form></form>
表单：
1）表单域
<form></form>
2）输入框
文本输入框：<input type="text" value="默认内容" />
密码输入框：<input type="password" />
3）单选按钮和复选框
<input type="radio" name="sex" checked="checked" />
<input type="checkbox" name="hobby" checked="checked" />
4）各种按钮
普通按钮：<input type="button" value="按钮" />
表单提交按钮：<input type="submit" />
表单重置按钮：<input type="reset" />
图片提交按钮：<input type="image" src="" />
5）文件域（文件上传）
<input type="file" />
6）下拉列表
<select>
<option></option>
<option selected="selected"></option>
</select>
7）文本域
<textarea></textarea>
8）label标签：
提示文字+input标签
1）作用：
把提示文字和input绑到一起，单击文字跟单击输入框的效果是一样的。
2）用法：
第1种：直接用label把文字和input一起包裹起来。
<label>用户名：<input type="text" value="默认值"> </label>
第2种，用label只包裹文字，然后通过for和id来绑起来。
<label for="yu">用户名：</label><input type="text" value="默认值" id="yu">
|
|
收藏
淘帖
踩
