Web前端入门笔记 HTML

最新推荐文章于 2024-06-01 23:46:19 发布

UncoDong

最新推荐文章于 2024-06-01 23:46:19 发布

阅读量392

点赞数 1

分类专栏：学习新知识文章标签： html

原文链接：https://www.bilibili.com/video/av74964956

版权

学习新知识专栏收录该内容

18 篇文章 0 订阅

订阅专栏

参考视频https://www.bilibili.com/video/av74964956，感谢黑马程序员

文章目录

学习路线

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZTFofY9q-1601447584239)(C:\Users\UncleDong\AppData\Roaming\Typora\typora-user-images\image-20200928155126051.png)]$

说出网页基本组成
- 网站是网页的集合
- 图片，文字、音频等元素
什么事HTML
- 超文本标记语言（Markup Language
- 有一套标记标签（markup tag
最常用浏览器
- IE，火狐，谷歌，Safari，Opera
- 浏览器内核：渲染引擎，负责读取网页内容，整理讯息，计算网页的显示页面
  
  浏览器内核备注
  IE Trident IE 猎豹安全 360 极速百度浏览器
  firfox Gecko 火狐浏览器
  Safari Webkit 苹果浏览器内核
  chrome/Opera Blink chrome、opera浏览器内核，是Webkit的分支
国内常用

浏览器	内核	备注
IE	Trident	IE 猎豹安全 360 极速百度浏览器
firfox	Gecko	火狐浏览器
Safari	Webkit	苹果浏览器内核
chrome/Opera	Blink	chrome、opera浏览器内核，是Webkit的分支

Web标准：三大组成,W3C（万维网联盟）组织的一系列标准

浏览器不同，使得显示页面或者排版会有差异

构成：接口（Structure），表现（Presentation），行为（Behavior）

标准	说明
结构	结构用于对网页元素进行整理和分类，现阶段主要学的是HTML
表现	用于设置网页元素的版式、颜色、大小等外观样式，指的是CSS
行为	网页模型的定义与交互的编写，主要是JSP

基本

1. HTML语法规范

1.1 标签的尖括号

尖括号里是标签
标签成对出现
单标签自己带空格+/

<html>
    <br />
</html>

分为双标签和单标签

1.2 标签关系

包含关系 和 并列关系

<html>
    <title> </title>
</html>

<html>
    <title> </title>
    <body> </body>
</html>

2. HTML基本结构标签

2.1 第一个HTML

标签名	定义	说明
	HTML标签	页面中最大的标签，称为根标签
	文档头部	head标签中我们必须设置title标签
	文档标题	让页面拥有一个属于自己的网页标题
	文档主体	元素包含网页的全部内容

在这里插入图片描述

3. HTML开发工具

VSCode 工具生成骨架新增代码

<!DOCTYPE>标签

文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页

<!DOCTYPE html> 指的是使用HTML5来显示网页

本身不属于HTML标签中的一部分，只是文档声明用的
lang语言

langue的缩写，当前文档的显示语言

lang = zh-CN是中文网站的意思

对于浏览器有一种提示的作用
charset字符串

charset：存储各种文字，使用不同的编码方式，UTF-8是万国马，好用

4. HTML常用标签

4.1 标签语义

4.2 标题标签

<h1> - <h6>

是双标签，前后都要有标签

一个标签独占一行

4.3 段落（paragraph）和换行（break）标签

是双标签，前后都要有标签

<p> </p>

没有标签的话，都会挤在一起，并且不会换行，没有空格

特点： 一个段落中的文本会自动换行，每个段和下一段有空隙

换行是单标签，依然没有换段落，并且和下一行的空隙比下一段的小

<br />

4.4文本格式化标签

网页中的粗体，斜体，下划线效果推荐**使用单词更多**的那个标签，这样更加明显

语义	标签
加粗	或则
倾斜	或者
删除线	或者
下划线	或者

我是加粗的文字我是加粗的文字我是倾斜的文字我是倾斜的文字我是 ~~删除线~~ 我是 ~~删除线~~ 我是下划线我是下划线

4.5 <div> 标签和 <span>标签

这俩有语义，只是一个用来装内容的盒子

division 分支的意思

span是跨度，跨距的意思

division一行只能放一个，后面就不会写别的内容了

我是一个div标签我一个人单独占一行

123

我是一个div标签我一个人单独占一行

123

所以div是一个超级大的盒子，一行只有一个内容的那种

百度百度</spa腾讯百度

span一行可以有很多个，是小盒子

4.6 图像标签和路径

4.6.1 图像标签

在HTML标签中，标签用于定义HTML页面中的图像。是一个 单标签

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

图像标签的使用

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图像不能显示的文字
title	文本	提示文本，鼠标放在图像上显示的文字
width	像素	图像宽度
height	像素	图像高度
border	像素	图像边框粗细

alt 替换文本图像显示不出来的时候用文字替换:

