HTML学习笔记

龙槑

已于 2022-04-26 15:52:37 修改

阅读量88

点赞数

文章标签： html html5

于 2022-01-01 18:34:38 首次发布

本文链接：https://blog.csdn.net/qq_53231262/article/details/122269657

版权

本文详细介绍了HTML的基础标签和属性，包括标题标签h1-h6、段落p和换行br、文本格式化标签b和i、div和span、图像img、路径、超链接a以及表格和列表的使用。此外，还讲解了表单元素如input、select和textarea的使用，以及表单的提交方式和属性。内容涵盖了HTML文档结构、语义化、样式控制和交互功能的基础知识。

摘要由CSDN通过智能技术生成

<!DOCTYPE>标签

<!DOCTYPE html>

意思是：当前页面采取的是html5版本来显示页面2
位置：必须在第一行

lang语言

<html lang="en">

en定义语言为英语
zh-CN定义语言为中文
中文也可以写英文，英文也可以写中文

charset字符集

<meta charset="UTF-8">

标签的charset属性用来规定HTML文档应该使用那种字符编码

charset常用的值：UTF-8->万国码,基本包含全世界所有国家需要用到的字符

HTML常用标签（上）

1. 标签语义

在合理的地方给一个最为合理的标签，可以让界面结构更清晰

2. 标题标签 h1-h6(重要)

<h1>我是一级标题</h1>

单词head的缩写，以为头部、标题

标签语义:作为标题使用，并且依据重要性增减

特点：1. 标题文字会变粗，字体一次变大

一个标题独占一行

<h1>标题一共六级选</h1>
<h2>文字加错一行显</h2>
<h3>由大到小依次减</h3>
<h4>从重到轻随之变</h4>
<h5>书法规范书后写</h5>
<h6>具体效果刷新现</h6>
---giao

3. 段落和换行标签 p标签和br标签（重要）

<p>我是一个段落标签</p>

标题语义：HTML文档分割成若干段落

特点：1. 文本根据浏览器宽度自动换行

段落段落之间保有空隙

<br>

标题语义 ：强制换行标签

特点：单标签，跟段落不一样，空隙大

4.文本格式化标签：b标签和i标签

文字设置加粗、斜体、下划线等效果，利用文本格式化表桥实现

标签语义 ：突出重要性，比普通文字更重要

<b>我是加粗标签</b>
<i>我是斜体标签</i>
<s>我是删除线标签</s>
<u>我是下划线标签</u>

重点记住：加粗和斜体

5. div标签和span标签

这两个标签没有语义的，他们就是一个盒子，用来装内容的，用来布局的

<div>我是一个div标签，我一个人占一行</div>
<span>百度</span>
<span>新浪</span>
<span>搜狐</span>

div：大盒子，span：小盒子

6. 图像标签img（重点）

img标签用于定义HTML页面中的图像（src必须写）

<img src="图片.jpg" alt="替换文字，如果图片找不到文字替换">

src是img标签的必须属性，用于指定图形文件的路径和文件名

其他属性：

alt：替换文字，如果图片找不到文字替换
title：提示文字，鼠标放上去会有提示
width：给图像设置宽度（宽度高度设置一个就行，会等比例缩放）
height：设置图像高度
border：边框粗细

图像标签的使用：<br>
<img src="图片.jpg" alt="替换文字，如果图片找不到文字替换">
<h4>title提示文本</h4>
<img src="图片.jpg" alt="替换文字，如果图片找不到文字替换" title="对象">
<h4>设置图像宽度</h4>
<img src="图片.jpg" alt="替换文字，如果图片找不到文字替换" title="对象" width="500" >
<h4>设置图像边框</h4>
<img src="图片.jpg" alt="替换文字，如果图片找不到文字替换" title="对象" width="500" border="15">

注意点：

标签可以有多个属性，必须写在标签名后面
属性不分先后顺序，属性之间要用空格隔开
属性采用键值对形式：key=“value”，属性=“属性值”

7. 路径（重点）

目录文件夹和根目录

目录文件夹就是普通文件夹，存放做网站相关的文件，.html

根目录：打开目录文件夹的第一层
路径

相对路径：以引用文件所在位置为参考基础而建立的目录路径。就是图片相对于HTML的位置
```
   	1. 同一级路径
      	2. 下一级路径 /
      	3. 上一级路径 ../
```
绝对路径：是指目录下的绝对位置，直接到达目的位置，通常是从盘符开始的路径或者完全网站地址

8. 超链接标签->锚标签：a标签（重点）

超链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性：

href：用于指定链接目标的url地址（必须属性）
target：用于指定链接页面的打开方式，其中默认值为_self , _blank为新窗口中打开方式
_self：在当前窗口打开， _blank ：另打开一个新页面

<h4>外部链接</h4>
<a href="http://www.baidu.com" target="">百度</a>

超链接的分类

外部链接（上面）
内部链接：网站内部之间的相互连接

<h4>内部链接</h4>
<a href="简介.html" target="_blank">公司简介</a>

空链接：如果当前没有确定的链接目标

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

<h4>空链接</h4>
<a href="#" target="_blank">公司地址</a>

下载文件：如果href里面地址是一个文件或者压缩包，会下载这个文件

<h4>下载链接：地址链接的是：文件.exe或者是zip等压缩形式</h4>
<a href="图片.zip">下载文件</a>

网页元素链接：在网页中的各项网页元素，如文本、图像、表格、音频、视频等都可以添加超链接

<h4>网页元素链接</h4>
<a href="http://www.baidu.com"><img src="图片.jpg" alt=""></a>

锚点链接：点击链接可以跳转到页面的某个位置

<h4><a href="#第二季">第二季</a></h4>

href里面是id选择器

