一 HTML相关介绍:
1.1什么是HTML?
超文本标记语言
超文本:比普通文本功能更加强大;
标记语言:使用一组标签对内容进行描述的语言,他不是编程语言.
1.2为什么学习HTML?
HTML用于网页编写,我们平时上网通过浏览器看到的大多网页都是通过HTML编写的.
1.3HTML如何使用?
语法和规范:
①所有的html文件后缀都是以.html或者.htm结尾,建议使用.html结尾;
②整个html文件分别由头部分<head></head>和体<body></body>组成;
③html标签都是由开始标签和结束标签组成的(特例除外<br />);
④html标签忽略大小写,建议使用小写.
二 HTML相关标签学习:
2.1标题标签:
标题标签使用<hn></hn>,n从1到6逐渐变小,超过6的按6的进行显示.
特点:加粗加黑显示,单独占用一行,与其他行有一定间距.
代码片段:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<h1>公司介绍</h1><br />
<h2>公司介绍</h2><br />
<h3>公司介绍</h3><br />
<h4>公司介绍</h4><br />
<h5>公司介绍</h5><br />
<h6>公司介绍</h6><br />
<h100>公司介绍</h100>
</body>
</html>效果图:
2.2水平线标签:
水平线标签<hr/> size属性:水平线的高度,单位:像素.
noshade属性:没有阴影,取值noshade,表示显示纯色
<hr size="2" noshade="noshade"/>2.3段落标签:
<p></p>
<p>我是一段落文字</p>
<p>我是另一段落文字</p>2.4字体标签:
字体标签<font></font>,必须结合其属性才具有一定的样式效果
设置颜色color:可以是英文单词,也可以是十六进制
设置字体face:那些字体必须是你本机已有的
设置大小的size:从1到7逐渐变大,超过7的部分按照7来显示
代码片段:
<font size="6" color="red"></font>
<font size="6" color="#FF0000"></font>
<font size="6" color="#FF0000" face="微软雅黑"></font>2.5对字体加粗:
<b></b>
2.6斜体:
<i></i>
三 图片标签:
3.1图片标签 <img/>
图片位置属性:src
绝对路径:带有盘符的
相对路径:
①如果是同级,直接写文件名称或者 ./文件名称
②如果是上一级, ../文件名称,如果是多层,那么多写几个 ../
③如果是下一级,写目录名称/文件名称
属性:width 设置图片宽度 单位:px
height 设置图片高度 单位:px
alt 当图片无法正常显示出来的时候给出的提示
四 列表标签:
4.1无序列表
type : circle 空心小圆点 disc 实心小圆点 square 实心方块
<body>
<ul type="circle">
<li>CSDN</li>
<li>GOOGLE</li>
<li>GITHUB</li>
</ul>
</body>4.2有序列表
<body>
<ol>
<li>CSDN</li>
<li>baidu</li>
<li>Google</li>
</ol>
</body>代码片段:
<body>
<ol reversed="reversed" type="A">
<li>CSDN</li>
<li>baidu</li>
<li>Google</li>
</ol>
/body>效果图:
五 超链接标签:
代码片段:
<body>
<a href="02_有序列表.html" target="_blank">点我跳转</a>
</body>效果图:
六 表格标签:
6.1表格标签
<tr></tr> <td></td>
代码片段:
<body>
<table>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
</tr>
</table>
</body>效果图:
给table中加属性:
<table border="1px">效果图:
6.2其他属性
代码片段:
<body>
<table border="1px" cellspacing="0px" cellpadding="0px" bgcolor="red" align="center"
width="450px" height="150px">
<tr bgcolor="gold" height="100px">
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
</tr>
</table>
</body>效果图:
6.3表格的跨行跨列
<body>
<table border="1px" cellspacing="0px" cellpadding="0px" bgcolor="red" align="center"
width="450px" height="200px">
<tr>
<td colspan="2" align="center">11</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td colspan="2" rowspan="2" align="center">22</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td rowspan="2" align="center">34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
</table>
</body>效果图:
6.4在列表中嵌套
<body>
<table border="1px" cellspacing="0px" cellpadding="0px" bgcolor="red" align="center"
width="450px" height="200px">
<tr>
<td colspan="2" align="center">11</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td colspan="2" rowspan="2" align="center">
<table border="1px" width="100%" height="100%" cellspacing="0px" align="center">
<tr>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td>22</td>
<td>22</td>
<td>22</td>
</tr>
<tr>
<td>33</td>
<td>33</td>
<td>33</td>
</tr>
</table>
</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td rowspan="2" align="center">34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
</table>
</body>效果图:
空格在HTML中 : 代表一个空格
七框架及标签:
frameset 使用注意 不能用body标签
八form表单标签:
8.1表单标签
所有需要提交到服务器端的表单项都必须使用<form></form>括起来
form表单的属性:
action:整个表单提交的位置(可以是一个页面，也可以是一个后台java代码)
method:表单提交的方式(get/post/delete……等7种)
8.2文本输入项
<input type=”text” name=”” size=”” maxlenght=”” readonly=””
placehoder=””/>8.3密码输入项
<input type=”password” name=”” />8.4单选按钮
<input type=”radio” name=”” value=”” checked=””/>8.5多选按钮
<input type=”checkbox” name=”” value=”” checked=”” />8.6下拉列表
<select name=””>
<option value=”” selected=””>北京</option>
<option>上海</option>
</select>8.7文件上传项
<input type=”file” name=””/>8.8文本输入域
<textarea name=””></textarea>8.9提交按钮
<input type=”submit” value=””/>8.10普通按钮
<input type=”button” value=””/>8.11重置按钮
<input type=”reset” value=””/>8.12隐藏项
<input type=”hidden” name=””/>代码片段:
<body>
<form action="#" method="get">
隐藏字段:<input type="hidden" name="id" value="" /><br />
用户名：<input type="text" name="username" readonly="readonly" value="zhangsan" size="40px" maxlength="5" placeholder="请输入用户名"/><br />
密码：<input type="password" name="password" required="required"/><br />
确认密码：<input type="password" name="repassword"/><br />
性别：<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女" checked="checked"/>女<br />
爱好：<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼
<input type="checkbox" name="hobby" value="打电动"/>打电动
<input type="checkbox" name="hobby" value="写代码" checked="checked"/>写代码<br />
头像：<input type="file" name="file"/><br />
籍贯：<select name="province">
<option>--请选择--</option>
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option>
<option value="广州">广州</option>
</select><br />
自我介绍：
<textarea name="zwjs">
</textarea><br />
提交按钮：<input type="submit" value="注册"/><br />
普通按钮：<input type="button" value="zhuce"/><br />
重置按钮：<input type="reset" />
</form>
</body>效果图:
5735
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
