一.标签简介(编写软件为webstorm):
单标签:
--只有一个开始标签没有结束标签,也就是由一个<../>组成的
双标签:
--有开始标签和结束标签,也就是由一个<p>和</p>组成
标签分类:
1.并列关系(兄弟、平级)
如:<head><body>
2.嵌套标签(父子、上下级)
如:<html><head>
例子:
<html>
<head>
<title>淘宝网</title>
</head>
<body>
</body>
</html>
二.H标签
H标题标签:
1.H1-H6只表示给内容赋标题,不用来修改样式;
2.开发中慎重H1标签,一个文本中只能有一个H1标签;
3.H标签单独占用一行;
快捷键
trl+alt+insert 新建HTML
home 光标移动到行首
end 光标移动到行尾
Alt+鼠标左键同时选中 拖动多行
Ctrl+/ 注释(<!----注释----->)
三.P标签:
告诉浏览器哪些文字是一个段落。
注意:
1.单独占一行;
四.Hr标签:
显示一条分割线
单标签<hr/> 单独占一行
注意:<hr>按照HTML规范来编写,<hr/>按照XHTML规范来编写,因为HTML5兼容XHTML,以后按照高级开发工具来自动生成。
如何在webstorm中快速的复制光标所在的那一行 Ctrl+D
如何在webstorm中快速的删除光标所在的那一行 Ctrl+X
<br/>换行
五.img标签
img标签的作用是我们需要显示一张图片<img src="image/yang1.jpg">src是图片名称
src 相对路径赋值(每次从html所在的文件夹开始查找)
同级<img src="yang1.jpg">
下级 .html文件和所存储的图片在同一个文件夹中<img src="image/yang1.jpg">
上级 存储图片的位置和存储代码的文件夹在同一个文件夹中<img src="../yang1.jpg">
..代表从当前位置的上一级文件夹中找到yang1.jpg图片
绝对路径 每次从盘符开始查找 F:\html学习\代码\image\yang1.jpg
注意:
以后引发问题开发中如果需要编写路径,统一使用反斜杠/,不要使用正斜杠\
因为我们以后开发的程序是要部署到其他操作系统的服务器上的,而在其他操作系统中路径都是/,所以你写的不是/,可能会引发问题。
绝对路径的可移植性比较差,所以使用相对路径比较多一点。
六.a标签
1.特性
作用:就是用于控制页面与页面之间的跳转。
格式:<a href="指定跳转的目标页面">需要展现给用户查看的内容</a>
注意:
1. a标签不仅可以使文字跳转 还可以用图片跳转
<a href="指定跳转的目标页面"><img src="image/yang1.jpg"></a>
2. 一个a标签只能有一个href属性
3.URL地址必须有http://
2.属性
target属性:用于专门控制如何跳转
-self:用于当前选项卡跳转
-blank:新增选项卡跳转
title属性:用于悬停鼠标的提示信息
注意点;
1.若想把所以链接都在新的窗口打开:在<head>标签中写<base target="_blank">
2.如果既在base中指定了target又在a标签中指定了target,那么浏览器会按照a标签中指定了target来实现。
3.假链接
形式:点击之后不会跳转
用途:企业开发前期页面还没写出来,不知道该跳转到哪里,先用假链接,最后页面都实现完成在替换为真标签。
格式:
1.# 会自动回到页面顶部
2.JavaScript 不会自动回到顶部
4.锚点(页内跳转)
1.要想通过a标签跳转到页内指定的位置那么必须告诉a标签一个独一无二的身份证号码
,这样a标签才能在当前界面中找到需要跳转到的目标位置。
2.在每一个HTML中都有一属性id,你可以给目标位置标签添加一个独一无二的身份证号码。<h2 id="head"></h2>
<a href="#head"></a>
注意:
1.通过a标签跳转是没有过度动画的
如:<a href="3.html#head">
七.列表标签
1.什么是列表标签?
2.HTML中列表分类
2.1无序列表(unordered list)使用最多
2.1.1作用:
2.1.2无序列表格式:
2.1.3使用场景:
2.1.4 ul属性
2.1.5无序列表的嵌套
<h1>物品清单</h1> <ul> <li> <h2>水果</h2> <ul> <li>苹果</li> <li>西瓜</li> <li>橘子</li> </ul> </li> <li> <h2>蔬菜</h2> <ul> <li>土豆</li> <li>茄子</li> <li>黄瓜</li> </ul> </li> </ul>
<ul> <li> <h2></h2> <ul> <li></li> <li></li> <li></li> </ul> </li> <li> <h2></h2> <ul> <li></li> <li></li> <li></li> </ul> </li> </ul>
2.2有序列表(ordered list)使用最少
2.2.1有序列表的定义
2.2.2有序列表的用法
<ol type="1"> <li> 广东</li> <li> 上海</li> <li> 山西</li> </ol>注意:其他使用同无序列表一样
2.3定义列表(definition list)其次
2.3.1定义列表的作用:
2.3.2定义列表的格式:
其中dt和dd都是英文的缩写<dl> <dt>北京</dt> <dd>北京市我国的首都</dd> <dt>上海</dt> <dd>国际金融中心</dd> <dt>西安</dt> <dd>历史文化古都</dd> </dl>
2.3.3定义列表的用途
<dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl>
八.表格标签
8.1表格标签的作用
8.2表格标签格式
<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>注意:
8.3表格标签的属性
8.3.1宽度和高度属性
8.3.2水平对齐和垂直对齐属性
8.3.3外边距和内边距属性
8.4细线表格
table bgcolor="black"cellspacing="1px" width="400" height="200" > <tr bgcolor="white"> <td>jsfkl</td> <td>sfsaf</td> </tr> <tr bgcolor="white"> <td>sffdfg</td> <td>seaf</td> </tr> </table>table专门提供了一个标题标签caption:
<table bgcolor="black" cellspacing="1px" width="600"> <caption><h2>今日小说排行榜</h2></caption> <tr bgcolor="#faebd7"> <th>排名</th> <th>关键词</th> <th>趋势</th> <th>今日热搜</th> <th>最近七日</th> <th>相关链接</th> </tr> <tr bgcolor="white" align="center"> <td>1</td> <td align="left">凤囚凰</td> <td>up</td> <td>75422</td> <td>83465767</td> <td><a href="http://baidu.com">容止</a></td> </tr> <tr bgcolor="white" align="center"> <td>2</td> <td align="left">微微一笑很倾城</td> <td>up</td> <td>62342</td> <td>64114345</td> <td><a href="http://baidu.com">贝微微</a></td> </tr> <tr bgcolor="white" align="center"> <td>3</td> <td align="left">三生三世十里桃花</td> <td>down</td> <td>53221</td> <td>43567534</td> <td><a href="http://baidu.com">白浅</a></td> </tr> </table>
8.5表格分类
8.5.1表格分类
8.5.2表格的完整结构
8.6单元格合并
8.6.1水平方向上的单元格合并
8.6.2垂直方向上的单元格合并
<table bgcolor="black" width="500" height="300" align="center"> <tr bgcolor="white"> <td></td> <td></td> <td></td> </tr> <tr bgcolor="white"> <td></td> <td colspan="2" rowspan="2"></td> </tr> <tr bgcolor="white"> <td></td> </tr> <tr bgcolor="white"> <td></td> <td></td> <td></td> </tr> </table>
九.表单标签
9.1表单标签基本概念
1.什么是表单?
2.什么是表单元素?
9.2表单的格式?
<form> <表单元素> </form>
9.3.常见的表单标签
9.3.1 input标签
input标签有一个type属性,这个属性有很多类型的取值,取值的不同就决定了input标签的功能和外观。
value:设置默认值
text: 文本
password:密码,不可见
radio:默认情况下不互斥,要想互斥需要设置name属性,且name属性值相同。checked为默认值
注意:要是多个checked属性,以最后一个checked为准。
button:按钮 value设置按钮名字
image:图片按钮 src:写上图片地址
reset:重置按钮 value设置按钮名字
submit:提交按钮 action属性:提交的服务器地址 name属性:给服务器一个独立ip地址
hiden:配合提交按钮将一些数据默认地悄悄地传给服务器
<form> <!--value设置默认值--> 账号:<input type="text" value="小红"><br> 密码:<input type="password" value="123"><br> 性别: <input type="radio" name="sex" checked>男 <input type="radio" name="sex">女 <br> 爱好: <input type="checkbox" checked>篮球 <input type="checkbox">足球 <input type="checkbox">乒乓球
<br> <input type="button" value="提交"> <!--图片按钮--> <!--<input type="image" src="image/register.jpg" alt="123">--> <input type="reset" value="清空"><input type="hidden" name="cc" value="111"></form>
9.3.2 label标签
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
例如:
<form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" />
9.3.3 textarea 标签
<textarea> 标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性;name属性是为了让浏览器知道你提交的文本名字。
注释:在文本输入区内的文本行间,用 "%OD%OA" (回车/换行)进行分隔。
提示:可以通过 <textarea> 标签的 wrap 属性设置文本输入区内的换行模式。例子:
<textarea rows="3" cols="20"> 在w3school,你可以找到你所需要的所有的网站建设教程。 </textarea>
9.3.4 select 标签
select 元素可创建单选或多选菜单。
<select&> 元素中的 <option> 标签用于定义列表中的可用选项。
属性为:multiple可为多选
<form > <select name="dizhi" > <option value="sichuan">四川</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="henan">河南</option> </select> </form>
十.框架
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。
注意:使用框架的坏处:
- 开发人员必须同时跟踪更多的HTML文档
- 很难打印整张页面
10.1框架结构标签(<frameset>)
-
- 框架结构标签(<frameset>)定义如何将窗口分割为框架
- 每个 frameset 定义了一系列行或列
- rows/columns 的值规定了每行或每列占据屏幕的面积
编者注:frameset 标签也被某些文章和书籍译为框架集。
10.2框架标签(Frame)
Frame 标签定义了放置在每个框架中的 HTML 文档。
在下面的这个例子中,我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中,而 HTML 文档 "frame_b.htm" 被置于第二个列中:
<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>