初识前端
一.HTML
HTML超文本标记语言
基于word还有一些图片,链接,音频等。
<>< />双目标签
<>单目标签
基本格式
<!--版本声明是HTML语言-->
<!DOCTYPE html>
<!--html标签包裹网站所有信息 -->
<html lang="en">
<!--head标签包裹一些用户看不见的信息-->
<head>
<!--meta 编码方式-->
<meta charset="UTF-8">
<link rel="icon" type="image/f">
<!--title标签定义网站标题-->
<title>Document</title>
<!-- style定义网页css样式 -->
<style ></style>
</head>
<!--body标签-->
<body>
</body>
</html>
基础标签
标签 | 备注 |
---|---|
<p></p> | 段落 |
<h1></h1>–<h6></h6> | 标题 |
<b></b> <strong></strong> | 加粗 |
<i></i> <em></em> | 倾斜 |
<sub></sub> \ </sup> | 上下标 |
<del></del> | 删除线 |
<ins></ins> | 下划线 |
<mark></mark> | 高亮 |
<span></span> | 文本 |
<hr /> | 分割线 |
<br /> | 换行 |
<abbr> | 缩写 |
基本属性
解释 | 属性 | 选择 | 备注 |
---|---|---|---|
内联框架 | style | ||
宽度 | width | 像素 | |
高度 | height | 像素 | |
长度 | size | ||
颜色 | color | 颜色 | |
决定了标签是块级,行级,行内块 | display | inline | 块级标签 |
block | 行级标签 | ||
inline-block | 行内块标签 | ||
定义背景属性 | backgroud | color | 颜色 |
image | 图片 | ||
常用标签及属性
标签 | 属性 | 备注 |
---|---|---|
图片 | src | 图片路径 |
alt | 图片加载不出来展示 | |
链接 | href | 链接地址,内部链接,照片,js代码,锚点等 |
target | 新的页面打开 | |
滚动 | direction | 滚动方向 |
behavior | 滚动方式 | |
scrollamount | 滚动速度 | |
scroldelay | 滚动时间 | |
盒子 | 块级标签 | |
音频 | controls | 控制器 |
视频 | controls | 控制器 |
for | 和一个 元素相关联 | |
表单输入元素 | type:“text” | 文本 |
:“password” | 密码 | |
:“radio” | 单选 组 | |
:“checkbox” | 多选 | |
:“button” | 点击 | |
:“submit” | 提交 | |
:“range” | 点击拖拽 | |
点击按钮 | ||
路径 ./ 表示同级目录
…/ 表示上一级目录
表
- 列表
有序
<!-- start从10开始倒 reversed倒序 -->
<ol type ="1" start="10" reversed>
<li></li>
<li></li>
</ol>
无序
<!-- circle实心圆 disc空心圆 square实心方块 -->
<ul type ="circie">
<li></li>
<li></li>
</ul>
自定义
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
- 表格
<table>
<caption>表 标题</caption>
<tr>
<th c>姓名</th> <!--表头 colspan 列合并 rowpan横合并-->
<td>张三</td><!--内容-->
</tr>
<tr>
<td>linxiren</td>
</tr>
</table>
- 表单
<from>
<fieldset><!-- <fieldset> 表单的边框线 -->
<legend></legend><!--<legend>-->
<abel for="user">用户名</abel><input id="user" >
<select>
<option>下拉框1</option>
<option>下拉框2</option>
<option>下拉框3</option>
</select>
<textarea></textarea>/* 文本域 */
</fieldset>
</from>
- 下拉框
<select name="" id="">
<option value="">山西省</option>
<option value="">湖南省</option>
<option value="">广东省</option>
<option value="">辽宁省</option>
<option value="">浙江省</option>
</select>
转义字符
转义字符 | 备注 |
---|---|
| 空格 |
框架
整合框架
不能放在body里
<frameset><!-- 整合框架 cols 左右屏 rows上下屏 -->
<frame></frame><!-- 几个框创几个 -->
<frame></frame>
</frameset>
内联框架
<iframe src="地址" name="接收"></iframe>