HTML基础笔记（pink）

张美什么

已于 2022-12-12 14:41:50 修改

阅读量266

点赞数 1

文章标签： html css 前端

于 2022-12-11 21:45:50 首次发布

本文链接：https://blog.csdn.net/m0_45818748/article/details/128265709

版权

一、HTML基础

1 认识网页

网页：文字、图像、超链接、音频、视频以及Flash等。

浏览器：是网页显示、运行的平台。

浏览器内核：排版引擎、解释引擎、渲染引擎。

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
firefox	Gecko	可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safari	webkit	现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕在厕所里面了。
chrome	Chromium/Blink	在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera	blink	现在跟随chrome用blink内核。

2 Web标准（不同的浏览器展示的效果统一）

结构标准用于对网页元素进行整理和分类(HTML)

表现标准用于设置网页元素的版式、颜色、大小等外观属性(CSS)

行为标准用于对网页模型的定义及交互的编写(JavaScript)

二、结构标签

1 HTML骨架格式

<!-- 页面中最大的标签 根标签 -->
<html>
    <!-- 头部标签 -->
    <head>     
        <!-- 标题标签 -->
        <title></title> 
    </head>
    <!-- 文档的主体 -->
    <body>
    </body>
</html>

1. HTML 标签是由尖括号包围的关键词，例如 <html>

2. HTML 标签通常时成对出现的，例如 <html> 和 </html> ，我们称为双标签。

3. 有些特殊的标签必须是单个标签（极少情况），例如 <br />，我们称为单标签。

2 文档类型声明标签<!DOCTYPE html>

<!DOCTYPE html>

1.<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前

2.<!DOCTYPE> 不是一个 HTML 标签，它就是文档类型声明标签

3 lang语言种类

<html lang="en">

1.en 定义语言为英语

2.zh-CN 定义语言为中文

4 字符集

<meta charset="UTF-8">

charset 常用的值有：GB2312、BIG5、GBK 和 UTF-8，其中 UTF-8 被称为万国码，基本包含了全世界所有国家需要用到的字符

三、常用标签

1 标题标签

<body>
    <h1> 一级标题</h1>
    <h2> 二级标题</h2>
    <h3> 三级标题</h3>
    <h4> 四级标题</h4>
    <h5> 五级标题</h5>
    <h6> 六级标题</h6>
</body>

1.加了标题的文字会变的加粗，字号也会以此变大

2.一个标题独占一行

2 段落标签

<p>段落标签</p>

1.paragraph 的缩写

2.文本在一个段落这种会根据浏览器窗口的大小进行自动换行

3.段落和段落之间保有空隙

3 换行标签

<br />

1.<br /> 是个单标签

2.<br /> 标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距

4 文本格式化标签

语义	标签
加粗	<strong></stroung>
倾斜	<em><em>
~~删除线~~	<del></del>
下划线	<ins></ins>

5 盒子标签

<div>大盒子</div>
<span>小盒子</span>

1. <div></div>: 一行只能放一个大盒子

2.<span></span>: 一行可以放多个小盒子

6 图像标签

<img src="pink1.jpg" alt="图片撕裂提示信息" title"鼠标悬挂提示信息" />

属性	属性值	描述
src	url	图像的路径
alt	文本	图像不能显示时替换文本
title	文本	鼠标悬停时显示的内容
width	像素（XHTML不支持%页面百分比）	图像的宽度
height	像素（XHTML不支持%页面百分比）	图像的高度
border	数字	图像边框的宽度

7 路径

7.1 相对路径

相对路径分类	符号	说明
同一级路径		图形文件位于 HTML 文件同一级如 <img src="1.png">
下一级路径	/	图形文件位于 HTML 文件下一级如 <img src="images/1.png">
上一级路径	../	图形文件位于 HTML 文件上一级如 <img src="../1.png">

7.2 绝对路径

1.绝对路径：是指目录下的绝对位置，直接达到目标位置，通常是从盘符开始的路径

8 超链接标签

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

属性	作用
href	用于指定链接目标的url地址。必须属性
target	用于指定连接页面的打开方式。_self 为默认值， _blank 为在新窗口中打开

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

<a href="img.zip"></a>

9 锚点链接

<a href = "#two">点我跳转</a>
<h3 id = "two">跳转位置</h3>

1.在链接文本的 href 属性中，设置属性值为 #名字

2.找到目标位置标签，里面添加一个 id属性=刚才的名字

10 注释

<!-- 注释语句 -->

1.注释快捷键为 ctrl + /

2.注释以  结束

11 特殊字符

特殊字符	描述	字符的代码
	空格符
<	小于号	<
>	大于号	>
&	和号	&
￥	人民币	¥
©	版权	©
®	注册商标	®
℃	摄氏度	°
±	正负号	±
×	乘号	×
÷	除号	÷
²	平方2(上标2)	²
³	平方3(上标3)	³

12 表格标签

12.1 表格属性

