目录
一、html基础知识
1.lang语言种类
en定义语言为英语
zh-CN定义语言为中文
2.字符集
在<head>标签内,可以通过<meta>标签的charset属性来规定HTML文档应使用哪种字符编码。
<meta charset=”UTF-8” />
charset常用值有:GB2312、BIG5、GBK和UTF-8
GB2312 | BIG5 | UTF-8 |
简体中文 | 繁体中文 | 都包含(万国码) |
二、部分标签语法及注意事项
1.段落标签和换行标签
<p></p>是段落标签,并且段落与段落之间会有间距
<br />是换行标签
2.布局标签
这两个标签都是用来布局,但是一行只能放一个<div></div>,<span></span>一行可以放多个。且<div></div>比<span></span>要大
3.图像标签
src是<img>标签的必须属性,它用于指定图像文件的路径和文件名
图像标签的其它属性:
属性 | 属性值 | 说明 |
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本。图像不能显示的文字 |
title | 文本 | 提示文本。鼠标放到图像上显示文字 |
width | 像素 | 设置图像的宽度 |
heigh | 像素 | 设置图像的高度[宋1] |
border | 像素 | 设置图像的边框粗细 |
①图像标签可以拥有多个属性,必须写在标签名的后面。
②属性之间不分前后顺序,标签名与属性、属性与属性之间均以空格分开。
③属性采取键值对的格式,即key=”value”的格式,属性=”属性值”
图片引用的相对路径
相对路径分类 | 符号 | 说明 |
同一级路径 | 图像文件位于HTML文件同一级 如<img src=”baidu.gif” /> | |
下一级路径 | / | 图像文件位于HTML文件下一级 如<img src=”images/baidu.gif” /> |
上一级路径 | ../ | 图像文件位于HTML文件上一级 如<img src=”../baidu.gif” /> |
4.超链接标签
语法格式
<a href=”跳转目标” target=”目标窗口的弹出方式”>文本或图像</a>
属性 | 作用 |
href | 用于指定链接目标url地址(必须属性) |
target | 用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口打开 |
链接分类
①外部链接:例如<a href=”http://www.baidu.com”>百度</a>
②内部链接:网页内部页面之间的相互链接,直接链接内部页面名称即可,例如<a href=”index.html”>首页</a>
③空链接:如果当时没有确定链接目标时<a href=”#”>首页</a>
④下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件
⑤网页元素链接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接
⑥锚点链接:当我们点击链接,可以快速定位到页面中的某个位置
•在链接文本的href属性中,设置属性值为#名字的形式,如<a href=”#two”>name</a>
•找到目标位置标签,里面添加一个id属性=刚才的名字,如<h3 id=”two”>name</h3>
5.注释
<!--注释语句--> 快捷键:ctrl + /
6.特殊字符
特殊字符 | 描述 | 字符的代码 |
| 空格符 | |
< | 小于号 | &It; |
> | 大于号 | > |
7.表格标签
基本语法
<table>
<thead>
<tr>
<th>表头,表格内文字加粗居中显示</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格内的文字</td>
…
</tr>
<tbody>
…
</table>
①<table></table>是用于定义表格的标签。
②<tr></tr>标签用于定义表格中的行,必须嵌套在<table></table>标签中。
③<td></td>用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。
④字母td指表格数据,即数据单元格的内容。
⑤<thead></thead>用于定义表格的头部;
<tbody>用于定义表格的主体</tbody>。
表格属性
属性名 | 属性值 | 描述 |
align | left、center、right | 规定表格相对周围元素的对齐方式 |
border | 1或“” | 规定表格单元是否拥有边框,默认为“”,表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认为1像素 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素 |
width | 像素值或百分比 | 规定表格的宽度 |
合并单元格
①先确定是跨行还是跨列合并。
•跨行合并:rowspan=“合并单元格的个数”
•跨列合并:colspan=“合并单元格的个数”
②找到目标单元格。写上合并方式=合并的单元格数量。比如:<td colspan=”2”></td>
③删除多余的单元格。
8.列表标签
无序表签
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
…
</ul>
①无序表签的各个列表项之间没有顺序级别之分,是并列的。
②<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
③与之间相当于一个容器,可以容纳所有元素。
④无序列表会带有自己的样式属性,但在实际使用时,我们会使用CSS来设置。
有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
…
</ol>
①<ol></ol>中只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
②<li>与</li>之间相当于一个容器,可以容纳所有元素。
③有序列表会带有自己样式属性,但在实际使用时,我们会使用CSS来设置。
自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
①<dl></dl>里面只能包含<dt>和<dd>
②<dt>和<dd>个数没有限制,经常是一个<dt>对应多个<dd>。
9.表单标签
<form action=”url地址” method=”提交方式” name=”表单域名称”>
各种表单元素控件
</form>
属性 | 属性值 | 作用 |
action | 地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域 |
表单元素
⑴input标签
①type属性的属性值及其描述
属性值 | 描述 |
button | 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本)。 |
checkbox | 定义复选框。 |
file | 定义输入字段和“浏览”按钮,供文件上传。 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段,该字段中的字符被掩码。 |
radio | 定义单选按钮。 |
reset | 定义重置按钮,重置按钮会清除表单中的所有数据。 |
submit | 定义提交按钮,提交按钮会把表单数据发送到服务器。 |
text | 定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字符。 |
②其余常用属性
属性 | 属性值 | 描述 |
name | 由用户自定义 | 定义input元素的名称。 |
value | 由用户自定义 | 规定input元素的值。 |
checked | checked | 规定此input元素首次加载时应该被选中。 |
maxlength | 正整数 | 规定输入字段中的字符的最大长度。 |
•••name和value是每个表单元素都有的属性值,主要给后台人员使用。
•name表单元素的名字,要求单选按钮和复选框要有相同的name值。
•checked属性主要针对于单选按钮和复选框,主要作用一打开页面,就要可以默认选中某个表单元素。
•maxlength是用户可以在表单元素输入的最大字符数,一般较少用。
⑵<label>标签
<label for=”sex”></label>
<input type=”radio” name=”sex” id=”sex”>
①<label>标签为input元素定义标注(标签)
②<label>标签用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。
③<label>标签的for属性应当与相关元素的id属性相同。
⑶<select>
<select>
<option></option>
<option></option>
<option></option>
…
</select>
下拉标签,用于当有多个选项去选择时节约空间。
⑷<textarea>
<textarea rows=”3” cols=”20”>
文本内容
</textarea>
①通过<textarea>标签可以轻松地创建多行文本输入框。
②cols=“每行中的字符数”,rows=“显示的行数”,我们在实际开发中不会使用,都是用CSS来改变大小。
三、标签
<p></p> 段落标签
<br /> 换行标签
<strong></strong> 加粗
<b></b>
<em></em> 倾斜
<i></i>
<del></del> 删除线
<s></s>
<ins></ins> 下划线
<u></u>
<div></div> 无语义,用来布局
<span></span> 无语义,用来布局
<img src=”图像URL” /> 图片标签
<a></a> 超链接
<table></table> 表格标签
<thead></thead> 表格头部
<tbody></tbody> 表格主体
<tr></tr> 行
<td></td> 行中每个元素
<th></th> 表头部分的元素
<ul></ul> 无序标签
<li></li>
<ol></ol> 有序标签
<li></li>
<dl></dl> 自定义列表
<dt></dt>
<dd></dd>
<form></form> 表单域
<input></input> 输入
<label></label> 标注标签
<select></select> 下拉列表
<textarea></textarea> 文本框标签
[宋1]高度与宽度一般只设置其中之一,另一个会等比缩放