超文本标记语言(Hyper Text Markup Language 简称HTML),是用来描述网页的一种语言,是通过网页内容在浏览器中显示出来。
超文本是可以加入图片、声音、动作、多媒体等内容,还可以跳转到另一个文件。
HTML语言基本的骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
前端html5?1.HTML标签: 最大的标签,作用于所有HTML标签中的一个根节点
2.head标签: 文档的头部,描述文档的属性和信息,包括文档的标题、在web中的位置以及其他文档的关系等。绝大多数文档头部包含的数据都不是真正作为内容显示给读者。
注:在head标签中必须要设置title标签
3.title标签:文档的标题,让页面拥有一个自己的标题,通常与logo图片配合。
4.body标签:文档的主体,浏览器页面中显示的内容基本都是放在body中(比如文本、超链接、图片、列表、表格等等)
HTML标签分类
web前端都学什么?1.双标签
<标签名> 内容 </标签名>
2.单标签
<标签名 />
HTML标签关系
1.嵌套关系
<head><title></title> </head>
html5网页前端设计?
2.并列关系
<head></head> <body></body>
注:两个标签之间有嵌套或者并列关系时,最好使用tab键,使之缩进对其。
文档类型
<!DOCTYPE html>
web网站前端开发,<!DOCTYPE>标签位与文档的最前面,用来向浏览器说明该文档是使用哪种HTML或XHTML标准规范,必需在开头处使用此标签,为所有的HTML或XHTML文件指定版本。
现在使用的一般是HTML5。
字符集
<meta charset="UTF-8" />
utf-8是目前最常用的字符编码方式,常用的字符编码方式gbk还有gb2312。
gb2312 简单中文 包括6763个汉字。
html前端开发、BIG5 繁体中文 港澳台等使用
GBK 包含全部中文字符 是GB2312的扩展,加入对繁体字的支持,兼容GB2312。
HTML常用标签
排版标签
标题标签
单词缩写 head
标题标签 <h1> 、<h2>、<h3>、<h4>、<h5>、<h6>
标题标签语义:作为标题使用,并且依据重要性递减
<hn> 标题文本 </hn>
段落标签
web前端要求会哪些?单词缩写 paragraph
<p> 文本内容 </p>
把网页中文字有条理地显示出来,就如我们平时写文章一张,整个网页也可以分为若干个段落。
HTML文档中最常见的标签,默认情况下,文本会根据浏览器窗口的大小自动换行。
水平线标签
web前端div。单词缩写 horizontal
<hr />是单标签
在网页中显示默认样式的水平线
换行标签
单词缩写 break
<br />单标签
java web?
强制的进行换行。
div span标签
单词缩写 division span
<div> 这是头部 </div> <span> 今日价格</span>
div span 是没有语义的,是网页布局主要的2盒子
文本格式化标签
前端、在网页中将文字设置成粗体、斜体、删除线、下划线
<b></b> <strong></strong> 文字以粗体方式显示(XHTML推荐使用strong) <i></i> <em></em> 文字以斜体方式显示(XHTML推荐使用em) <s></s> <del></del> 文字以加删除线方式显示(xhtml推荐使用del) </u></u> <ins></ins> 文字以加下划线方式显示(xhtml不赞成使用u)
前端html。b i s u 只有使用没有强调的意思 strong em del ins 语句更加强烈
标签属性
对标签加一些属性,进行装饰
<标签名 属性1="属性" 属性2="属性" ...> 内容 </标签名>
<hr width="400" /> 属性 宽度 值 400
1.标签可以拥有多个属性,必须写在开始标签中,标签名后。
2.属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
web前端工资一般多少?3.任何标签的属性都有默认值,省略该属性就是默认取消默认值。
注: 尽量不知用样式属性
图像标签img
单词缩写 image
<img src="图像URL">
src(必填) URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素 这是图像的宽度
height 像素 设置图像的高度
border 数字 这是图像边框的宽度
可以在网页中显示图像,并这是图像的相关属性
链接标签
单词缩写 anchor
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
href 用于指定链接目标的url地址,当该标签应用href属性时,它就具有了超链接的功能。
target 用于指定链接页面的打开方式,_self 和 _blank 两种取值,self默认,blank在新窗口中打开方式。
注:
1.外部链接 需要添加 http://
2.内部链接 直接链接内部页面名称即可 如 <a href="index.html> 首页</a>
4.不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。
锚点定位
1.使用<a href=""#id名">链接文本</a> 创建链接文本 (被点击的)<a href="#two"> 2.使用相应的id名标注跳转目标的位置<h3 id="two">跳转目标</h3>
通过创建锚点链接,用户能够快速定位到目标内容。
base标签
可以设置整体链接的打开状态
base写到<head></head>之间,把所有的链接都默认添加 target="_blank"
特殊字符标签
空格符  > 大于号 >< 小于号 <& 和号 &¥ 人民币 ¥© 版权 ©
® 注册商标 ®
℃ 摄氏度 °
± 正负号 ±
* 乘号 ×
/ 除号 &divvid
² 平方 ²
³ 立方 ³
注释标签
<!--注释语句--> ctrl + / 或者 ctrl + shift + /
注释内容不会显示在浏览器窗口中,但是作为HTML文档内容的一部分,也会被下载到用户的计算机上,查看源代码时就可以看到。
路径
分为绝对路径和相对路径
相对路径
图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称即可,如img src="logo.gif" /。图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,如img src="img/img01/logo.gif" /。图像文件位于HTML文件的上一级文件夹:在文件名之前加入“../” ,如果是上两级,则需要使用 “../ ../”,以此类推,如img src="../logo.gif" /。
绝对路径
绝对路径以web站点根目录为参考基础的目录路径,
“D:\web\img\logo.gif”,或完整的网络地址,例如“http://www.itcast.cn/images/logo.gi
“D:\web\img\logo.gif”,或完整的网络地址,例如“http://www.itcast.cn/images/logo.gif”。
列表
分为无序列表、有序列表和自定义列表,列表最大的特点就是 整齐、整洁、有序。
无序列表(ul)
无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:
<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>... </ul>
<ul type="">
默认 实心圆
square 方形圆实
circle 空心圆
如:新闻就是没有顺序的,不用排队,先到先得,现发布先显示。
有序列表(ol)
有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:
<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>... </ol>
<ol type="">
默认 数字
I 大写罗马字母
i 小写罗马字母
A 大写应为字母
a 小写英文字母
自定义列表
定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:
<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>...<dt>名词2</dt><dd>名词2解释1</dd><dd>名词2解释2</dd>... </dl>
表格table
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。
创建表格的基本语法:
<table>
<caption>表格标题</caption><tr><td> 单元格内的文字</td>...</tr>... </table>
1.table用于定义一个表格 2.tr用于定义表格中的一行,必须嵌套在table标签中,在table中包含挤兑tr,就有几行表格。 3.td /td 用于定义表格中的单元格,必须嵌套在<tr></tr>中包含挤兑<td></td>,就表示该行中有多少列(或多少单元格)。
注:
<tr></tr>中只能嵌套<td></td>
<td></td>标签,他就像一个容器,可以容纳所有的元素。
表格属性
border 像素值 设置表格的边框(默认border=“0” 无边框)cellspacing 像素值 设置单元格与单元格之间的空白间距cellpadding 像素值 设置单元格内容与单元格边框之间的空白距离width 像素值 设置表格的宽度
height 像素值 设置表格的高度
align left、center、right 设置表格在网页中的水平对齐方式
三参为0 border cellpadding cellspacing 为0
表头标签
<table><th></th> </table>
表格结构
在使用表格进行布局时,可以将表格划分为头部、主体和页脚(页脚因为有兼容性问题,我们不在赘述),具体如下所示:
<thead></thead>:用于定义表格的头部。必须位于<table></table> 标签中,一般包含网页的logo和导航等头部信息。<tbody></tbody>:用于定义表格的主体。位于<table></table>标签中,一般包含网页中除头部和底部之外的其他内容。
表格标题
<table><caption>表格标题</caption> </table>
caption标签必须紧随在table标签之后,只存在表格里面,是位与表格之上的标题。
合并单元格
跨行合并:rowspan
跨列合并:colspan
单元格合并思想:将多个内容合并的时候,就会有多余的东西,把它删掉。
1.先确定是跨行还是跨列合并
2.根据先上 后下 先左 后右的原则找到目标单元格
3.删除单元格 删除的个数 = 合并的个数 - 1
表单标签
现实中的表单,类似我们填的单子。表单的目的是为了手机用户的信息。在我们网页中,我们也需要跟用户进行交互,收集用户资料,此时就需要用到表单。
在HTML中,一个完整的表单通常由表单控件(表单元素)、提示信息、表单域三部分构成。
表单控件:包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息:一个表单通常还需要包含一些说明性的文字,提示用户进行填写和操作。
表单域:他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。
input控件
<input />标签为单标签,tpye属性为最基本的属性类型,控制指定不同的控件类型。
text 单行文本输入框password 密码输入框radio 单选按钮checkbox 复选框
type button 普通按钮submit 提交按钮reset 重置按钮image 图像形式的提交按钮file 文件域name 由用户自定义 控件的名称
value 由用户自定义 input控件中的默认文本值
size 正整数 input控件在页面中的显示宽度
checked checked 定义选择控件默认被选中的项
maxlength 正整数 控件允许输入的多的字符数
注:
type说明了属于哪种表单
radio 如果是一组,我们必须给他们命名相同的名字 name,这样就可以多个选其中的一个了。
label标签
<thead></thead>:用于定义表格的头部。
必须位于<table></table> 标签中,一般包含网页的logo和导航等头部信息。
<tbody></tbody>:用于定义表格的主体。
位于<table></table>标签中,一般包含网页中除头部和底部之外的其他内容。
table
作用: 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
如何绑定元素呢?
for 属性规定 label 与哪个表单元素绑定。
<label for="male">Male</label> <input type=k"radio" name="sex" id="male" value="male">
textarea控件
text 文本框 只能写一行文本
textarea 文本域
<textarea cols="每行中的字符数" rows="显示的行数">文本内容 </textarea>
下拉菜单
使用select控件定义下拉菜单的基本语法格式
<select><option>选项1</option><option>选项2</option><option>选项3</option>... </select>
注:
1.<select></select>中至少应包含一队<option></option>
2.在option中定义selected="selected"时,当前项即为默认选中项。
表单域
在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下:
<form action="url地址" method="提交方式" name= "表单名称">各种表单控件 </form>
常用属性:
1.action 在表单收集到信息后,需要将信息传递到服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。
2.method 用于设置表单数据的提交方式,其取值为get或post。
3.name 用于指定表单的名称,以区分统一页面中的多个表单。
注:
每个表单都应该有自己的表单域。
文档查阅:
W3C: