前端基础-html知识点(详细版)_html基础知识-优快云博客

本文链接：https://blog.youkuaiyun.com/xnxqwzy/article/details/145927963

前端基础-html知识点(详细版)

前端

1.网页

1.1网站、网页

1.网站：网页的集合

2.网页（HTML文件）：html格式的文件，通过浏览器阅读

元素组成：图片、文字、视频、声音、链接

1.2什么是HTML

超文本标记语言用来描述网页

由标签组成

1.3网页的形成

2.常用浏览器

IE 火狐谷歌 Safari Opera

浏览器内核：读取网页内容显示页面

3.web标准

W3C（万维网联盟）国际著名标准化组织

3.1为什么需要web标准

浏览器不同显示或排版有差异

3.2web标准的构成

结构：对网页元素进行整理分类 HTML

表现：设计网页元素的版式颜色大小等外观样式 css

行为：网页模型的定义、交互的编写 JavaScript

结构、样式、行为分离

一.HTML

1.语法规范

1.1基本语法概述

由尖括号包围关键词

大部分成对存在双标签

特殊标签必须是单标签

1.2标签关系

包含（父子）关系：

<head>
    <title></title>
</head>

并列(兄弟 )关系：

<head></head>
<body></body>
<html>
    <head></head>
    <body></body>
 </html>

2.基本结构标签

2.1第一个HTML网页

每个页面都有一个基本的结构标签（骨架标签），页面内容在基本标签上书写。

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        键盘敲烂，工资过万
    </body>
</html>

后缀名必须是.html或.htm

快捷键

快速复制某一行：shift +alt+下箭头

选中多个相同的词：ctrl+d

添加多个光标：ctrl+alt+箭头（上/下）

全局替换某个单词：ctrl+h

快速跳到某一行：ctrl+g

选择某个区块：shift+alt

放大/缩小：ctrl+/-

3.网页开发工具

3.1文档类型声明标签

:告诉浏览器HTML版本

<!DOCTYPE html>

写到第一行

不是html标签是文档类型声明标签

3.2lang语言种类

用来定义当前文档的显示语言

1.en定义语言为英语（英文网站）

2.zh-CN定义语言为中文（中文网页）

对于文档显示不管选择什么都能显示

3.3字符集

4.常用标签

4.1标签语义

记住标签含义！！！让页面结构更清晰

4.2标题标签

-

(重要性递减)

-

为六个等级的网页标签（head缩写）

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

加标题字体加粗，字号变大

一个标题独占一行

4.3段落和换行标签（重要）

定义段落，将整个网页分为若干个段落

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

文本根据浏览器窗口大小自动换行

段落与段落之间保有空隙

强制换行

特点：

单标签

简单另起一行跟段落不一样

4.4文本格式化标签

4.5div和span盒子标签
和没有语义，就是一个盒子，用来装内容的

<div>
    这是头部
</div>
<span>今日价格</span>

标签用来布局，独占一行。大盒子

标签用来布局，一行可以有多个.小盒子

4.6图像标签和路径（重点）

4.6.1.图像标签

<img src="图像URL"/>

单标签

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

属性即属于图像标签的特性

宽度和高度一般只修改一个

注意：1. 可以有多个属性，属性写在标签后面。

属性间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
属性采取键值对的格式，即key=“value”的格式，属性=“属性值”

4.6.2路径（前期铺垫）

目录文件夹：普通文件夹只不过放了我们做页面所需要的相关素材比如html文件图片等
根目录：打开目录文件夹的第一层

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

绝对路径

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

1.同一级路径

 <img src="玫瑰.jpg">

2.下一级路径

 <img src="img/帕恰狗.jpg">

3.绝对路径

<img src="C:\Users\xxx\Desktop\前端\案例\玫瑰.jpg">
<img src="https://stu.ityxb.com/img/header_logo.527c8acc.png" />

4.7超链接标签

从一个页面连接到另一个页面

4.7.1链接语法格式

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

4.7.2 链接分类

外部链接：

<a href ="http://www.baidu.com">百度</a>

