HTML:Hyper Text Markup Language 超文本标签语言
html:超文本标签语言
html:
作用:展示
超文本:超越了一般文本,描述文本的字体 颜色 图片
标签:标记
html书写规则:
文件的后缀名 .html(建议) 或者 .htm
标签必须用 <> 引起来 已经定义好的标签
属性
格式: key="value"
建议属性的值用引号引起来.
不区分大小写
注意:
最好将所有的内容放在一个标签中 <html></html>
有开始标签和结束标签的标签称之为围堵标签
没有结束的标签的称之为空标签 <br/>
开始标签和结束标签之间的内容称之为标签体.
<!--注释内容--> html页面中的注释
标签必须正常嵌套,
标签最好关闭
文件标签:
html标签:
声明当前网页为html页面
子标签:
<head></head>
<body></body>
head:用来存放当前页面的重要信息,一般不展示在html页面上
常见的子标签:
<title></title> 网页的标题
body:
要展示的数据放在body中
标题标签:
<hn></hn>
n取值 :1~6
h1最大 h6最小
自动换行 且留白 默认加粗
常用属性:
align:对齐方式
left:左 right:右 center:居中
格式:
<h2 align="center"></h2>
//
字体标签:(了解)规定文本的字体、字体尺寸、字体颜色。
<font></font>
常用属性:
face:字体
size:尺寸
color:颜色
颜色的取值:(RGB)
方式1: #xxxxxx x为16进制
方式2: 英文单词
段落标签:
<p></p>
其他标签:
<b></b> <strong></strong>加粗
<i></i> 斜体
水平线
<hr/>
换行
<br/>
图片标签:★
<img/>
常用属性:
★src:图片的路径
alt:替代文字
title:移上去显示的文字
width:宽
height:高
图片★
<img src="图片路径" alt="替代文字" width="" height=""/>
大小的写法:
像素:123px
百分比:20%
路径的写法:
相对路径:
./ 或者 什么都不写 当前目录
../ 上一级目录
绝对路径:
带协议的绝对路径:
http://www.itheima.com
列表标签:
<ol></ol> 有序
<ul></ul> 无序
常用的标签
<li></li> 列表项
超链接标记
<a></a>
常用属性:
href:跳转路径
target:在那里打开
默认值:_self _blank(在空白页面打开)
超链接★
<a href="跳转路径" target="_blank">xxxx</a>
表格标签★
<table></table>
常用的子标签
<tr>:行
<tr></tr>
常用子标签:
<td>:列
<th>:表头单元格 默认居中加粗
注意:
一行必须只有一个单元格或者一列
//
table 的常用属性:
border:边框 像素值
width:
align:表格对齐方式
tr 的常用属性:
align:内容对齐
td 的常用属性:
align:内容对齐
colspan:跨列合并 值:合并的列数
rowspan:跨行合并
表格标签★★
<table border="" width="" align="">
<tr>
<td></td>
</tr>
</table>
td中的重要属性:
colspan:列合并
rowspan:行合并
表单标签★★★
<form></form>
作用:
用来从浏览器端收集用户的信息.
form
常用属性:
action:提交路径
method:提交方式 get和post
常见的子标签:
input：输入框
select：下拉选
textarea：文本域
input标签:
10中类型type:
text：文本
password：密码
radio：单选
checkbox：多选
file：文件
submit：提交按钮
reset：重置按钮
button：按钮
hidden：隐藏域
image：图片按钮
若想将内容发送到服务器,必须有name属性 username=tom
<input type=”text”/>文本框：属性：name、value、size、maxlength、readonly
<input type=”radio”/>单选按钮：Checked：默认选中
<input type=”checkbox”/>复选框：Checked：默认选中
<select><option></option></select>下拉列表框：Selected：默认选中、Multiple：全部显示
select标签:
<select name="">
<option value="提交到服务器的值">展示内容</option>
</select>
textarea:文本域
格式:
<textarea cols="" rows="" name=""></textarea>
框架(了解)
frameset:定义框架集
常用属性:
cols:
rows:
常见的子标签:
frame
frame:具体展示
常用属性:
src:展示网页的url
name:给当前的frame起个名称
frameset:框架集(了解)
常用属性:
cols:垂直切割
例如: cols="40%,60%"
例如: cols="40%,*,10%"
rows:水平切割
常见的子标签:
frame
注意:
最好和body不要共存
frame:具体实现
常用属性:
src:展示的页面的url
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="15%,*">
<frame src="top.html" />
<frameset cols="15%,*">
<frame src="left.html" />
<frame src="right.html" />
</frameset>
</frameset>
</html>
//
补充:
转义字符:
三部分构成 &实体;
掌握的转义字符:
> > //great then
< <
& &
空格
//
meta
元信息
<meta charset="UTF-8">指定浏览器用什么编码打开此页面
//
220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
