一.基础
1.web标准
web前端的内容:HTML,CSS,JavaScript
(1)HTML结构标准中规定了网页上能够显示的内容,如文字,图片,音频,视频,Flash,按钮,输入框
(2)CSS是表现标准规定网页内容的布局和样式,如:内容该显示在什么位置,内容是什么颜色,多大,多宽等
(3)JS行为标准规定网页的内容在某种情况下发生什么改变,如:动态变化,广告页滚动
2.HTML
HTML是超文本标记语言(不是编程语言)
狭义的h5:指html的第五个大版本
广义的h5:指的是html5+CSS3+javascript
HTML文件结构是由不同的标签组成的
<html>
<head>
内容是不可见的
</head>
<body>
内容是可见的
</body>
</html>
3.标签
标签的语法
a.常规标签(双标签):<标签名 属性名1=属性值1 属性名2=属性值2...>标签内容</标签名>
b.单标签:<标签名 属性名1=属性值1 属性名2=属性值2...>
标签名:不是随意命名的,是一些固定的值,标签名前面不能有空隙
属性:属性放在开始标签中,属性名和值直接用等号连接,多个属性之间用空格隔开.
属性可以是自定义的属性,也可以是标签自带的属性
标签内容:双标签才存在标签内容,标签内容可以是任何东西(可以是文字也可以是其他的标签)
大小写不敏感
文件命名要求:是由字母和数字组成,但是数字不开头,一般都是小写的.网站首页的html文件命名为index
二.文本标签
<!--1.标题标签:h1-h6-->
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
<!--2.段落标签:p-->
网页的内容中一个段落文字对应一个p标签
p标签的内容结束后会自动换行
注意:html中的文字是不会因为手动的回车和空格以及缩进产生空白效果(换行.空格.缩进无效)
但是可以通过一些特殊的符号来产生特定的效果,
如:空格 强制换行<br />
<!--3.文字效果-->
(1).加粗:
b标签,strong标签
b标签:单纯地在样式上进行加粗
strong标签:除了加粗以外还有强调的意义
(2).倾斜:
i标签,em标签
em标签有强调作用
<!--4.水平线:hr-->
<hr /> 单标签
<!--5.列表标签:ul,ol,dl-->
ul:无序列表
ol:有序列表
dl:自定义列表
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ul>
<ol>
<li>北京</li>
<li>成都</li>
<li>上海</li>
</ol>
<dl>
<!--dt对列表进行分组-->
<dt>A</dt>
<!--dd列举分组下的内容-->
<dd>and</dd>
<dd>are</dd>
</dl>
三.图片和超链接
<!--1.图片标签:img标签
单标签
src属性:图片地址(可以是本地图片地址,也可以是远程服务器上的图片地址)
title属性:设置图片标题(这个标题是鼠标停留在图片上等一会儿出现的文字)
alt属性:用来设置图片加载失败时出现的提示信息
-->
<img id="1" alt="加载失败" src="./img/a.jpg" title="月饼"/>
<!--2.超链接标签:a标签
想要点击跳转的地方都可以使用超链接语法
注意:a标签的内容部分是可见的,是可以被点击的
(1) href属性:跳转目标对应的地址
a.其他的网页地址--------跳转
b.写本地的一个html路径------跳转
c.空--------刷新当前网页(重新加载)
d.选择器--------让网页跳转到指定的位置
(2)target属性:设置跳转方式
_self(默认值):在当前页面中刷新出新的内容
_blank:在新的页面去刷新
注意:刷新当前网页和在当前网页中跳转到指定位置时,只能使用默认_self
-->
<a target="_blank" href="http://www.baidu.com">百度一下</a>
<a href="01-文本标签.html">文本标签</a>
<a href="">刷新</a>
<a href="#1">第一张</a>
四.表格
#表格标签:
table标签,tr标签,td标签,th标签
1.标签
table标签:表格整体(一个table标签代表一个表格)
tr标签:行(一个tr标签代表表格中的一行)
td标签:单元格(一个td代表一个单元格)
th标签:表头
2.属性
a.border属性 设置表格的边框的宽度(只能作为table属性)
b.bordercolor:设置边框的颜色(只能作用于table)
c.background:设置背景图片
d.bgcolor:设置背景颜色(可以作用于table\tr\td)
e.cellspacing:设置单元格之间的间隙(默认是1)
f.cellpadding:设置内容和单元格之间的间距
g.width:一般作用于某一个单元格,影响的是这个单元格对应的那一列
h.height:一般作用于行,
i.align:设置对齐方式(可以作用于table\tr\td)
作用于table,让整个表格在浏览器中居中
作用于tr/td,让内容在单元格中居中
<table border="10" align="center" bordercolor="purple" bgcolor="aquamarine" cellspacing="1" cellpadding="22">
<!--<tr><th>成绩表</th></tr>-->
<!--第一行-->
<tr height="140">
<!--第一行第一个单元格-->
<td bgcolor="aqua" width="100">姓名</td>
<td>成绩</td>
<td>是否留级</td>
</tr>
<!--第二行-->
<tr>
<td>张三</td>
<!--第二行第二个单元格-->
<td>90</td>
<td>否</td>
</tr>
<!--第三行-->
<tr>
<td>王二</td>
<td>80</td>
<!--第三行第三个单元格-->
<td>否</td>
</tr>
</table>
</body>
</html>
<table border="5" cellspacing="" cellpadding="">
<tr><th>xxx信息表</th></tr>
<tr height="80">
<td width="120" align="center">姓名</td>
<td width="250" align="center">毕业院校</td>
</tr>
<tr height="100">
<td></td>
<td></td>
</tr>
<tr height="100">
<td></td>
<td></td>
</tr>
<tr height="100">
<td></td>
<td></td>
</tr>
<tr height="100">
<td></td>
<td></td>
</tr>
</table>
五.细线表格
<p>xxx信息表</p>
<table cellspacing="1" bgcolor="black">
<tr bgcolor="white" height="80" align="center">
<td width="120">姓名</td>
<td width="250">毕业院校</td>
</tr>
<tr bgcolor="white" height="100">
<td>于梦娇</td>
<td>
<img src="img/a.jpg"/>
<a href="http://www.tjcu.edu.cn/">天津商业大学</a></td>
</tr>
<tr bgcolor="white" height="100">
<td></td>
<td></td>
</tr>
<tr bgcolor="white" height="100">
<td></td>
<td></td>
</tr>
<tr bgcolor="white" height="100">
<td></td>
<td></td>
</tr>
</table>
六.不规则表格
<table bgcolor="black" cellspacing="1" width="600" height="500">
<tr bgcolor="white">
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
homework
