HTML基础笔记 (案例+代码)完整版
HTML入门笔记目录
- 一、HTML 介绍
-
- 1、HTML是什么?
- 2、什么是HTML标签?
- 二、HTML 文档结构
-
- 1、HTML基本结构
- 2、文档类型声明标签
- 3、lang语言属性
- 4、字符集与编码
- 三、HTML 基础标签
-
- 1、标题标签
- 2、段落标签
- 3、空格标签
- 4、注释标签
- 5、换行标签
- 6、盒子标签
- 7、水平线标签
- 8、预格式化文本标签
- 9、文本格式化标签
- 10、图像标签
- 11、超链接标签
- 12、列表标签
- 13、表格标签
- 14、表单标签
- 四、HTML 基础 (理解)
-
- 15、文本框和文本域的区别
-
- 一、文本框与密码框
- 二、select下拉表单
- 三、文件域和按钮
- 四、单选框和复选框
- 16、常见属性解析
- 17、特殊字符
- 18、锚点定位
一、HTML 介绍
1、HTML是什么?
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言,而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
2、什么是HTML标签?
HTML 标签是由尖括号包围的关键词
HTML 标签通常是成对出现的,例如和
有些特殊的标签必须是单个标签,例如
标签对中的第一个标签是开始标签,第二个标签是结束标签
<html><head><title>前端开发</title></head><body><h1>HTML</h1><p> HTML超文本标记语言,是用来描述网页的一种标准语言。</p></body></html>
二、HTML 文档结构
1、HTML基本结构
标签名 | 定义 | 说明 |
---|---|---|
|
文档声明 | 声明这是一个HTML文档 |
|
HTML标签 | 告诉网页浏览器,整个网页是从这里开始的,然后到结束 |
|
文档的头部 | 在head标签中必须包含title标签 |
|
文档的标题 | 显示在搜索引擎结果中的页面标题 |
|
文档的主体 | 元素包含文档的所有内容 |
HTML 文档是用来描述网页的,包含 HTML 标签和纯文本。
HTML文档的后缀名必须是.html
或.htm
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容
2、文档类型声明标签
是文档类型声明标签
声明位于文档中的最前面的位置
作用:告诉浏览器使用哪种HTML版本来显示网页
3、lang语言属性
<html lang="en">
en
定义语言为英语zh-CN
定义语言为中文
lang语言属性作用:定义当前文档显示的语言
4、字符集与编码
<meta charset="UTF-8">
标签:元数据
- charset 属性:用来规定 HTML 文档应该使用哪种字符编码
- 常用的编码有GB2312、GBK 和 UTF-8,UTF-8基本包含了全世界所有国家需要用到的字符
三、HTML 基础标签
1、标题标签
<body> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6></body>
- 标题标签 可使内容加粗
- 标签序号越小 字号越大
- 每个标题独占一行
2、段落标签
<body><p>段落标签</p> <p>段落1</p> <p>段落2</p></body>
- 可以对HTML文档内容分为多个段落。
3、空格标签
- 在html代码中每输入一个
4、注释标签
- 注释的快捷键是:
ctrl + /
或者ctrl +shift + /
- 注释是给人看的,目的是为了更好的解释这部分代码是干啥的, 程序是不执行这个代码的
5、换行标签
<br>
- 单词缩写: break 打断 ,换行
- 在HTML中,如果希望某段文本强制换行显示,就需要使用换行标签
6、盒子标签
和
<div> 这是头部 </div> <span>今日价格</span>
是没有语义的 是我们网页布局主要的2个盒子
一行上可以放多个
7、水平线标签
<hr/>是单标签
- 单词缩写: horizontal 横线
就是创建横跨网页水平线的标签
- 水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。
8、预格式化文本标签
<pre> 此例演示如何使用 pre 标签 对空行和 空格 进行控制</pre>
- 预格式化文本就是按照我们预先写好的文字格式来显示页面, 保留空格和换行
9、文本格式化标签
标签 | 显示效果 |
---|---|
和
|
加粗 |
和
|
斜体 |
和
|
加删除线 |
和
|
加下划线 |
只是加粗。
除了可以加粗还有强调的意思,语义更强烈。
10、图像标签
语法如下:
<img src="图像URL" />
- 该语法中src属性用于指定图像文件的路径和文件名
属性 | 属性值 | 说明 |
---|---|---|
src |
URL | 图像的路径 |
alt |
文本 | 图像不能显示时的替换文本 |
title |
文本 | 鼠标悬停时显示的内容 |
width |
像素 | 设置图像的宽度 |
height |
像素 | 设置图像的高度 |
border |
数字 | 设置图像边框的宽度 |
注意:
- 标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。
- 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
- 任何标签的属性都有默认值,省略该属性则取默认值。
- 采取 键值对 的格式 key=“value” 的格式
下面为参考代码:
<body></body>
11、超链接标签
<body> <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a></body>
属性 | 作用 |
---|---|
href |
指定链接目标的url地址 |
target |
指定连接页面的打开方式,_self 为默认值,_blank 为在新窗口中打开 |
注意:
- href="#",表示该链接暂时为一个空链接
12、列表标签
标签名 | 定义 | 说明 |
---|---|---|
|
有序列表 | 包含
,有顺序,使用情况较少 |
|
无序列表 | 包含
,无顺序,最常用的列表 |
|
自定义列表 | 包含
和
,
和
里面可以放任何标签 |
<body> <ul> <li>无序标签</li> <li>无序标签</li> </ul> <ol> <li>有序标签</li> <li>有序标签</li> </ol> <dl> <dt>自定义标签</dt> <dd>自定义标签</dd> </dl></body>
13、表格标签
<body> <table> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>小明</td> <td>男</td> <td>22</td> </tr> <tr> <td>小红</td> <td>女</td> <td>21</td> </tr> </table></body>
用于定义一个表格标签。
用于定义表格中的行,必须嵌套在
14、表单标签
一个完整的表单通常由表单域,表单控件和提示信息三部分组成
1、表单域
标签被用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。
<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件</form>
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post。 |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单。 |
注意:
- 每个表单都应该有自己表单域。我们现在做页面,不写看不到效果,但是 如果后面学 ajax 后台交互的时候,必须需要 form表单域。
2、表单控件
① input 控件:
<input type="属性值" value="你好">
标签为单标签 input是输入的意思
type
属性设置不同的属性值用来指定不同的控件类型- 常用属性
② textarea 控件
<textarea col="列" row="行"> 文本内容</textarea>
- 通过textarea控件可以轻松创建多行文本输入框.
- cols=“列数” rows=“行数”
③ 标签
1、第一种用法就是用label直接包括input表单。
<label> 用户名: <input type="radio" name="usename" value="请输入用户名"> </label>
- 适合单个表单选择
2、第二种用法 for 属性规定 label 与哪个表单元素绑定。
- for的属性值应和id的属性值相同
<label for="sex">男</label><input type="radio" name="sex" id="sex">
用于绑定一个表单元素
- 当我们鼠标点击
里面的文字时, 光标会定位到指定的表单里面,用来增加用户体验
四、HTML 基础 (理解)
15、文本框和文本域的区别
表单 | 名称 | 区别 | 默认值显示 | 应用场景 |
---|---|---|---|---|
input type="text" |
文本框 | 只能显示一行文本 | 单标签,通过value显示默认值 | 用户名、昵称、密码等 |
textarea |
文本域 | 可以显示多行文本 | 双标签,默认值写到标签中间 | 留言板 |
- 以下为案例:
一、文本框与密码框
<body> <form> 账号:<input type="text"> 密码:<input type="password"> </form></body>
type
属性设置为text
是文本框type
属性设置为password
是密码框
二、select下拉表单
<form> <select> <option selected="selected">地区</option> <option>北京</option> <option>上海</option> </select></form>
中至少包含一对
- 在
中定义
selected=“selected”
时,当前项即为默认选中项 - 但是我们实际开发会用的比较少
三、文件域和按钮
<body> <form> <input type="button" value="浏览文件"> <br> 上传文件:<input type="file"> </form></body>
type
属性设置为file
:是一个文件域,可以上传文件type
属性设置为button
:是一个按钮
四、单选框和复选框
<body> <form> 性别:男<input type="radio" name="sex"> 女 <input type="radio" name="sex"> 选课:政治<input type="checkbox" name="subject"> 历史<input type="checkbox"> 地理<input type="checkbox" name="subject"> </form></body>
type
属性设置为radio
是单选框type
属性设置为checkbox
是复选框name
是表单元素的名字,单选框和复选框应有相同的name值
16、常见属性解析
1、type 属性
- 这个属性通过改变值,可以决定了你属于那种input表单。
- 比如
type = 'text'
就表示 文本框 可以做 用户名, 昵称等。 - 比如
type = 'password'
就是表示密码框 用户输入的内容 是不可见的。
用户名: <input type="text" /> 密 码:<input type="password" />
2.、value属性
用户名:<input type="text" name="username" value="请输入用户名">
value
表示默认的文本值。- 有些表单想刚打开页面就默认显示几个文字,就可以通过这个value 来设置。
3、 name属性
用户名:<input type="text" name=“username” />
name
主要作用就是用于区别不同的表单
4、checked属性
性 别:<input type="radio" name="sex" value="男" checked="checked" />男<input type="radio" name="sex" value="女" />女
- 表示默认选中状态。 较常见于 单选按钮和复选按钮。
5、input属性小结
17、特殊字符
- 一些特殊的符号,我们再html 里面很难或者 不方便直接 使用, 我们此时可以使用下面的替代代码。
- 字符的代码是以运算符
&
开头,以分号运算符;
结尾。 - 他们不是标签,而是符号
18、锚点定位
通过创建锚点链接,用户能够快速定位到目标内容。
创建锚点链接分为两步:
1. 使用相应的id名标注跳转目标的位置。 (找目标) <h3 id="two">第2集</h3> 2. 使用<a href="#id名">链接文本</a>创建链接文本(被点击的) (拉关系) 我也有一个姓何的朋友。 <a href="#two">
快速记忆法:
好比找个人办事, 首先找到他,然后拉关系,最后看效果