零基础HTML基础的学习记录

一、简介

1.网页的基本组成
图片、文字、视频等
2.什么是HTML
超文本标记语言
3.常用的浏览器
IE、火狐、谷歌、Safari、Opera

浏览器	内核
IE	Trident
firefox	Gecko
Safari	Webkit
chrome/Opera	Bink

4、Web标准的三大组成
结构、表现、行为

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
行为	行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript

二、HTML（一）

1.HTML语法规范
1.1 基本语法概述
（1） HTML标签是由尖括号包围的关键词
（2）HTML标签通常是成对出现的(双标签)
（3） 有些特殊的标签必须是单个标签(单标签)
1.2标签关系
（1）双标签的关系可以分成两种
包含关系和并列关系

2.HTML基本标签结构

3.开发工具vscode的使用
（1）双击打开软件
（2）新建文件（Ctrl+N）
（3）保存（Ctrl+S），注意要保存为.html文件
（4）Ctrl+加号键（放大）,Ctrl+减号键（缩小）
（5）生成页面的骨架结构
输入！，按下Tab键
（6）利用插件在浏览器中预览页面；单击右键选择在哪个页面中浏览

4.HTML 常用标签
（1）标题标签

  <h1>-<h6>

（2）段落标签

<p></p>

（3）换行标签

<br/>

5.图片标签中alt与title的区别
alt：图片加载不出来显示的文字
title：鼠标移至图标处即可显示

6.相对路径（图片相对于HTML页面的位置）
（1）同一级路径
直接写图片名
（2）下一级路径
文件名(图片存放的文件夹)/图片名
（3）上一级路径
…/图片名

7.超链接标签

<a href=“跳转目标” target="目标窗口的弹出方式">

target 打开窗口的方式
_self:当前窗口打开
_blank:在新窗口中打开

7.1链接分类
（1）外部链接
目标网址等的地址
（2）内部链接
直接写文件名
（3）下载链接
在href里面地址是一个文件或者压缩包时，会下载这个文件
（4）空连接

<a href="#"></a>

（5）锚点链接
点击链接快速定位到页面中的某个位置

• 在链接文本的href属性中，设置属性值为#名字的形式，如

<a href="#two">第二集</a>

• 在目标位置标签，里面添加一个id属性 = 上述的名字

<h3 id="two">第二集详情</h3>

8.特殊字符
1、空格符：&nbsp
2、小于号：&lt
3、大于号：&gt

三、HTML（二）

一、表格标签
1、表格的主要作用
主要用于显示、展示数据
2、 表格的基本语法

<table>
	<tr>
		<td>单元格内的文字</td>
		...
	</tr>
	...
</table>

3、 合并单元格
（1）跨行合并：rowspan=“合并单元格的个数”(上侧)
（1）跨列合并：colspan=“合并单元格的个数”（左侧）

二、列表
1、无序标签

<ul>
	<li></li>
</ul>

2、有序列表

<ol>
	<li></li>
</ol>

3、自定义列表

<dl>
	<dt>最大的</dt>
	<dd>围绕（dt的）</dd>
</dl>

三、表单标签

1、表单的组成
表单域、表单控件（表单元素）、提示信息
2、表单域

<form action="demo.php" method="POST" name="name1"></form>

3、input标签
3.1 type属性

属性	用途
text	可输入文本
password	密码不可见
radio	单选
checkbox	多选
submit	提交
reset	重置
button	按钮
file	上传文件

3.2 name属性
单选/复选按钮用同一个name
3.3 value
只在文本框中可看到值
3.4 checked(针对于单选框和复选框)
首次加载时被选中

4、label标签
label标签的for属性与相关元素的id属性相同

<label for="text"></label>
<input type="text" id="text">

5、下拉表单
selected=“selected”(默认选中项)

<select>
	<option></option>
</select>

6、textarea文本域
多行文本输入
（以下无需记住）
cols:一行可以输入几个字
rows：可以输入几行