网页是由网页元素组成的 , 这些元素是利用html标签描述出来,然后通过浏览器解析,就可以显示给用户了。
所谓超文本:
<img src="timg.jpg" />
html 总结:
<html>
<head>
<title>title>
head>
<body>
body>
html>
标签名 | 定义 | 说明 |
---|---|---|
HTML标签 | 页面中最大的标签,我们成为 根标签 | |
文档的头部 | 注意在head标签中我们必须要设置的标签是title | |
文档的标题 | 让页面拥有一个属于自己的网页标题 | |
文档的主体 | 元素包含文档的所有内容,页面内容 基本都是放到body里面的 |
HTML标签名、类名、标签属性和大部分属性值统一用小写
推荐:
我的第一个页面
不推荐:
我的第一个页面
标签:
在HTML页面中,带有“< >”符号的元素被称为HTML标签,如上面提到的 、
、都是HTML骨架结构标签。分类:
<标签名> 内容 标签名> 比如 <body> 我是文字 body>
<标签名 /> 比如 <br />
主要针对于双标签 的相互关系分为两种: 请大家务必熟悉记住这种标签关系,因为后面我们标签嵌套特别多,很容易弄混他们的关系。
<head>
<title> title>
head>
2.并列关系
<head>head>
<body>body>
用法:
DOCTYPE html>
作用:
声明位于文档中的最前面的位置,处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。<html lang="en"> 指定html 语言种类
最常见的2个:
en
定义语言为英语zh-CN
定义语言为中文简单来说,可能对于程序来说没有太大的作用,但是它可以告诉浏览器,搜索引擎,一些处理Html的程序对页面语言内容来做一些对应的处理或者事情。
比如可以
<meta charset="UTF-8" />
字符集(Character set)是多个字符的集合。
计算机要准确的处理各种字符集文字,需要进行字符编码,以便计算机能够识别和存储各种文字。
utf-8是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312。
一般情况下统一使用 "UTF-8" 编码, 请尽量统一写成标准的 "UTF-8",不要写成 "utf-8" 或 "utf8" 或 "UTF8"。
语义是否良好: 当我们去掉CSS之后,网页结构依然组织有序,并且有良好的可读性。
第01阶段.前端基础.HTML常用标签
首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写HTML标签,认识标签就可以了。 不会再给结构标签指定样式了。
HTML标签有很多,这里我们学习最为常用的,后面有些较少用的,我们可以查下手册就可以了。
排版标签主要和css搭配使用,显示网页结构的标签,是网页布局最常用的标签。
单词缩写: head 头部. 标题 title 文档标题
为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标题,即
标题标签语义: 作为标题使用,并且依据重要性递减
其基本语法格式如下:
<h1> 标题文本 h1>
<h2> 标题文本 h2>
<h3> 标题文本 h3>
<h4> 标题文本 h4>
<h5> 标题文本 h5>
<h6> 标题文本 h6>
小结 :
传智播客学前端,
前端入门亦简单。
简单知识简单看,
重点勤练写三遍。
标题一共六级选,
具体效果刷新见。
------pink老师
单词缩写: paragraph 段落 [ˈpærəgræf] 无须记这个单词
作用语义:
可以把 HTML 文档分割为若干段落
在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是
<p> 文本内容 p>
是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。
单词缩写: horizontal 横线 [ˌhɔrəˈzɑntl] 同上
在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单地通过标签来完成,
<hr />是单标签
单词缩写: break 打断 ,换行
在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签
<br />
这时如果还像在word中直接敲回车键换行就不起作用了。
此处有练习题
div span 是没有语义的 是我们网页布局主要的2个盒子 想必你听过 css+div
div 就是 division 的缩写 分割, 分区的意思 其实有很多div 来组合网页。
span 跨度,跨距;范围
语法格式:
<div> 这是头部 div> <span>今日价格span>
他们两个都是盒子,用来装我们网页元素的, 只不过他们有区别,现在我们主要记住使用方法和特点就好了
后面后面讲显示模式的时候,会告诉大家
标签名 | 定义 | 说明 |
---|---|---|
标题标签 | 作为标题使用,并且依据重要性递减 | |
段落标签 | 可以把 HTML 文档分割为若干段落 | |
|
水平线标签 | 没啥可说的,就是一条线 |
换行标签 | ||
div标签 | 用来布局的,但是现在一行只能放一个div | |
span标签 | 用来布局的,一行上可以放好多个span |
在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。
标签 | 显示效果 |
---|---|
和 | 文字粗体 |
和 | 文字斜体 |
文字加删除线 | |
和 | 文字加下划线 |
区别:
b 只是加粗 strong 除了可以加粗还有 强调的意思, 语义更强烈。
所谓属性就是外在特性
使用HTML制作网页时,如果想让HTML标签提供更多的信息,可以使用HTML标签的属性加以设置。其基本语法格式如下:
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 标签名>
<手机 颜色="红色" 大小="5寸"> 手机>
单词缩写: image 图像
要想在网页中显示图像就需要使用图像标签,接下来将详细介绍图像标签以及和他相关的属性。(它是一个单身狗)
语法如下:
<img src="图像URL" />
**注意: **
比如:
正常的<br />
<img src="cz.jpg" width="300" height="300" /><br />
带有边框的<br />
<img src="cz.jpg" width="300" height="300" border="3" /><br />
有提示文本的<br />
<img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" /><br />
有替换文本的<br />
<img src="cz.jpg" width="300" height="300" border="3" alt="图片不存在" />
单词缩写: anchor 的缩写 [ˈæŋkə®] 。基本解释 锚, 铁锚 的
在HTML中创建超链接非常简单,只需用标签把文字包括起来就好。
语法格式:
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像a>
属性 | 作用 |
---|---|
href | 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能 |
target | 用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,__blank为在新窗口中打开方式。 |
注意:
在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。
简单解释:
注释内容不会显示在浏览器窗口中,但是作为HTML文档内容的一部分,也会被下载到用户的计算机上,查看源代码时就可以看到。
语法格式:
快捷键是: ctrl + / 或者 ctrl +shift + /
以引用文件之网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对路径。
路径分类 | 符号 | 说明 |
---|---|---|
同一级路径 | 只需输入图像文件的名称即可,如。 | |
下一级路径 | “/” | 图像文件位于HTML文件同级文件夹下(例如文件夹名称为:images) 如。 |
上一级路径 | “…/” | 在文件名之前加入“…/” ,如果是上两级,则需要使用 “…/ …/”,以此类推, 如。 |
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的。
“D:\web\img\logo.gif”,或完整的网络地址,例如“http://www.itcast.cn/images/logo.gif”。
注意:
绝对路径用的较少,我们理解下就可以了。 但是要注意,它的写法 特别是符号 \ 并不是 相对路径的 /
通过创建锚点链接,用户能够快速定位到目标内容。
创建锚点链接分为两步:
1. 使用相应的id名标注跳转目标的位置。 (找目标)
<h3 id="two">第2集h3>
2. 使用<a href="#id名">链接文本a>创建链接文本(被点击的) (拉关系) 我也有一个姓毕的姥爷..
<a href="#two">
语法:
<base target="_blank" />
**总结: **
标签可定义预格式化的文本。 被包围在标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 ```html此例演示如何使用 pre 标签 对空行和 空格 进行控制
### 3.4 特殊字符
一些特殊的符号,我们再html 里面很难或者 不方便直接 使用, 我们此时可以使用下面的替代代码。
**虽然有很多,但是我们平时用的比较较少, 大家重点记住 空格 大于号 小于号 就可以了,剩下的回来查阅。**
**总结:**
1. 是以**运算符**`&`开头,以**分号运算符**`;`结尾。
2. 他们不是标签,而是符号。
3. HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符,浏览器会将它们作为标签解析,若要正确显示,在 HTML 源代码中使用字符实体
# 3.表格table
**表格作用:**
存在即是合理的。 表格的现在还是较为常用的一种标签,但不是用来布局,**常见显示、展示表格式数据。**
因为它可以让数据显示的非常的规整,可读性非常好。
**特别是后台展示数据的时候表格运用是否熟练就显得很重要**,一个清爽简约的表格能够把繁杂的数据表现得很有条理,虽然 div 布局也可以做到,但是总没有表格来得方便。
## 1. 创建表格
在HTML网页中,要想创建表格,就需要使用表格相关的标签。
**创建表格的基本语法:**
```html
单元格内的文字
...
...
要深刻体会表格、行、单元格他们的构成。
在上面的语法中包含基本的三对HTML标签,分别为 table、tr、td,他们是创建表格的基本标签,缺一不可,下面对他们进行具体地解释
**总结: **
表格的主要目的是用来显示特殊数据的
一个完整的表格有表格标签(table),行标签(tr),单元格标签(td)组成,没有列的标签
表格有部分属性我们不常用,这里重点记住 cellspacing 、 cellpadding。
属性名 | 含义 | 常用属性值 |
---|---|---|
border | 设置表格边框 | 像素值 |
cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值 |
border | 设置 单元格内容与单元格边框之间的空白间距 | 像素值 |
width | 设置表格的宽度 | 像素值 |
height | 设置表格的高度 | 像素值 |
align | 设置表格再网页中的水平对齐方式 | left,center,right |
有个说法,是三参为0, 平时开发的我们这三个参数 border cellpadding cellspacing 为 0
<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
<tr> <th>姓名th> <th>性别th> <th>年龄th> tr>
<tr> <td>刘德华td> <td>男td> <td>55td> tr>
<tr> <td>郭富城td> <td>男td> <td>52td> tr>
<tr> <td>张学友td> <td>男td> <td>58td> tr>
<tr> <td>黎明td> <td>男td> <td>18td> tr>
<tr> <td>刘晓庆td> <td>女td> <td>63td> tr>
table>
<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
<tr>
<th>姓名th>
<th>性别th>
<th>电话th>
tr>
<tr>
<td>小王td>
<td>女td>
<td>110td>
tr>
<tr>
<td>小明td>
<td>男td>
<td>120td>
tr>
table>
定义和用法
<table>
<caption>我是表格标题caption>
table>
**注意: **
**合并的顺序我们按照 先上 后下 先左 后右 的顺序 **
标签名 | 定义 | 说明 | |
---|---|---|---|
|
表格标签 | 就是一个四方的盒子 | |
表格行标签 | 行标签要再table标签内部才有意义 | ||
单元格标签 | 单元格标签是个容器级元素,可以放任何东西 | ||
表头单元格标签 | 它还是一个单元格,但是里面的文字会居中且加粗 | ||
表格标题标签 | 表格的标题,跟着表格一起走,和表格居中对齐 | ||
clospan 和 rowspan | 合并属性 | 用来合并单元格的 |
对于比较复杂的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注, 这样更好的分清表格结构
注意:
概念:
容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表
特点:
列表最大的特点就是 整齐 、整洁、 有序,跟表格类似,但是他可组合自由度会更高。
无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:
<ul>
<li>列表项1li>
<li>列表项2li>
<li>列表项3li>
......
ul>
1.
中只能嵌套,直接在
标签中输入其他标签或者文字的做法是不被允许的。
2. 与 之间相当于一个容器,可以容纳所有元素。
3. 无序列表会带有自己样式属性,放下那个样式,一会让CSS来!
有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:
<ol>
<li>列表项1li>
<li>列表项2li>
<li>列表项3li>
......
ol>
所有特性基本与ul 一致。 但是实际中比 无序列表 用的少很多。
定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:
<dl>
<dt>名词1dt>
<dd>名词1解释1dd>
<dd>名词1解释2dd>
...
<dt>名词2dt>
<dd>名词2解释1dd>
<dd>名词2解释2dd>
...
dl>
标签名 | 定义 | 说明 |
---|---|---|
|
无序标签 | 里面只能包含li 没有顺序,我们以后布局中最常用的列表 |
|
有序标签 | 里面只能包含li 有顺序, 使用情况较少 |
|
自定义列表 | 里面有2个兄弟, dt 和 dd |
我们现在还没有学布局,现在只要保证2个点:
**作用: **
表单目的是为了收集用户信息。
在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时也需要表单。
在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。
**表单控件: **
包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息:
一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。
表单域:
他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。
语法:
<input type="属性值" value="你好">
常用属性:
用户名: <input type="text" />
密 码:<input type="password" />
用户名:<input type="text" name="username" value="请输入用户名">
用户名:<input type="text" name=“username” />
name表单的名字, 这样,后台可以通过这个name属性找到这个表单。 页面中的表单很多,name主要作用就是用于区别不同的表单。
name属性后面的值,是我们自己定义的。
radio 如果是一组,我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
性 别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
上面这个,表示就默认选中了 男 这个单选按钮
属性 | 说明 | 作用 |
---|---|---|
type | 表单类型 | 用来指定不同的控件类型 |
value | 表单值 | 表单里面默认显示的文本 |
name | 表单名字 | 页面中的表单很多,name主要作用就是用于区别不同的表单。 |
checked | 默认选中 | 表示那个单选或者复选按钮一开始就被选中了 |
目标:
label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。
概念:
label 标签为 input 元素定义标注(标签)。
作用:
用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
<label> 用户名: <input type="radio" name="usename" value="请输入用户名"> label>
适合单个表单选择
<label for="sex">男label>
<input type="radio" name="sex" id="sex">
<textarea >
文本内容
textarea>
作用:
通过textarea控件可以轻松地创建多行文本输入框.
cols=“每行中的字符数” rows=“显示的行数” 我们实际开发不用
表单 | 名称 | 区别 | 默认值显示 | 用于场景 |
---|---|---|---|---|
input type=“text” | 文本框 | 只能显示一行文本 | 单标签,通过value显示默认值 | 用户名、昵称、密码等 |
textarea | 文本域 | 可以显示多行文本 | 双标签,默认值写到标签中间 | 留言板 |
语法:
<select>
<option>选项1option>
<option>选项2option>
<option>选项3option>
...
select>
收集的用户信息怎么传递给服务器?
通过form表单域
目的:
在HTML中,form标签被用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。
**语法: **
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
form>
常用属性:
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post。 |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单。 |