html入门笔记
这些都是本人（小白）在学习html过程中记录下的笔记，都是些基础的知识(html的简介
什么是html？
html是用来描述网页的一种语言，是一种超文本标记语言，而不是编程语言。html的标签
html标记标签通常被称为html标签,html的标签通常是成对出现的，第一个是开始标签，第二个是结束标签。也有部分标签是单便签格式通常为:<标签>内容</标签>
一个简单的html
<!DOCTYPE html> <!--文档类型-->
<html>
<head>
<meta charset="utf-8"> <!--采用utf-8字符集-->
<title>页面标题</title>
</head>
<body>
内容 <!--使用html标签-->
</body>
</html>
html中常用的标签
书签
- html的标题
- html的段落
- html的水平线
- html的换行
- html的注释
- html的分组
- html的文本格式化
- html的图像
- html的超链接
- html的书签链接
- html的特殊字符
- html的列表
- html的下拉菜单
- html的表格
- html的表单
html的标题
字体大小顺序:h1>h2>h3>h4>h5>h6<h1>这是第一个标题</h1>
<h2>这是第二个标题</h2>
<h3>这是第三个标题</h3>
<h4>这是第四个标题</h4>
<h5>这是第五个标题</h5>
<h6>这是第六个标题</h6>
html的段落
<p>这是一个段落</p>
html的水平线
<hr/>
html的换行
<br/>
html的注释
<!--这是一个注释-->
html的分组
div与span标签通常与css的使用有关<div>这是一个块级元素</div>
<span>这是一个内联元素</span>
html的文本格式化
<b>这是一个加粗标签</b>
<i>这是一个斜体标签</i>
<s>这是一个加删除线标签</s>
<u>这是一个加下划线标签</u>
<sub>这是一个上标标签</sub>
<sup>这是一个下标标签</sup>
html的图像
<img src="图像的路径">
图像属性的设置：
| 属性 | 描述 |
|---|---|
| src | 图片的路径 |
| alt | 图片无法显示时替换的文本 |
| width | 设置图像的宽度 |
| height | 设置图像的高度 |
html的超链接
<a href="跳转到的网址" target="目标窗口跳出的方式">这是一个超链接</a>
html的书签链接
使用相同的标识名设置书签链接，可以快速定位到目标位置<p id="id1">目标位置</p>
<a href="#id1">这是一个书签连接</a>
html的特殊字符
html中有些特殊字符是预留字符，必须使用字符实体才能正常显示| 特殊字符 | 描述 | 字符实体 |
|---|---|---|
| 空格 | & nbsp; | |
| < | 小于号 | & lt; |
| > | 大于号 | & gt; |
| & | 和号 | & amp; |
| " | 引号 | & quot; |
| ¢ | 分 | & cent; |
| £ | 镑 | & pound; |
| ¥ | 人民币 | & yen; |
| € | 欧元 | & euro; |
| § | 小节 | & sect; |
| © | 版权 | & copy; |
| ® | 注册商标 | & reg; |
| ™ | 商标 | & trade; |
| × | 乘号 | & times; |
| ÷ | 除号 | & divide; |
html的列表
html的列表包括了无序列表与有序列表，以及自定义列表<!--无序列表-->
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
</ul>
<!--有序列表-->
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
<!--自定义列表-->
<dl>
<dt>自定义列表项目</dt>
<dd>自定义列表项的描述1</dd>
<dd>自定义列表项的描述1</dd>
</dl
html的下拉菜单
<select>
<option>这是一个选项</option>
<option>这也是一个选项</option>
<option>这还是一个选项</option>
</select>
html的表格
简单的理解：tr代表行，td代表列，其中th代表表头，会自动将文字加粗合并表格中的单元格：colspan（合并列），rowspan（合并行）
<table border="1">
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td colspan="2">(1,1)(2,1)</td> <!--合并（1,1）和（2,1）-->
</tr>
<tr>
<td >(2,1)</td>
<td>(2,2)</td>
</tr>
<tr>
<td>(3,1)</td>
<td>(3,2)</td>
</tr>
</table>
表格的属性设置：
| 属性 | 描述 |
|---|---|
| align | 设置表格的对齐格式 |
| bgcolor | 设置表格的背景颜色 |
| border | 设置表格边框的宽度 |
| cellpadding | 设置单元格内容与单元格边框的距离 |
| cellspacing | 设置两个单元格之间的距离 |
| width | 设置表格宽度 |
| height | 设置表格高度 |
html的表单
表单元素是允许用户在表单中输入内容,比如：文本域、单选框、复选框,按钮等等。<form action="url" method="提交方法（get/post）">
user:<input type="text"> <!--文本域-->
<br/>
password:<input type="password"> <!--密码字段不会显示明文-->
<br/>
gender：<input type="radio" name="sex" >Male <!--单选按钮(设置一样的name)-->
<input type="radio" name="sex" >Female
<br/>
hobby:<input type="checkbox" name="hobby" >basketball<br> <!--复选框-->
<input type="checkbox" name="bobby" >football
</form>
input标签中type属性
| type属性 | 描述 |
|---|---|
| text | 文本输入框 |
| password | 密码输入框 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| button | 普通按钮 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| file | 文件提交按钮 |
| image | 图像提交按钮 |