Hyper Text Markup Language 超文本 标记语言
1超文本 ==> 超链接 , 就是用超链接把不同空间的资源整合在一起构成的一个逻辑网络.
2标记语言 ==> 语言的构成,标记构成. 没有逻辑性.
HTML是什么?
*HTML文档 == 网页. //true 网页时由标签构成的.
*是由浏览器来解析执行的.
优势:1.表达能力更强.可以表达图片.表格,文字颜色,大小等等.
2.表达的逻辑更强.可以表达出层级的概念
2.如何写一个HTML文档
*新建文件.后缀名为html 或 htm.
*使用HTML元素 作为文档的根元素
*在HTML中 分为两部分 <head> <body>
*在body中书写的内容,会被作为网页正文来显示
*在head中书写的内容(不会出现在正文中),比如:网页的标题. meta元信息 , Css , 引入...
3.标记(标签,元素) 如何书写?
*标签构成 , 是由一对尖括号加上一个单词.<html><body> <head>
*标签中的单词不区分大小写.<HTML>==<html>.但是w3c建议使用小写.
*标签不能以数字开头.
*标签可以嵌套.注意:不要交叉嵌套.
*标签一般是成对出现的. <a>开始标签, </a> 结束标签. (建议大家做到.)
* <br/> 自闭合标签,开始标签和结束标签整合在一起. 换行功能.
4.标签的属性
*属性的出现必须是键值对.color="red"
*属性的值必须以双引号或单引号包裹." '都可以
*属性必须出现在开始标签中.
*自闭合的标签也可以有属性.属性出现在单词和 / 之间
5.基本标签
*HTML中.多个换行符,制表符,空格都会被识别一个空格.
*<br> 换行标签.
*<hn> n的取值1~6 ; 由大到小
*<p> 段落标签 . 上下有空行.
*转义字符
-->空格
< ==>小于号
> ==>大于号
*<hr>:水平线标签
*<font>标签:
color : 1.直接填写颜色的单词 . 2.#FFFFFF 3.rgb(255,255,255)
face : 字体 .取值1~7,由小到大.
6列表标签:
dl , dt , dd:
dl:定义一个列表
dt:定义个标题
dd:每一项
ul: unorderd list 无序列表
ol: ordered list 有序列表
<li>: list item 列表的每一项
7超链接标签
第一个用处:
<a>: 使用href属性来指定跳转的资源位置
总结:
href属性: 协议名称+资源名称
*如果不加资源的协议名称==>该路径将会从当前路径寻找该资源
*http://www.baidu.com
*mailto:xxx@gmail.com
*thunder://123FEA1230123 ==>迅雷
*..........
属性:
1.在新的页面打开: _blank
2.在当前页面打开:_parent _self _top
3.框架中的应用:framename
target: 目标. ==> 跳转的目标
第二个用处: 锚的应用
步骤1:定义锚点的位置
<a name="top"></a>
步骤2:跳转
<a href="#top" ></a>
* #号表示当前页面
* top表示要跳转的锚点
8图像标签
img 标签:
alt*:图片的描述信息
src*:图片所在的位置
border: 图片的边框
width: 图片的宽度 赋值方式: 1.像素 px 2.百分比 50%
height: 图片的高度
9表格标签
table 标签 ==> 表示一个表格
border 属性: 边框 px
width属性: 表格的宽度 px %
height属性: 表格的高度 px %
cellspacing 属性: 表格的外边距 px 每个单元格 和边框或其他单元格之间的距离
cellpadding 属性: 表格的内边距 px 单元格中的内容距离单元格边框的距离
tr ==> 表示一行
th ==>表示一个标题单元格 居中 加粗
td ==> 表示一个单元格
colspan="2" 表格 单元格 占多少列
rowspan="2" 表格 单元格 占多少行
注意: 使用的时候 . 如果最大行或最大列数不存在.那么这两个属性无效.
10框架标签:
<frameset>标签: 框架标签 注意:!!!!!!!!!!!不要把框架标签写到body中
rows: 对页面按行进行切割 eg: "20%,20%,*"
cols: 对页面按列进行切割 eg: "20%,20%,*"
noresize: 使整个框架大小都不可改(测试只在谷歌浏览器好使.)
<frame>标签: 表达框架中的页面
src: 指定该frame要显示的页面
name: 对frame进行命名.
可以在a标签中,使用target属性,进行指定页面跳转. eg : <frame src="xxx.html" name="_abc"> ==> <a target="_abc">
noresize:禁止调整大小 小技巧: 当属性的键和值完全一样时. 可以只书写键;
scrolling ；yes,no,auto 是否显示页面滚动条.
11,iframe标签
src:指定要显示的页面
width: 宽度
height: 高度
_self 代表本页面 , _parent 本页面的上级页面 , _top 最外层页面
12.表单标签 ***********(最重要)
凡是涉及到提交,一般都是使用的表单标签
<form> : 表单域标签 , 需要由该标签来包裹需要提交的各个项目.
action: 表单提交的位置.
method属性: 取值是get/post
区别:
get提交
1.提交的键值对在URL中显示
2.安全性相对差
3.提交长度有限制 1kb
post提交:
1.URL中不显示
2.安全性相对较高
3.长度理论上没有限制.
<input type="text" /> : 表示文本输入框
<input type="password" /> : 密码输入框
<input type="radio" /> : 单选框 默认被选中使用checked 属性 注意:使用name属性进行分组,达到单选的功能.
<input type="file" />:文件上传
<input type="checkbox" />多选框 默认被选中使用checked 属性
name: 向服务器提交时, 提交的键
value: 提交的值
<input type="submit" /> : 提交按钮
value:改变提交按钮的值
<select name="key" >
<option value="" >
选项默认被选中使用selected属性
<textarea name="key" cols="" rows="" >
cols:默认显示多少列
rows:显示多少行
13其他没用标签.
14head中的标签
meta 元标签
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" > 指定页面编码.
<meta name=“keywords” content=“传智播客，IT培训" /> 关键字元标签 (给搜索引擎看的)
<meta name="description" content="传智播客是国内最大的……" /> 描述这个网页.(给搜索引擎看的)
<meta http-equiv="refresh" content="3;url=http://www.sina.com.cn" /> 刷新标记 3秒之后刷新 到 网址中
注册成功 将在3秒之后跳转到帖子.
| HTML标签 | 英文全称 | 中文释义 |
| a | Anchor | 锚 |
| abbr | Abbreviation | 缩写词 |
| acronym | Acronym | 取首字母的缩写词 |
| address | Address | 地址 |
| dfn | Defines a Definition Term | 定义定义条目 |
| kbd | Keyboard | 键盘（文本） |
| samp | Sample | 示例（文本 |
| var | Variable | 变量（文本） |
| tt | Teletype | 打印机（文本） |
| code | Code | 源代码（文本） |
| pre | Preformatted | 预定义格式（文本 ） |
| blockquote | Block Quotation | 区块引用语 |
| cite | Citation | 引用 |
| q | Quotation | 引用语 |
| strong | Strong | 加重（文本） |
| em | Emphasized | 加重（文本） |
| b | Bold | 粗体（文本） |
| i | Italic | 斜体（文本） |
| big | Big | 变大（文本） |
| small | Small | 变小（文本） |
| sup | Superscripted | 上标（文本） |
| sub | Subscripted | 下标（文本） |
| bdo | Direction of Text Display | 文本显示方向 |
| br | Break | 换行 |
| center | Centered | 居中（文本） |
| font | Font | 字体 |
| u | Underlined | 下划线（文本） |
| s/ strike | Strikethrough | 删除线 |
| div | Division | 分隔 |
| span | Span | 范围 |
| ol | Ordered List | 排序列表 |
| ul | Unordered List | 不排序列表 |
| li | List Item | 列表项目 |
| dl | Definition List | 定义列表 |
| dt | Definition Term | 定义术语 |
| dd | Definition Description | 定义描述 |
| del | Deleted | 删除（的文本） |
| ins | Inserted | 插入（的文本） |
| h1~h6 | Header 1 to Header 6 | 标题1到标题6 |
| p | Paragraph | 段落 |
| hr | Horizontal Rule | 水平尺 |
| href | hypertext reference | 超文本引用 |
| alt | alter | 替用(一般是图片显示不出的提示) |
| src | Source | 源文件链接 |
| cell | cell | 巢 |
| cellpadding | cellpadding | 巢补白 |
| cellspacing | cellspacing | 巢空间 |
| nl | navigation lists | 导航列表 |
| tr | table row | 表格中的一行 |
| th | table header cell | 表格中的表头 |
| td | table data cell | 表格中的一个单元格 |
| iframe | Inline frame | 定义内联框架 |
| optgroup | Option group | 定义选项组 |
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