2.内部链接：

<a href="gongsijianjie.html">公司简介</a>

3.空链接：

<a href="#">公司地址</a>

4.下载链接

<a href="玫瑰.zip">下载文件</a>

5.网页元素链接

<a href="http://www.baidu.com"><img src="玫瑰.jpg" alt=""></a>

6.锚点链接：可去往页面中的不同位置

<a href="#live">个人生活</a><br />
    <h3 id="live">个人生活</h3>

5.HTML中的注释和特殊字符

注释：便于阅读理解不显示在页面中

<!--巴拉巴拉-->

快捷键：ctrl+/

特殊字符：

6.表格标签

6.1表格作用：

用来显示数据让数据规整

6.2表格的基本语法

<table>
    <tr>
        <td>
        单元格内的内容
        </td>
    </tr>
</table>

table定义表格

tr定义行，必须嵌套在table内

td定义单元格嵌套在tr中内容

6.3表头单元格标签

常用于表格第一行文字会加粗居中显示

6.4表格属性

6.5表格结构标签

表格分为表格头部和表格主体

标签表格头部区域内部必须有tr标签一般第一行表格主体区域

都是放在

标签中的

可以更好地分清表格结构

6.6合并单元格

把多个单元格合并为一个

方式：

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

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

确定是跨行还是跨列
找到目标单元格。写上合并方式=合并的单元格数量。比如：
删除多余单元格

7.列表标签

用来布局——整齐整洁有序

分类：有序、无序、自定义

7.1无序列表

ul 无序列表 li列表项

    <ul>
        <li>榴莲</li>
        <li>草莓</li>
        <li>芒果</li>
    </ul>

各个列表项无顺序

只能放li标签

li标签里可以放任何元素

带有自己的样式属性，实际使用时，用css设置

7.2有序列表

只能放li标签

li标签里可以放任何元素

带有自己的样式属性，实际使用时，用css设置

<ol>
    <li>刘德华1000</li>
    <li>刘德100</li>
    <li>刘10</li>
</ol>

7.3自定义列表（重点）

使用场景：

用于定义描述列表，与（定义项目/名字）和

（描述每一个项目/名字）一起使用

语法格式：

<dl>
    <dt>名词1</dt>
    <dd>名词解释1</dd>
    <dd>名词解释2</dd>
    <dd>名词解释3</dd>
</dl>
<dl>
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
    <dd>联系我们</dd>
</dl>

里面只能含和

一个

常有多个

进行描述，

和

个数没有限制，是兄弟关系

8表单标签

8.1为什么需要表单

收集用户信息

8.2表单的组成

表单域、表单控件（表单元素）、提示信息

8.3表单域

包含表单元素的区域

标签用于定义表单域，实现用户信息的收集和传递，可将表单元素的信息提交给服务器

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

暂时不需要提交数据

在写表单元素前，应有表单域把他们进行包含
表单域是form标签

8.4表单控件

允许用户输入或选择的内容控件

input输入表单元素
select下拉表单元素
textarea 文本域元素

8.4.1 input 表单元素

用于收集用户信息

单标签，包含type属性，type属性设置不同的属性值用来指定不同的控件类型

<input type="属性值">

name和value 是每个表单元素的属性值，主要给后台人员使用
name表单元素的名字，单选按钮和复选框要有相同的name值
checked属性主要针对单选按钮和复选框，主要作用一打开页面就可以默认选中某个表单元素
maxlength是用户可以在表单中输入的最大字符数，一般较少使用

8.4.2 label表单

标签为input元素定义标注（标签），可绑定一个表单元素，点击标签内文本时，浏览器会自动将焦点转到或选择对应的表单元素上，用来增加用户体验

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

8.4.4 select表单元素

下拉表单元素

使用场景：

节约页面空间

语法：

<form>
        籍贯：
        <select>
            <option>山东</option>
            <option>广东</option>
            <option>陕西</option>
        </select>
</form>

里面至少包含一对option

在option中定义selected=“selected”时，当前项即为默认项