HTML简单笔记
# 系列链接
HTML简单笔记
CSS简单笔记
JavaScript简单笔记
jQuery简单笔记
拓展简单笔记
一 标题标签
-
<h1>一级标题</h1>
-
<h2>二级标题</h2>
-
<h3>三级标题</h3>
-
<h4>四级标题</h4>
-
<h5>五级标题</h5>
-
<h6>六级标题</h6>
-
<h7>七级标题</h7>
没有
二 段落标签
<p>段落</p>
三`标签
<br/>
四 水平线标签
<hr />
五 加粗和斜体
<strong>加粗</strong>
加粗<b>加粗</b>
加粗<em>斜体</em>
斜体<i>斜体</i>
斜体<font size="3" color="red">字体标签</font>
字体标签- 按照标准不建议用 有样式
css
来控制 自己怎么方便怎么用
六 特殊符号 (网页显示一些东西)
空 格<
<>
>&quto;
" markdown不识别可能©
©
七 图片标签
<img src="" />
src
: 指定图片路径 相对引用:以当前网页路径作为参考位置,了解. 和… 绝对引用: 例如 https://www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=superwidth
height
title
: 鼠标放到图片上的悬浮文字提示al
t: 图片不能正常显示 替换图片的文
八 超链接
<a href="">链接焦点 图片or文字</a>
超链接- target: _self:默认值 _blank:新窗口
- 锚链接: 当前页面跳转 先在目标地写
<a name="锚名字"></a>
然后点击<a href="#锚名字"></a>
# 浏览器解释回到最上面 例如: 顶部w3c - 功能链接: 可以启动第三方软件 有特定格式 例如
<a href="mailto:[email protected]">联系我</a>
联系我
九 列表
-
无序列表
1
2
3
4
5<ul>
<li>桔子</li>
<li>香蕉</li>
<li>苹果</li>
</ul>如
- 桔子
- 香蕉
- 苹果
- type: square: 正方形 disc: 实心圈(网页默认) circle: 空心圈
-
有序列表
-
h<ol> <li>桔子</li> <li>香蕉</li> <li>苹果</li> </ol>
如 <dl> <dt>水果:</dt> <dd>桔子</dd> <dd>香蕉</dd> <dd>苹果</dd> </dl>1
2
3
4
5
6
7
8
9
10
11
12
13
14如
<ol><li>桔子</li><li>香蕉</li><li>苹果</li></ol>
2. type: A <font color ="green">or</font> a I <font color ="green">or</font> i
3. 定义列表(常来用来做图文混排)
1. ```html
<dl>
<dt>水果:</dt>
<dd>桔子</dd>
<dd>香蕉</dd>
<dd>苹果</dd>
</dl>
-
十 表格布局 (DIV 框架布局后面再说)
-
规整排列数据
-
<table>//网页默认没有边框 <tr>//行 <td>我爱你</td>//列 <td>你爱我</td> </tr> <tr> <td>我和你</td> <td>你和我</td> </tr> </table>
如 <table> <tr> <td colspan="2">你我</td> </tr> <tr> <td>我爱你</td> <td>你爱我</td> </tr> <tr> <td>我和你</td> <td>你和我</td> </tr> </table> - 跨行 垂直合并1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<table>
<tr>
<td>我爱你</td>
<td>你爱我</td>
</tr>
<tr>
<td>我和你</td>
<td>你和我</td>
</tr>
</table>
3. border 边框(数`px`) width height
4. 表格对齐
5. 单元格对齐
<table>
<tr>
<td>属性</td>
<td>值</td>
<td>说明</td>
</tr>
<tr>
<td>align<br />水平对齐方式</td>
<td>left<br />center<br />right</td>
<td>左对齐<br/>居中对齐<br />右对齐</td>
</tr>
<tr>
<td>valign<br />垂直对齐方式</td>
<td>top<br />middle<br />bottom<br />baseline</td>
<td>顶端对齐<br/>居中对齐<br />低端对齐<br />基线对齐</td>
</tr>
</table>
6. 好多地方都可以用上面的东西 就近原则
7. 跨行跨列
- 跨列 水平合并
```html
<table>
<tr>
<td colspan="2">你我</td>
</tr>
<tr>
<td>我爱你</td>
<td>你爱我</td>
</tr>
<tr>
<td>我和你</td>
<td>你和我</td>
</tr>
</table>如 <table> <tr> <td rowspan="2">你我</td> <td>我爱你</td> <td>你爱我</td> </tr> <tr> <td>我和你</td> <td>你和我</td> </tr> </table> - 两跨 自己专研1
2
3
4
5
6
7
8
9
10
11<table>
<tr>
<td rowspan="2">你我</td>
<td>我爱你</td>
<td>你爱我</td>
</tr>
<tr>
<td>我和你</td>
<td>你和我</td>
</tr>
</table>
十一 框架布局
-
将一个页面分成若干个部分,每个部分嵌套一个页面 一般用来做后台管理页面(回忆某次
java
实践)-
分页面
frameset
不能和body
一起用1
2
3
4
5<frameset rows="20%,20%,*"><!-- cols 也可以px -->
<frame />
<frame />
<frame />
</frameset>1
2
3
4
5
6
7<frameset rows="20%,*"><!-- cols 也可以px -->
<frame />
<frameset cols="20%,*">
<frame />
<frame />
</frameset>
</frameset> -
准备页面
-
关联页面
src
1
2
3
4
5
6
7<frameset rows="20%,*"><!-- cols 也可以px -->
<frame src=""/>
<frameset cols="20%,*">
<frame src=""/>
<frame src=""/>
</frameset>
</frameset> -
指定目标位置 给
frame
起一个名字1
2
3
4
5
6
7<frameset rows="20%,*"><!-- cols 也可以px -->
<frame src="" name="名字"/>
<frameset cols="20%,*">
<frame src="" name="名字"/>
<frame src="" name="名字"/>
</frameset>
</frameset>1
<a href="" target="名字">链接焦点</a>
-
-
禁止拖动
noresize="noresize"
没有滚动条scrolling="no"
-
子框架
<iframe src=""></iframe>
可以把页面加进来 页面复用 可以在body
里用
十二 表单 表单元素
-
- 表单: 嵌套表单元素 填写的数据以一个表单整体提交
- 表单元素: 文本框 密码框 单选框 复选框 下拉列表
-
<form method="post/get" action="某html等"> <!-- 默认get action:指定数据提交到服务器后由谁处理--> <p> 名字: <input name="name" type="text"/> </p> <!-- 也可以用<br />--> <p> 密码: <input name="password" type="password"/> </p> <p> <input type="submit" name="Button" value="提交"/> <!-- 不传 一般不加name--> <input type="reset" name="Reset" value="重填"/> </p> </form>
<form> <input type="radio" name ="gender"/>男 <input type="radio" name ="gender"/>女 </form> - `checkbox` : 复选 参上 - 按钮 : - 提交 : `submit` - 重置 : `reset` - 普通 : `button` 可自定义任何功能 - 图片 : `img` `src=""` 默认有提交功能 - 文件域 : `file` 要用`post` 要有`enctype=""` 可以是 `multipart /form-data`多部件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form method="get" action="某html">
<p> 名字: <input name="name" type="text"/> </p>
<p> 密码: <input name="password" type="password"/> </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填"/>
</p>
</form>
3. 有`name`的表单元素才会提交
4. - `text` : `size` 文本框长度 `maxlength` 可输入最大字符
- `password`:
- 'radio' : 单选 如
```html
<input type="radio" name ="gender"/>男 <!-- 不加name 不能识别为一组 无法控制 -->
<input type="radio" name ="gender"/>女 <!-- 加上value可提交 否则为on --> -
下拉 :
1 | <select name=""> |
-
多行文本域
1
<textarea rows="5" cols="10">写字</textarea>
十三 表单高级应用
-
隐藏域 不给用户看
1
<iptut type ="hidden" name="" value=""/>
-
只读和禁用
readnoly="readonly"
一般用于文本框disabled="disabled"
一般用于按钮 -
语义化 没什么用
1
2
3
4
5
6<form>
<fieldset>
<legend>用户信息</legend>
姓名 : <input type="text"/>
</fieldset>
</form> -
-
所有标签可以加
id
和name
id
: 同一个页面不能出现相同的id
name
: 可以重复
-
<form><!-- 增强用户体验 符合规范 --><!-- 点击名字 光标跳到文本框 --> <fieldset> <legend>用户信息</legend> <label for="uname">姓名 : </lable> <input type="text" id="uname"/> </fieldset> </form>
-