web标准构成
结构、表现、行为、
HTML、CSS、JavaScript、
<html> 表示整个html页面的开始
<head> 表示整个html都头部信息
<title>Title</title>页面都标题
</head>
<body> 整个html页面的显示都主题区域
hello world!
</body>
</html> 表示整个html页面的结束
<html></html>HTML标签
<head></head>文档的头部
<title></title>文档的标题
<body></body>文档的主体
1.标签的格式:
<标签名>封装的数据</标签名>
2.标签名大小写不敏感。
3.标签拥有自己的属性。
i. 分为基本属性:bgcolor=“red” 可以修改简单的基本样式效果
ii. 事件属性: οnclick=“alert(‘你好!’);” 可以设置事件响应后的js代码。
4.标签又分为,单标签和双标签。
i. 单标签格式: <标签名 /> br 换行 hr水平线
ii. 双标签格式: <标签名> …封装的数据…</标签名>
标签的语法:
标签不能交叉嵌套
标签必须正确关闭
属性必须有值,属性值必须加引号
注释不能嵌套
注意事项:
1.html 代码不是很严谨。有时候标签不闭合,也不会报错。
排版标签
<h1></h1>标题标签(h1到h6 从大到小)
<p></p>段落标签
<hr/>水平线
<br/>换行
布局
<div></div>列
<span></span>行
font标签
font标签是字体标签,它可以用来规定文本的字体,大小,以及颜色
size 属性设置文本的大小
face 属性设置文本的字体
color 属性设置文本的颜色
<font size="7" face="宋体" color="green">我是字体标签</font>
文本格式化标签
<b></b>和<strong></strong>加粗
<i></i>和<em></em>斜体
<s></s>和<del></del>加删除线
<u></u>和<ins></ins>加下划线
推荐后者
标签属性
<标签名 属性1=“属性值1” 属性2=“属性值2” >33</标签名 >
图片标签
<ing src="../12/1.jpg" />
.. 上一级目录
标签属性 | 含义 |
---|---|
src | 图片路径 |
alt | 图片不能显示时的替换文本 |
title | 鼠标悬停时显示的内容 |
width | 设置图片的宽度 |
height | 设置图片的高度 |
border | 设置图片的边框的宽度 |
链接标签
<a href="hwwp://" target="_self">001</a>
href 目标url地址
#-空链接
target 页面打开方式
_self当前窗口
_blank新窗口打开
注释标签
<!--0000 -->
路径
相对路径
同一级路径 直接
下一级路径 /
上一级路径 …/
绝对路径
图片计算机中的位置
完整的网络地址
锚点定位
通过创建锚点链接,用户能够快速定位的目标内容
<a href="#id名">0</a>
<h3 id="id名"></h3>
base 设置整体链接的打开方式
写在head中
<base target="_blank">
预格式化文本pre
直接显示我们的书写格式
<pre>
00
33
666
</pre>
表格table
table定义一个表格标签
tr标签 用于定义表格中的行 必须嵌套在table标签中
td标签 用于定义表格中的单元格 表现嵌套在<tr></tr>标签中
<table> 表格
<tr>行
<td>1</td><td>2</td>单元格
</tr>
</table>
<th></th>表头单元格
让文字居中加粗显示
<caption></caption>表格标题
跨行合并rowspan="合并单元格的个数"
跨列合并colspan="合并单元格的个数"
表格属性 | |
---|---|
border | 设置表格的边框 |
cellspacing | 设置单元格与单元格边框之间的空白间距 |
cellpadding | 设置单元格内容与单元格边框之间的空白间距 |
width | 设置表格的宽度 |
height | 设置表格的高度 |
align | 设置表格在网页中的水平对齐方式 left、center、right、 |
下面标签都必须放在table标签中
<thead></thead> 用于定义表格的头部。用来放标题之类的东西。<thead>内部必须拥有<tr>标签!
<tbody></tbody>用于定义表格的主体。放数据本体。
<tfant></tfant>放表格的脚注之类。
iframe
iframe标签开辟一个小窗口加载一个单独都页面
sec 属性设置你要加载都单独都页面路径
iframe和a标签组合使用的步骤;
1.在iframe标签中使用name属性设置一个名称
2.这a标签都target属性中,设置你有让哪个iframe都name属性值
<ifream src="33.html" width="700" height="300" name="aa"></ifream>
<a href="333.html" target="aa">1</a>
列表
无序列表ul
<ul>
<li></li>
<li></li>
<li></li>
</ul>
有序列表ol
<ol>
<li></li>
<li></li>
<li></li>
</ol>
自定义列表dl
<dl>
<dt>1</dt>
<li>2</li>
<li>3</li>
<dt>1</dt>
<li>2</li>
<li>3</li>
</dl>
label标签
用于绑定一个表单元素,当点击label标签的时候被绑定的表单元素就会获得输入焦点。
当我们鼠标点击label标签里面的文字时,光标会定位到指定的表单里面
绑定元素
<label><input ></label>
包住表单input
通过for和id来控制
<label for="q">xx</label> <input type="text" id="q">
textarea文本控件
<textarea>
文本内容
</textarea>
通过textarea控件可以轻松地创建多行文本输入框
cols="每行中的字符数" rows="显示的行数"
实际开发不用
==select ==
城市
<select>
<option selected="selected">北京</option>
<option>上海</option>
</select>
selected="selected"默认选中
实际开发少
form表单域
<form action="url地址"method="提交方式" name="表单名称">
用户名:<input type="text"><br>
密码:<input type="psssword"><br>
<input type="submit">
<input type="reset">
</form>
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的URL地址 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post。 |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单。 |
表单
<input type="属性" >
属性 | 属性值 | 描述 |
---|---|---|
type | text | 单行文本输入框 |
type | password | 密码输入框 |
type | radio | 单选输入框 |
type | checkbox | 复选框 |
type | button | 普通按钮 |
type | submit | 提交按钮 |
type | reset | 重置按钮 |
type | image | 图像形式的提交按钮 |
type | file | 文件域 |
name | 由用户定义 | 控件的名称 |
value | 由用户定义 | input控件中的默认文本值 |
size | 正整数 | input控件在页面中的显示宽度 |
checked=checked
表示默认选中状态。较常见于 单选按钮和复选按钮。
特殊符号
cs