<img src="img1.jpg" alt="我是pink老师"/>

title 提示文本

<img src="https://i-blog.csdnimg.cn/blog_migrate/581b2f6331cacb6a253c24836622fe47.png" alt="我是pink老师" title="mua"/>

width给图像设定宽度:

height给图像设定高度:

border给图像设定边框:

<img src="https://i-blog.csdnimg.cn/blog_migrate/581b2f6331cacb6a253c24836622fe47.png" alt="我是pink老师" title="我是pink老师思密达" width="500" height="300" border="15"/>

<strong>属性一定是在标签的后面</strong>

<strong>属性不分前后顺序</strong>

<strong>属性采用键值对的方式</strong>

4.6.2 图像路径

目录文件夹和根目录

实际工作中，我们的文件不能随便乱放，需要被有规则的管理好

目录文件夹 就是普通文件夹，不过里面放了所有需要的html、图片等素材

根目录 打开目录文件夹的第一层就是根目录

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i5D4pN7v-1601447989927)(C:\Users\UncleDong\AppData\Roaming\Typora\typora-user-images\image-20200928193024101.png)]$

直接拖入VsCode或者在其中打开文件夹，就可以访问根目录了

相对路径：图片相对于HTML页面的位置

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级如
下一级路径	文件夹名字/	图像文件位于HTML文件下一级如
上一级路径心	…/	图像文件位于HTML文件上一级如

绝对路径符号：\

相对路径符号：/

4.7 超链接标签

用于定义超链接，anchor的缩写：锚

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

属性	作用
href	用于指定链接目标的url地址，(必须属性),当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

4.7.1 链接分类

外部链接：一个完整的外部网站的链接
内部链接：只需要写html的全名就行
空链接：’#'空连接
下载链接：地址链接的是文件 .exe or zip的形式
网页元素链接：文本，图像，表格等等
锚点链接：快速定位到某个位置

在链接文本的href属性中，设置属性值为#名字的形式，如<a href='#two'> 第二级 </a> 跳转到锚点跳转到锚点

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

1.外部链接

<a href="http://www.qq.com" target="_blank">腾讯</a>
target打开窗口的方式―默认的值是_self当前窗口打开页面_blank 新窗口打开页
<a href="http: //www.itcast.cn" target="_blank">传智播客</a>

2.内部链接:网站内部页面之间的相互链接

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

3.空链接:#

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

4.下载链接:地址链接的是文件 .exe或者是 zip等压缩包形式

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

5.网页元素的链接

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

6.锚点

在链接文本的href属性中设置为#名字的形式
在目标位置标签添加一个id属性，也就是只有名字, 没有#

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

5.1 注释

结束

快捷键 crtl + /

5.2 特殊字符

重点记住空格，大鱼号，小于号

姓名	性别	年龄
小明	男	12

属性名	属性值	描述
align	left 靠左, center 居中, right 靠右	规定表格相对周围元素的对齐方式
border	1 or “”	规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding	像素值	字和单元格的空隙
cellspacing	像素值	单元格之间的空白，默认2像
width	像素值或百分比	规定表格的宽度

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hji4N1LV-1601447669899)(C:\Users\UncleDong\AppData\Roaming\Typora\typora-user-images\image-20200930081934984.png)]$

在这里插入图片描述

<table>
    <tr>
        <th>排名</th>
        <th>趋势</th>
        <th>链接</th>
    </tr>
	<tr>
        <td>123</td>
        <td>👆</td>
        <td><a href="123123">点击</a></td>
    </tr>
</table>

排名	趋势	链接
123	👆	点击

1.5 表格结构标签

因为表格可能会非常的长，因此为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体

表头使用<thead>包含
表主体使用<tbody>包含

<table>
    <thead>
        <tr>
            <th>排名</th>
            <th>趋势</th>
            <th>链接</th>
        </tr>
	</thead>
    <tbody></tbody>
        <tr>
            <td>123</td>
            <td>👆</td>
            <td><a href="123123">点击</a></td>
        </tr>
    </tbody>
</table>

1.6 合并单元格

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oio2aOM9-1601447669904)(C:\Users\UncleDong\AppData\Roaming\Typora\typora-user-images\image-20200930083524057.png)]$

合并方式

跨行合并（竖着）：rowspan=“合并单元格的个数”

跨列合并（横着）：colspan=“合并单元格的个数”
目标单元格

跨行：上侧单元格为目标单元格，写合并代码

跨列：左侧单元格为目标单元格，写合并代码
合并步骤
1. 跨行还是跨列
2. 找到目标单元格
3. 删除多余的单元格

<table width="500" height="249" border="1" cellspacing="e"
	<tr>
		<td></td>
		<td colspan="2" rowspan="2"></td>
	</tr>
	<tr>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

在这里插入图片描述

1.7 表格总结

因为表格可能会非常的

2. 列表标签

表格是用来显示数据的，列表是用来布局的

