文章

文章声明：转载来源：https://blog.csdn.net/Lixuanyi6181/article/details/123942985

一、HTML简介

1.web标准

Web标准：网页主要由结构、表现和行为三部分组成

2.什么是HTML

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

3.HTML基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>今天是个好日子</title>
</head>
<body>
    遇到困难睡大觉
</body>
</html>

<!DOCTYPE html> 文档类型声明标签 告诉这个页面采用html5版本来显示页面
<html lang="en"> 告诉浏览器或者搜索引擎这是一个英文网站，本页面采用英文来显示
<meta charset="UTF-8"> 采用UTF-8保存文字，如果不写就写乱码

二、HTML常用标签

1.HTML标签参考手册
HTML 标签参考手册 (w3school.com.cn)

2.注释

<!-- HTML注释 -->

注释：在开始标签中有一个惊叹号，但是结束标签中没有。
浏览器不会显示注释，但是能够帮助记录 HTML 文档。

CSS注释与HTML注释不同

/* CSS注释 */

3.基础标签

段落标签和换行标签：
文本会根据浏览器大小自动换行
段落和段落之间有空隙
换行标签只是简单地开始新的一行，段落之间会插入一些垂直地距离

4.文本格式化标签

5.盒子标签

< div >与< span >标签没有语义，相当于一个装载内容的盒子

div单独占据一行，span在一行可以有多个

6.图像标签

<img src="URL" / >

src：必填属性，用于指定图像文件的路径和文件名
alt：替换文本属性，当图片加载不出来的时候，就会出现替换文本文字
title：悬浮文字，鼠标放在图片上显示的文字
width：设置图像的宽度
height：设置图像的高度
border：设置图像的边框粗细

注：

图像的属性必须写在标签名之后
属性不分先后顺序，属性之间用空格隔开
采用键值对的形式，属性=属性值

1.相对路径：以引用文件所在位置为参考基础，而建立出的目录文件

简单来说，就是图片相当于HTML页面的位置

2.绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
如：D:\前端\图片.jpg

7.超链接标签

<a href="URL" target="_self">链接文字</a>

href：必需属性，指定连接的URL地址

target：指定打开方式，默认当前页面打开，_blank表示从新的页面打开链接资源

name：规定锚的名称，当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，
这样使用者就无需不停地滚动页面来寻找他们需要的信息了

<body>
    <a href="#我的命名">点击这里进行跳转</a>
    <br>
    <br>
    <a name="我的命名">成功跳转到这里</a>
</body>

链接分类：

外部链接：从一个网站跳转到另一个网站，以http://www开头

内部链接：网站内部页面之间相互链接，如index.html，路径为同一级

空链接：#，表示链接为空

下载链接：href里面是一个文件或者压缩包

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

锚点链接：点击链接，可以快速定位到页面的某个位置，需要使用name属性

8.表格标签
表格的基本语法

<table>
        <tr>
            <th>表头单元格内的文字</td>
        </tr>
        <tr>
           <td>普通单元格内的文字</td>
           <td>普通单元格内的文字</td>
        </tr>
    </table>

<table>是定义表格的标签
<tr>用于定义表格中的行
<td>用于定义表格中的单元格，有几个单元格该行就有几列
<th>用于定义表头单元格，常用于表格第一行，表头单元格里面的文字会加粗居中显示

合并单元格
跨行合并（竖向）：rowspan=‘合并单元格的个数’ 最上侧单元格为目标单元格，写合并代码
跨列合并（横向）：colspan=‘合并单元格的个数’ 最左侧单元格为目标单元格，写合并代码

9.表单标签
表单用于收集信息
在网页中，也需要跟用户进行交互，收集用户资料，这时候就需要表单

表单域

<form action="URL" method="提交方式" name="表单域名称">
    密码：<input type="password">
</form>

from：定义表单域，以实现用户信息的收集和传递
action：用于指定接受和处理数据的服务器URL地址
method：设置表单数据提交方式，其取值为get或post（get效率高但不安全、请求大小有限，post安全、请求大小无限但效率低）
name：指定表单名称，以区分同一个页面中的多个表单域
表单控件
1.input输入表单元素

<input type="" />

< input / >标签为单标签
type属性指定不同的控件类型

input其它属性
name：由用户自定义，定义Input属性的名称
value:规定input元素的值，传递给服务器
checked：规定input元素首次加载时被选中，使用语法为checked="checked"
maxlength：规定输入字段中的字符的最大长度
注：
name和value是每个表单元素的属性值，主要给后台人员使用
name表单元素的名字，要求单选框和复选框要有相同的name值，表示同一组
checked属性主要针对于单选按钮和复选框一打开页面就可以默认选中某个表单元素
label标签

使用场景：label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验

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

核心：label标签的for属性应该与相关元素的id属性相同

2.select下拉表单元素

<select>
    <option>北京</option>
    <option>浙江</option>
</select>

select：定义下拉列表
option：定义下拉列表项
在option中定义 selected="selected" 当前选项即为默认选项

3.textarea文本域元素

使用场景：当用户输入内容较多的情况下，就不能使用文本框text标签了，常见于留言板、评论

<textarea  cols="50" rows="10"></textarea>

注：
(1)通过textarea标签可以创建多行文本输入框
(2)cols=“每行中的字符数” rows=“显示的行数” 但我们实际开发中都是用CSS来改变大小

10.列表标签

<ul>
    <li>niko</li>
    <li>hunter</li>
    <li>monesy</li>
</ul>

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
同样，有序列表也是一列项目，列表项目使用数字进行标记。

前端入门基础