目录
Day01:HTML
1、HTML标准结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
1、
<!DOCTYPE html>
告诉浏览器使用什么样的html
或者xhtml
来解析html
文档2、
<html></html>
是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个HTML
文档,在它们之间是文档的头部<head>
和主体<body>
。3、
<head></head>
元素出现在文档的开头部分。<head>与</head>
之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。4、
<title></title>
定义网页标题,在浏览器标题栏显示。5、
<body></body>
之间的文本是可见的网页主体内容6、
<meta charset="UTF-8">
声明编码方式用utf8
2、标签的语法
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
1、HTML标签是由尖括号包围的特定关键词
2、标签分为闭合和自闭合两种标签
3、HTML不区分大小写
4、标签可以有若干个属性,也可以不带属性,比如<head>就不带任何属性
5、标签可以嵌套,但是不可以交叉嵌套
3、基本标签
-
标题标签
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
....
<h6>标题3</h6>
ps: 最多到h6
-
段落标签
<p>大家好,我是段落1。</p>
<p>大家好,我是段落2。</p>
-
换行标签
<p>大家好,我是段落标签p。我按了enter一下
换行了</p>
<p>大家好,我是段落标签p。我按了enter一下<br/> 换行了</p>
-
文本格式化标签
HTML提供了一系列的用于格式化文本的标签,可以让我们输出不同外观的元素,比如粗体和斜体字。如果需要在网页中,需要让某些文本内容展示的效果丰富点,可以使用以下的标签来进行格式化。
<b>定义粗体文本</b><br />
<strong>定义粗体文本方式2</strong><br />
<em>定义斜体字</em><br />
<i>定义斜体字方式2</i><br />
<del>定义删除文本</del><br />
-
特殊符号
® ©
标签大致可分为两类
块级标签(block) -- 独占一行
内联标签(inline) -- 按文本内容占位
-
div和span标签
<div>只是一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现
块级元素与行内元素的区别所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。
4、超链接标签
4.1 超链接基本使用
属性 | 值 | 描述 |
---|---|---|
href | 网络链接 [ 例如: 百度一下,你就知道 ] 本地链接 [ 例如:F:\html\index.html ] | 规定链接的跳转目标 |
title | 百度 | 链接的提示信息 |
target | _blank [ 在新建窗口中打开网页 ] _self [ 默认值,覆盖自身窗口打开网页 ] _parent [ 在父级框架中打开网页 ] _top [ 在顶级框架中打开网页 ] framename [ 在指定的框架中打开网页] | 与前面四项固定值不同,framename是泛指,并不是这个值,这点将在后面框架部分内容中详细介绍,这里可以暂时先略过 |
1、href是超链接最重要的属性,规定了用户点击链接以后的跳转目标,这个目标可以是 网络连接,也可以是本地连接。
2、网络链接指的是依靠网络来进行关联的地址,一般在地址前面是以 http://或者https://这样开头的,如果没有网络,则用户点击了超链接也无法访问对应的目标。
3、本地链接指的是本地计算机的地址,一般在地址前面是以 file:///开头或直接以 C:/、D:/、E:/开头的,不需要经过网络。
4、如果href的值留空,则默认是跳转到当前页面,也就是刷新当前页面。
4.2 锚点
锚点( anchor )是超链接的一种应用,也叫命名锚记,锚点可以像一个定位器一样,可以实现页面内的链接跳转,运用相当普遍。例如,我们有一个网页,由于内容太多,导致页面很长,而且里面的内容,可以分为N个部分。这样的话,我们就可以在网页的顶部设置一些锚点,这样便可以方便浏览者点击相应的锚点,到达本页内相应的位置,而不必在一个很长的网页里自行寻找。又例如,我们页面中,有个链接需要跳转到另一个页面的中间或者底部去,这时候也可以运用上锚点技术来解决这个问题。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>锚点的使用</title>
</head>
<body>
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<div id="i1">
<p>第一章内容</p>
</div>
<div id="i2">
<p>第二章内容</p>
</div>
<div id="i3">
<p> 第三章内容</p>
</div>
</body>
</html>
5、img标签
在HTML中,图像由<img>标签定义的,它可以用来加载图片到html网页中显示。网页开发过程中,有三种图片格式被广泛应用到web里,分别是 jpg、png、gif。
img标签的属性:
/*
src属性:
指定图像的URL地址,是英文source的简写,表示引入资源。
src的值可以是本地计算机存储的图片的地址,也可以是网络上外部网站的图片的地址。
如果src的值不正确,那么浏览器就无法正确的图片,而是显示一张裂图。
alt属性:指定图像无法显示时的替换文本。
width属性: 指定引入图片的显示宽度。
height属性:指定引入图片的显示高度。
border属性:指定引入图片的边框宽度,默认为0。
title属性:悬浮图片上的提示文字
*/
点击图片跳转可以配合a标签使用
<a><img src="" alt=""></a>
6、列表标签
无序列表
<ul type="square">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
有序列表
<ol start="100">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
7、表格标签
7.1 table结构
在HTML中使用table来定义表格。网页的表格和办公软件里面的xls一样,都是有行有列的。HTML使用tr标签定义行,使用td标签定义列。
语法:
<table border="1">
<tr>
<td>单元格的内容</td>
……
</tr>
……
</table>
1、
<table>
和</table>
表示一个表格的开始和结束。一组<table>...</table>
表示一个表格。2、border用于设置整个表格的边框宽度,默认为0,表示不显示边框。
3、
<tr>
和</tr>
表示表格中的一行的开始和结束。一组<tr>...</tr>
,一个表格可以有多行。通过计算table标签中包含多少对tr子标签即可知道一个表格有多少行。4、
<td>
和</td>
表示表格中的一个单元格的开始和结束。通过计算一个tr里面包含了多少对td自标签即可知道一个表格有多少列,多少的单元格了。
7.2 table属性
属性 | 值 | 描述 |
---|---|---|
width | px、% | 规定表格的宽度。 |
height | px、% | 规定表格的高度。 |
align | left、center、right | 规定表格相对周围元素的对齐方式。 |
bgcolor | rgb(x,x,x)、#xxxxxx、colorname | 规定表格的背景颜色。 |
background | url | 规定表格的背景图片。 |
border | px | 规定表格边框的宽度。 |
cellpadding | px、% | 规定单元格边框与其内容之间的空白。 |
cellspacing | px、% | 规定单元格之间的空隙。 |
7.3 td属性
表格中除了行元素以外,还有单元格,单元格的属性和行的属性类似。td和th都是单元格。
属性 | 值 | 描述 |
---|---|---|
height | px、% | 规定单元格的高度。 |
width | px、% | 规定单元格的宽度。 |
align | left、center、right | 规定单元格内容的对齐方式。 |
valign | top、middle、bottom | 规定单元格内容的垂直对齐方式。 |
bgcolor | rgb(x,x,x)、#xxxxxx、colorname | 规定单元格的背景颜色。 |
background | url | 规定单元格的背景图片。 |
rowspan | number | 规定单元格合并的行数 |
colspan | number | 规定单元格合并的列数 |
8、表单标签
表单主要是用来收集客户端提供的相关信息,提供了用户数据录入的方式,有多选、单选、单行文本、下拉列表等输入框,便于网站管理员收集用户的数据,是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁.
表单被form标签包含,内部使用不同的表单元素来呈现不同的方式来供用户输入或选择。当用户输入好数据后,就可以把表单数据提交到服务器端。
一个表单元素有三个基本组成部分:
-
表单标签,包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息。
-
表单域,包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件。
-
表单按钮,包括提交按钮、复位按钮和一般按钮,用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
在HTML中创建表单用form标签。每个表单都可以包含一到多个表单域或按钮。form标签属性:
属性 | 值 | 描述 |
---|---|---|
action | 访问服务器地址 | 服务器端表单处理程序的URL地址 |
method | post、get[默认值] | 表单数据的提交方法 |
target | 参考超链接的target属性 | 表单数据提交时URL的打开方式 |
enctype | application/x-www-form-urlencoded[默认值] multipart/form-data [用于文件上传] text/plain [用于纯文本数据发送] | 表单提交数据时的编码方式 |
<h3>用户注册</h3>
<form action="http://127.0.0.1:8800" method="get">
<p><label for="user">姓名</label>: <input type="text" name="user" id="user"></p>
<p>密码: <input type="password" name="pwd"></p>
<p>爱好:
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="shuangseqiu" checked>双色球
</p>
<p>性别:
<input type="radio" name="gender" value="men">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="qita">其他
</p>
<p>生日:<input type="date" name="birth"></p>
<p>籍贯:
<select name="province" id="" multiple size="2">
<option value="">广东省</option>
<option value="" selected>山东省</option>
<option value="">河北省</option>
</select>
</p>
<p>
<textarea name="" id="" cols="30" rows="10" placeholder="个人简介"></textarea>
</p>
<div>
<p><input type="reset" value="重置"></p>
<p><input type="button" value="普通按钮"></p>
<p><button>普通按钮</button></p>
<p><input type="submit" value="提交"></p>
</div>
</form>