新人学习HTML的入门笔记

最新推荐文章于 2024-10-09 11:42:00 发布

zr333133

最新推荐文章于 2024-10-09 11:42:00 发布

阅读量837

点赞数 19

文章标签： html 前端

本文链接：https://blog.csdn.net/zr333133/article/details/136112927

版权

本文详细介绍了HTML的基础知识，包括标签结构、常用的HTML标签如`<html>`,`<head>`,`<body>`,`<form>`,`<input>`等，以及表单元素、多媒体标签、表格布局和列表的使用。

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

第一部分：认识HTML

1.1.HTML被称为超文本标签语言或超文本元素语言

1.2.<标签属性=“值”>内容</标签>

1.3.输入“ ！”工具出现

<!DOCTYPE html> ------ 声明了一个 html 的文档

<html lang = "en" > ------- 网页开始的部分

<head> ------- 网页头部的开始

<title> Document </title> ------- 网页的标题

</head> ------ 网页头部的结束

<body> ------ 网页的内容的开始

</body> ------ 网页内容的结束

</html> ------ 网页结束的部分

1.4. 不会展示到页面上

第二部分：HTML常用标签

2.1.strong/b标签：用来加粗字体

2.2.br/hr标签：

br标签：用来换行，单标签

hr标签：水平分割线，单标签，可以设置width属性表示的水平分割线的长度，size属性设置的粗细 <hr width="800px" size="10">

2.3.p标签：段落标签

两个相邻的p标签中间会空一行

align 属性：位置 left center right, 默认值是 left

font 标签 ------ 这是字体

color 属性：颜色

颜色的表示法：英文单词 red black pink

#rrggbb 三原色 red green blue

<font color = "#006600" > 这是字体标签 </font>

2.4.sub、sup、pre、span标签

sub ：下标标签

sup ：上标标签

pre ：用来原样输出内容

span : 修饰文本的标签 ----- 标准的行内标签

2.5.hn和div标签

hn 指的是 h1,h2,h3,h4,h5,h6 ----- 标题标签 n 取值只能是 1-6 字体越来越小有加粗的效果

div 标签 : 标准的块级标签 ------ 盒子布局

块级标签：独占一行，自动换行 div hn p hr

行内标签：不能自动换行，除非这一行的文本内容铺满了整个页面才会换行 span

第三部分：HTML表单标签

form ：标签一般会和 input 标签连用

action : 跳转的路径

绝对路径：从盘符开始到文件名称的全部路径

相对路径：当前源文件和目标文件的相对路径

method : 表单提交的方式 get post 默认是 get

name : 表单的名称

get : 会把用户请求的内容暴露在地址栏上

post : 相较于 get 会安全一点

用户名 : <input type = "text" name = "username" ><br>

密码 : <input type = "password" name = "password" ><br>

</form>

3.1.表单元素（文本框、密码框、下拉列表、单选、多选）

一般由 input 、 textarea 、 select 标签构成，需要放到 form 里面

3.2.input标签

语法格式

type 的取值：

text ------ 文本框

password ---- 密码框

radio ---- 单选按钮

checkbox ----- 多选按钮

submit ---- 提交按钮

reset ----- 重置按钮

button ----- 普通的按钮

image ---- 图像按钮

file ---- 文件域

hidden ----- 隐藏域

email ------ 邮箱

color ----- 颜色域

date ----- 日期

time ------ 时间

datetime-local ------ 日期 + 时间

range ---- 进度条

请选择您的邮箱： <input type = "email" value = " 请填写您的邮箱 " >

注：写form标签内

3.3.input标签常用属性

checked ---- 默认选择

readonly ------ 只读字段只可以读不能修改

disabled ----- 禁用不可以点击

autofocus ------ 默认光标的位置

required---- 不能为空白提交

3.4.select标签

下拉列表框 ------ 一般和 option 标签进行连用

selected 属性 ---- 默认被选中的选项

multiple 属性 ------- 以列表的形式显示

请选择您的地址：

</select>

3.5.textarea标签：用来实现文本域

cols ------- 多少列，用于显示文本的宽度

rows ------- 多少行，用来显示文本的高度

第四部分：常见的属性

a标签：超链接

vlink ----- 访问过超链接文本的颜色

Alink ------ 激活超链接文本的颜色

link ------ 超链接文本的颜色

text ---- 文本的颜色

bgcolor ----- 背景颜色

background ------ 背景图片

颜色表示法：英文单词、#rrggbb 、rgba() a表示透明度

<body link = "red" vlink = "green" alink = "blue" text = "black" bgcolor = "pink "

background = " 海绵宝宝 .JPG" >

4.1.a标签：超文本链接标签，用来进行页面跳转 herf = "url" 跳转页面的路径

4.2.img标签：目前常见的图片的格式：GIF JPG PNG BMP等

4.2.1 常见的属性

src 属性 ---- 指的是图片的路径（绝对路径和相对路径）

alt 属性 ------ 代替图片的文本内容（因为路径的问他或者因为浏览器的问题显示不出来这个张图片的

时候， alt 属性值就是去描述这张图片的一个内容）

width ------ 宽度

height ---- 高度

border ------ 边框，默认值 0

align ----- 位置（图片和文字的位置）

top ( 上对齐 ) middle( 居中对齐 ) bottom( 下对齐默认值 ) left( 左对齐 ) right( 右对齐 )

title ------ 图片的标题，用来显示描述图片的文字

4.2.2.位图

usemap 属性

map 标签的 name 属性，一般会和 area 标签进行连用

属性： shape ------- 鼠标点击的形状

coords ----- 鼠标点击形状的大小

href ------ 表示跳转的路径

4.3.多媒体标签

audio 标签 ---- 音频

video 标签 ---- 视频

controls 属性 ---- 表示播放器的组件

autoplay 属性 ----- 自动播放（浏览器不支持这个属性值）

loop 属性 ---- 循环播放

4.4.表格布局

table 标签

包含 thead tbodt tr td tfood

表格边框：border

.表格的宽度（width）和高度（height）

表格的对齐方式（align）：left /right /center

表格的背景: 背景颜色（bgcolor）和背景图片（background）

<table border = "1" width = "800px" height = "400px" align = "center" bgcolor = "pink"

background = " 图片 1.png" >

表格的间距和边距：

cellpadding ------ 表格边距（表示的是单元格内元素距离单元格边缘的距离）

cellspacing----- 表格的间距（单元格和单元格之间的距离）

表格的嵌套：表格里面可以嵌套表格

表格的合并： rowspan ------- 表示在单元格上垂直方向上去跨行（合并行）

colspan ------ 表示单元格上水平方向跨列（合并列）

4.5.列表标签：(主要）有序列表、无序列表、数据列表

4.5.1.有序列表：ol

type 属性 ---- 设置序号的种类，默认的是数字

start 属性 ----- 控制序号开始的位置

reversed 属性 ----- 降序（反序）

4.5.2.无序列表: dl

type 属性 ------ 无序列表的样式 disc( 默认取值实心圆 ) circle( 空心圆 ) square （实心方框）

4.5.3.数据列表：dl

4.6.多窗口框架

一个页面可以显示多个窗口 ----- frameset （不能和 body 标签连用）

cols ------ 定义页面列方向的尺寸或则数目

rows ---- 行