前端学习笔记（一）-- HTML
HTML前端学习笔记
- 一、HTML基本结构
- 二、排版标签
- 三、文本格式化标签
- 四、图像标签
- 五、链接标签
- （一）锚点定位
- （二）base标签
- 六、特殊字符
- 七、注释标签
- 八、路径
- （一）相对路径
- （二）绝对路径
- 九、列表标签
- （一）无序列表
- （二） 有序列表
- （三） 自定义列表
- 十、表格table
- （一） 创建表格
- （二） 表格属性
- （三） 表头标签
- （四）表格结构
- （五）表格标题
- （六）合并单元格
- （七）总结表格
- 十一、表单标签
- input控件
一、HTML基本结构
认识HTML：超文本标记语言，html不是一种编程语言，而是一种标记语言
HTML语言语法骨架格式：
<html>
<head>
<title>标题title>
head>
<body>
body>
html>
二、排版标签
标题标签：
<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>
段落标签： 文本内容
水平线标签：
换行标签：
div、span标签： 没有语义的；
div：分区 ；span：跨度，范围；
三、文本格式化标签
| 标准 | 显示效果 |
|---|---|
|
文字以粗体方式显示 |
|
文字以斜体方式显示 |
|
文字以 |
|
文字以下划线方式显示 |
注：
只有使用，没有强调的意思
语义更强调
四、图像标签
该语法中src属性用于指定图像文件的路径和文件名，它是img标签的必需属性。
基本语法格式：
<img src="图像URL" />
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素 | 设置宽度 |
| height | 像素 | 设置高度 |
| border | 数字 | 设置图像边框的宽度 |
五、链接标签
基本语法格式：
<a href="跳转目标" target=“目标窗口的弹出方式”>文本或图像a>
href:用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。
target:用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。
注：
1.外部链接 需要添加http:// + www.baidu.com
2.内部链接 直接链接内部页面名称即可，比如:
<a href="index.html">首页a>
3.如果当时没有确定链接目标时，通常将连接标签的href属性值定义为“#”（即href="#"）表示该链接暂时为一个空链接。
4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
（一）锚点定位
通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接：
1.使用"a href="#id名"链接文本/a"创建链接文本。
2.使用相应的id名标注跳转目标的位置。
（二）base标签
可以设置整体链接的打开状态。
和之间：
<base target="_blank " />
六、特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | |
|
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ¥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ℃ | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2（上标2） | ² |
| ³ | 立方3（上标3） | ³ |
七、注释标签
基本语法格式：
八、路径
（一）相对路径
1.图像文件和HTML文件位于同一文件夹，只需输入图像文件的名称即可，如
2.图像文件位于HTML文件的下一级文件夹，输入文件夹名和文件名，之间用“/”隔开，如
3.图像文件位于HTML文件的上一级文件夹，在文件名之前加入“…/”，如果是上两级，则需要使用“…/…/”，以此类推，如
（二）绝对路径
“D:\web\img\logo.gif”，或完整的网络地址，例如"http://www.itcast.cn/images/logo.gif"。
九、列表标签
（一）无序列表
基本语法格式：
<ul>
<li>列表项1li>
<li>列表项2li>
<li>列表项3li>
················
ul>
注：
1.，直接在
2.之间相当于一个容器，可以容纳所有元素。
3.无序列表会带有自己的样式属性，放下那个样式，让CSS 来！
（二） 有序列表
基本语法格式：
<ol>
<li>列表项1li>
<li>列表项2li>
<li>列表项3li>
················
ol>
（三） 自定义列表
基本语法格式：
<dl>
<dt>名词1dt>
<dd>名词1解释1dd>
<dd>名词1解释2dd>
··················
<dt>名词2dt>
<dd>名词2解释1dd>
<dd>名词2解释2dd>
··················
dl>
十、表格table
（一） 创建表格
基本语法格式：
<table>
<tr>
<td>单元格内文字td>
···················
tr>
···············
table>
解释：
1.table用于定义一个表格。
2.tr用于定于表格中的一行，必须嵌套在table标签中，在table标签中含有几对tr，就有几行表格。
3.
注：
1.
2.
（二） 表格属性
| 属性名 | 含义 | 常用属性值 |
|---|---|---|
| border | 设置表格的边框（默认border=“0”无边框） | 像素值 |
| cellspacing | 设置单元格边框之间的空白间距 | 像素值（默认为2） |
| cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值（默认为1） |
| width | 设置表格的宽度 | 像素值 |
| height | 设置表格的高度 | 像素值 |
| align | 设置表格在网页中的水平对齐方式 | left、center、right |
（三） 表头标签
表头一般位于表格的第一行或第一列，其文本加粗居中，设置表头只需用表头标签
（四）表格结构
在使用表格进行布局时，可将表格划分为头部、主体和页脚。
:用于定义表格的主体。必须位于
（五）表格标题
基本语法格式：
<table>
<caption>表格标题caption>
table>
注：
1.caption标签必须紧跟table标签之后，且只能对每一个表格定义一个标题，通常这个标题会被居中于表格之上。
2.caption只存在表格里。
（六）合并单元格
跨行合并：rowspan
跨列合并：colspan
合并单元格的思想：
将多个内容合并的时候，就会有多余的东西，把它删除。
公式：
删除的个数=合并的个数-1
合并的顺序：
先上后下 先左后右
（七）总结表格
1.表格提供了HTML中定义表格数据的方法。
2.表格中由行中单元各组成。
3.表格中没有列元素，列的个数取决于行的单元格个数。
4.表格不要纠结于外观，那是CSS的作用。
十一、表单标签
在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。
input控件
| 属性 | 属性值 | 描述 |
|---|---|---|
| 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 | 定义选择控件默认被选中的项 |
| maxlength | 正整数 | 控件允许输入的最多字符数 |