属性名	属性值	描述
border	1或者" "	设置表格的边框（默认border=“0”无边框）
cellpadding	像素值	规定单元边沿于其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度
height	像素值或百分比	规定表格的高度
align	left,center,right	规定表格相对周围元素的对齐方式

12.2 表格结构标签

1.<thead></thead> 头部区域，<thead> 内部必须拥有 <tr> 标签，一般是位于第一行

2.<tbody></tbody> 主体区域，主要是用于放数据本体

3.<tfoot></tfoot>放表格的脚注之类。

4.以上标签都是放在 <table></table> 标签中

12.3 合并单元格

1.跨行合并：rowspan="合并单元格的个数"

2.跨列合并：colspan="合并单元格的个数"

表格综合案例：

<body>
    <table alian=center border="1" cellpadding="20" cellspacing="0" width="500">
        <caption>我是表格标题</caption><!-- 紧跟table之后 -->
        <tr>
            <th>第一行第一格</th>
            <th>第一行第二格</th>
            <th>第一行第三格</th>
        </tr>
        <tr>
            <td>第二行第一格</td>
            <td colspan="2">第二行第二格</td>
        </tr>
        <tr>
            <td rowspan="2">第三行第一格</td>
            <td>第三行第二格</td>
            <td>第三行第三格</td>
        </tr>
        <tr>
            <td>第四行第二格</td>
            <td>第四行第三格</td>
        </tr>
    </table>
</body>

13 列表标签

标签名	定义	说明
<ul></ul>	无序列表	里面只能包含li，没有顺序，li里面可以包含任何标签
<ol></ol>	有序列表	里面只能包含li，有顺序
<dl></dl>	自定义列表	里面只能包含dt（一级标题）和dd（二级标题），dt和dd里面可以放任何标签

14 表单标签

14.1 表单域

<form action="url地址" method="提交方式" name="表单域的名称">
</form>

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

14.2 表单控件(表单元素)

①input输入表单元素

1.input 输入表单元素

2.input 是个单标签， type 属性设置不同的属性用来指定不同的控件类型

常用属性：

属性	属性值	描述
type	test	定义单行的输入字段，用户可在其中输入文本，默认宽度为 20 个字符
	password	定义密码字段。该字段中的字符被掩码
	radio	定义单选按钮
	checkbox	定义复选框
	image	定义图像形式的提交按钮
	file	定义输入字段和"浏览"按钮，供文件上传
	button	定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)
	submit	定义提交按钮。提交按钮会把表单数据发送到服务器
	reset	定义重置按钮。重置按钮会清楚表单中的所有数据
name	由用户自定义	定义 input 元素的名称
value	由用户自定义	规定 input 元素的值
size	正整数	input控件在页面中的显示宽度
checked	checked	规定此 input 元素首次加载时应当被选中
maxlength	正整数	规定输入字段中字符的最大长度

name 和 value 是每个表单元素都有的属性值，主要给后端人员使用

name 是表单元素的名字，要求单选框和复选框要有相同的name值

checked 属性主要针对于单选框和复选框，主要作用是打开页面，就可以默认选中某个表单元素

②label标签

<lable for="sex"> 男 </lable>
<input type="radio" name="sex" id="sex">

1.当点击 <lable> 标签内的文本时，浏览器就会自动将焦点(光标)转到表单元素上
2.label 标签的 for属性应当与相关的 id 属性相同

14.3 select下拉表单元素

1.<select> 中至少包含一对 <option>

2.在 <option> 中定义 selected="selected" 时，当前项即为默认选中项

14.4 textarea文本域元素

cols = "每行中的字符数"，rows = "显示的行数"，实际开发中用CSS来改变大小

表单综合案例：

<body>
    <table width="600">
        <caption>表单综合案例</caption>
        <!-- 第一行 -->
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex" id="nan"> <label for="nan"> <img src="images/man.jpg"> 男 </label>
                <input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg"> 女</label>
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日:</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
                <select>
                    <option>--请选择日--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>

            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="请输入地区"></td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况:</td>
            <td>
                <input type="radio" name="marry" checked="checked">未婚 <input type="radio" name="marry"> 已婚 <input
                    type="radio" name="marry"> 离婚
            </td>
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>学历:</td>
            <td><input type="text" value="请输入学历"></td>
        </tr>
        <!-- 第六行 -->
        <tr>
            <td>喜欢的类型:</td>
            <td>
                <input type="checkbox" name="love"> 妩媚的
                <input type="checkbox" name="love"> 可爱的
                <input type="checkbox" name="love"> 小鲜肉
                <input type="checkbox" name="love"> 老腊肉
                <input type="checkbox" name="love" checked="checked"> 都喜欢
            </td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td>个人介绍</td>
            <td>
                <textarea>个人简介</textarea>
            </td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td></td>
            <td>
                <input type="button" value="按钮">
                <input type="submit" value="发送">
                <input type="reset" value="重置">
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <a href="#"> 我是会员，立即登录</a>
            </td>
        </tr>
    </table>
</body>