网页的构成
| 摘要 | 说明 |
|---|---|
| 结构(HTML) | HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 |
| 表现(CSS) | CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 |
| 行为(JavaScript / jQuery) | JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有购物网站中图片的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的 |
HTML简介
-
HTML 是用来描述网页的一种语言。
-
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
-
超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素
-
HTML 不是一种编程语言，而是一种标记语言 (markup language)
-
标记语言是一套标记标签 (markup tag)，由一组<>包围的关键字
-
HTML网页的后缀名一般为.html
-
HTML 使用标记标签来描述网页
标题标签
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>-
默认占用浏览器的一整行，并且前后要空一行
段落标签
<p>两个黄鹂鸣翠柳</p>
<p>是否还没女朋友</p>-
段落标签也会独占浏览器的一行，而且前后还会空出一行。
-
使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br />标签代替它！
换行标签
<br />：是个自结束标签
<br />加粗标签
<b>天王盖地虎</b>无序列表
<ul type="square">
<!-- 定义导航栏 -->
<li>网页</li>
<li>新闻</li>
<li>视频</li>
<li>贴吧</li>
</ul>有序列表
<ol>
<li>单身久了，坐地铁女孩蹭下肩膀，你连你们的孩子叫什么名字都想好了</li>
<li>太久没接吻，吃个鸭舌都能感到温柔</li>
<li>太久没牵手，拿着泡椒凤爪心都会颤抖</li>
</ol>图片标签
<img alt="“ src="" title=""/>-
alt:图片无法显示时显示的描述性文字
-
src:图片的地址（或路径）。这里分为相对路径和绝对路径。
-
width和height:设置图片的宽度和高度
-
(了解) title:鼠标放在图片上时显示的描述性文字
使用相对路径查找目标资源心得
-
目标文件与当前文件在同一目录下，直接查找使用。
-
目标文件与当前文件不在同一目录下，先找目标文件父包，再找目标文件
-
如：父包也不与当前文件在同包下，将父包当成目标文件，继续找父包的父包。以此类推，找到WebContent根目录为止。
补充内容：html中的相对路径与绝对路径
相对路径：以当前文件所在的路径为基准
. 表示当前文件所在目录
.. 表示上一级目录
资源名 表示当前目录下的资源 ./资源名 ./可以省略
使用../返回上一级
绝对路径：
盘符:\文件名 =====>>>> 错误(真实路径)
http://ip:port/工程名/资源名 ===>>> 正确
比如：http://localhost:8080/img/13.jpg超链接
<a href="http://www.baidu.com" target="_blank"></a>-
href:指向一个链接地址
-
target:定义被链接的文档在何处显示。
-
值为”_self”时在向当前窗口打开新的网页（默认）
-
值为”_blank”时在新的窗口打开
-
转义字符
-
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。即，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
-
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
-
如果想表示多个空格，需要使用如下的转义字符。
说明1：如需显示小于号，我们必须这样写：< 或 <
说明2：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
div标签
<div>...</div>-
div是html中最灵活最重要的元素，div就像一个容器，里面可以装很多内容。本身没有特殊的语义。
-
它是块级元素，会占用网页的一行。
-
Div的主要作用：可以通过调整自己的样式来完成网页的复杂布局
内联框架
<iframe src="1.html" name=""></iframe>-
src:一个网页的地址
-
name: iframe的名字，当<a>标签的target属性值为iframe的name时，超链接的目标页面会在iframe中打开
其它标签
<strong>和<em>标签 (了解)
-
两者在强调的语气上有区别: <em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用 斜体 表示，<strong> 用 粗体 表示。
<span>标签
-
<span>标签是是内联元素，没有语义的，它的作用就是为了设置单独的样式用的。有了它就可以对某段文字里的几个字单独设置样式了。
<span style="background-color: red">span测试</span><font>标签
font 标签是字体标签，它可以简单的修改文本样式效果。但现在已经不建议使用了。
<font face="宋体" color="red" size="7" >我是字体标签</font>分割线标签
<hr /> 标签在 HTML 页面中创建水平分割线。用于分割内容、文章的小节。
补充说明：
块级元素：各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。width、height、padding、margin有效。
内联元素：在一条直线上排列，都是同一行的，水平方向排列。设置width、height、padding、margin无效。
列表
1.列表的分类：
无序列表|有序列表
2.定义无序列表的标签：unorder list ul
<ul></ul>
3.定义序列表的标签：ol
<ol></ol>
4.定义列表项的标签：
<li></li>
5.定义无序列表中列表项前的符号形状：
square:实心方
circle:空心圆
disc:实心圆(默认)
6.定义序列表中列表项前的符号形状：
1
a|A
i|I
表格
1.定义表格使用的标签：table tr th|td
2.table标签中可以声明的属性：
border:边框
width:宽
height:高
3.td标签内定义对齐方式的属性：
align:left|center|right
4.
跨行:rowspan
跨列:colspan
5. 定义表单使用的标签：
<form action="表单提交路径" method="表单提交方式（get|post">
定义表单项的标签
<input type="text">
<!-- type:表单项类型，"text:文本框
password：密码框
|radio|checkbox|reset|submit|hidden|file"
name:需要提交数据的表单项，必须有name属性值。
value:
对于钮来说，value可以设置钮文本值。
对于非钮表单项，value可以设置表单项的默认值。
对于单框&复框来说，必须value属性值
checked:设置单框&复框默认中-->
<select>
<option></option>
</select>
selected:默认中
multiple:设置当前下拉列表为多下拉列表
</form>
2984
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