9. 注释

注释以“ ”结束，快捷键ctrl+/
特殊字符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ISSndDLJ-1641033207219)(D:\A_study\html-css\study_image\html_特殊字符.jpg)]

HTML常用标签（下）

1. 表格的使用table

表格是用于显示、展示数据，不是用来布局页面的。

基本语法

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

table用于定义表格的标签
tr定义行，必须嵌套在table里面
td是定义表格中的单元格，必须嵌套在tr里面

01-th：表头的使用

一般在第一行或第一列使用，文本内容加粗居中显示

<th>学号</th>

02-表格属性

属性实际不常用，后面通过css来设置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DlHgYOIb-1641033207219)(D:\A_study\html-css\study_image\html_表格属性.jpg)]

03-表格结构标签

thead标签：表格的头部区域，必须有tr标签，一般在第一行

tbody标签：表格主体区域，主要用于放数据本体

04-合并单元格

跨行合并：rowspan=“合并单元格的个数”

跨列合并：colspan=“合并单元格的个数”

2. 列表使用（重点）

01-无序列表基本语法（重点）

ul标签（定义列表），li标签（描述每一个项目/名字）

<ul>
        <li>列表1</li>
        <li>列表2</li>
    </ul>

列表是没有顺序的，并列的
ul中只能嵌套li标签，不能嵌套别的标签
li标签里面可以放任何标签

02-有序列表（理解）

ol标签（定义列表），li标签（描述每一个项目/名字）

<ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
    </ol>

03-自定义列表（重点）

dl标签（定义列表），dt（定义项目/名字）和dd（描述每一个项目/名字）

dl只能包含dt和dd标签

<dl>
        <dt>名词</dt>
        <dd>解释1</dd>
        <dd>解释2</dd>
</dl>

04-列表总结

标签名	定义
ul	无序标签
ol	有序标签
dl	自定义标签

3.表单

01-表单组成

表单域、表单控件和提示信息3个部分构成

02-表单域

form会把它范围内的表单元素信息提交给服务器

<form action="url地址" method="提交方式" name="表单域名称">
        各种表单元素控件
</form>

action：接受处理表单数据的服务器程序的url地址

method：提交方法，其取值为get或post

name：名称

03-表单控件（表单元素）

input表单元素

<input type="属性值">

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UAfs4adi-1641033207219)(D:\A_study\html-css\study_image\html_表单属性.jpg)]

文本框密码框

用户名：<input type="text"><br>
<!--password密码框，用户看不见密码-->
密&nbsp;&nbsp;&nbsp;码：<input type="password">

单选按钮和复选框

<!--        radio单选按钮-->
性别：男 <input type="radio" name="sex" id="m"> 女 <input type="radio" name="sex" id="f">
        <br>
<!--        checkbox：复选框-->
爱好：吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">

input名字的属性

name：定义input元素的名字

value：规定input元素的值

checked：规定input元素首次应当被选中

maxlength：规定input字段中字符的最大长度
input提交和重置按钮

<input type="submit" value="提交按钮">
<input type="reset" value="重复按钮">

普通按钮和文件域

<!--        后期搭配JavaScript使用-->
<input type="button" value="获取短信验证码">
<br>
<!--        文件域：上传文件使用-->
上传头像<input type="file">

label标签

label标签为input元素定义标注（标签）

label标签用于绑定一个表单元素，点击label标签内的文本时，浏览器自动将焦点（光标）转到对应的表单元素上

<!--        label中id与input中的id对应-->
性别： <input type="radio" name="sex" id="m">
<label for="m">男</label>
<input type="radio" name="sex" id="f">
<label for="f">女</label>

下拉表单元素select

基本语法

<select>
  <option >选项1</option>
  <option >选项2</option>
  <option >选项3</option>
</select>

select至少包含一对option。

option中可定义selected=“selected”时，默认被选中。

文本域textarea表单元素

用于定义多行文本输入控件

基本语法

文本域：
<textarea  cols="20" rows="3">
	文本内容
</textarea>

cols：每行可以显示的字符数，rows：显示的行数

实际开发中都是用css来改变大小的

查阅文档

W3c学习

女


8. ##### 下拉表单元素select

基本语法

```html
<select>
  <option >选项1</option>
  <option >选项2</option>
  <option >选项3</option>
</select>

select至少包含一对option。

option中可定义selected=“selected”时，默认被选中。

文本域textarea表单元素

用于定义多行文本输入控件

基本语法

文本域：
<textarea  cols="20" rows="3">
	文本内容
</textarea>

cols：每行可以显示的字符数，rows：显示的行数

实际开发中都是用css来改变大小的

查阅文档

W3c学习

龙槑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

HTML学习笔记

文章目录

<!DOCTYPE>标签

lang语言

charset字符集

HTML常用标签（上）

1. 标签语义

2. 标题标签 h1-h6(重要)

3. 段落和换行标签 p标签和br标签（重要）

4.文本格式化标签：b标签和i标签

5. div标签和span标签

6. 图像标签img（重点）

7. 路径（重点）

8. 超链接标签->锚标签：a标签（重点）

9. 注释

HTML常用标签（下）

1. 表格的使用table

01-th：表头的使用

02-表格属性

03-表格结构标签

04-合并单元格

2. 列表使用（重点）

01-无序列表基本语法（重点）

02-有序列表（理解）

03-自定义列表（重点）

04-列表总结

3.表单

01-表单组成

02-表单域

03-表单控件（表单元素）

input表单元素

文本框密码框

单选按钮和复选框

input名字的属性

input提交和重置按钮

普通按钮和文件域

label标签

下拉表单元素select

文本域textarea表单元素

查阅文档

文本域textarea表单元素

查阅文档