列表最大的特点就是整齐、整洁、有序、作为布局会更加自由和方便

无序列表
有序列表
自定义列表

2.1 无序列表（很重要

<ul>表示HTML中的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义

列表项1
列表项2
列表项3

<ul>里面只能放<li>标签，不能放别的文字

无序列表的各个列表项之间没有顺序级别之分，是并列的。
<ul>中只能嵌套<li>
，直接在<ul>标签中输入其他标签或者文字的做法是不被允许的。
<li>与
之间相当于一个容器，可以容纳所有元素。
li也有自己的属性，不过我们会用css来实现

2.2 有序列表（用的不多

<ol>标签用于有序列表，使用<li>来定义列表项

列表项1
列表项2
列表项3

2.3 自定义列表（很重要

自定义列表的使用场景:
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6L3f58cT-1601447669908)(C:\Users\UncleDong\AppData\Roaming\Typora\typora-user-images\image-20200930092602513.png)]$

在HTML标签中，<dl>标签用于定义描述列表(或定义列表），该标签会与<dt>(定义项目/名字）和
<dd>（描述每一个项目/名字)一起使用。
其基本语法如下:

只能出现dl, dt, dd。 dt 和 dd是兄弟关系，是 并列的

名词1

名词1解释1

名词1解释2

关注我们

联系我们

官方微信

2.4 列表总结

标签名	定义	说明
	无序标签	里面只能包含li没有顺序，使用较多。li里面可以包含任何标签
	有序标签	里面只能包含li有顺序，使用相对较少。li里面可以包含任何标签
	自定义列表	里面只能包含dt和dd 。dt和dd里面可以放任何标签

3. 表单标签

网页中的表单

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OI549SvT-1601448388075)(C:\Users\UncleDong\AppData\Roaming\Typora\typora-user-images\image-20200930100117258.png)]$

3.1 表单的目的

使用表单为了收集用户信息

3.2 表单的组成

HTML中，一个完整的表单通常由

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

三个部分组成

在这里插入图片描述

3.3 表单域

表单域是一个 包含表单元素的区域

<form>标签用来定义表单域

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

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

3.4 表单元素

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

3.4.1 <input>表单元素

属性值	描述
button	定义可点击按钮（多数情况下，用于通过****启动脚本
checkbox	定义复选框
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段
radio	定义单选按钮
reset	定义重置按钮，会清除表单中的所有数据
submit	定义提交按钮，会把表单数据发送到服务器
text	定义单行输入字段，可以输入文本，默认宽度20个字符

用户名:

密码:

性别：男: 女:

爱好：体育: 画画:

属性值	描述
name	用户自定义	定义input元素的名称，可以用来区分 name=“啥玩意”
value	用户自定义	规定input元素的默认值 value=”默认值“
checked	checked	规定此input 默认选中 checked=""
maxlength	正整数	规定输入字段的字符的最大长度 maxlength = ”6“

name和value是每个表单元素都有的属性值，供后台人员使用
单选按钮和复选框要有相同的name值

上传文件

3.4.2 <label>标签

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

该标签用于绑定一个表单元素，当点击label标签内的文本的时候，浏览器就会自动将焦点（光标）转换到对应的表单元素上，增加用户体验

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

label的for属性和input里id的内容必须是相同的

3.4.3 <select>表单元素

使用场景：在页面中，如果有多个选择让用户选择，可以使用select定义下拉列表

select中至少包含一对option
在option中定义selected="selected"时，当前项即为默认选项

3.4.4 <textarea>文本域

大量书写文字的时候，就不用单行文本框表单了，使用textarea

在textarea里写的文字会被当做默认值。
cols = “每行的字符数”, rows=“显示的行数” 我们在实际开发中不会使用，都是用CSS来改变大小

超过行数会自动添加滚动轴

<form>
        今日反馈
        <textarea cols="50" rows="4">
            这里是默认文字
        </textarea>
    </form>

3.5 表单元素几个总结点

学习了input输入表单，select下拉表单， textarea文本域表单
这三组表单元素都应该包含在form表单域中，并且有name属性
三个名字很相似的标签
1. 表单域 form 使用场景：提交区域内表单元素给后台服务器
2. 文件域 file 是input type属性值使用场景：上传文件
3. 文本域 textarea 使用场景：可以输入多行文字，比如留言板等

UncoDong

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Web前端入门笔记 HTML

参考视频https://www.bilibili.com/video/av74964956，感谢黑马程序员文章目录学习路线基本1. HTML语法规范1.1 标签的尖括号1.2 标签关系2. HTML基本结构标签2.1 第一个HTML3. HTML开发工具VSCode 工具生成骨架新增代码4. HTML常用标签4.1 标签语义4.2 标题标签4.3 段落（paragraph）和换行（break）标签4.4文本格式化标签4.5 \ 标签和 \标签4.6 图像标签和路径4.6.1 图像标签4.6.2 图像路.
复制链接

扫一扫