HTML

最新推荐文章于 2024-06-07 18:11:32 发布

更努力，更幸运

最新推荐文章于 2024-06-07 18:11:32 发布

阅读量142

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_46362959/article/details/109072171

版权

本文介绍了HTML的基本概念，包括超文本标记语言的定义、文件创建、组成部分及标签分类。详细讲解了行内、块级和行内块级标签，以及常见的HTML元素如标题、段落、列表、图片、链接、表格和表单。此外，还提到了框架标签的使用，但指出其在现代网页开发中的过时性。内容涵盖了HTML的基础知识和关键元素，适合初学者入门学习。

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

1.html的简介

HTML:HyperText Markup Language 超文本标记（标签）语言

超文本：相对于普通文本功能更强大，包含文字、图片、音频、视频、链接等等

标签：结构<关键字</关键字>

标签分成两类：双标记单标记

Eg：

双标记开始标记和结束标记组成

单标记也叫空标记自结束标签

2.html如何创建

创建一个文件，扩展名设置为.html 或.htm

3.html的组成部分

<!DOCTYPE html><!-文档类型声明->
<html lang ="en"><!-根标记->
<head><!-元数据信息：样式引入  脚本引入  编码  网页标题等等->
	<meta charset="UTF-8"><!-网页的编码->
	<title>Title</title><!-网页标题->
</head>
<body><!-网页主体正文：显示于浏览器的内容->
	呵呵！你好！！
</body>
</html>

4.html中基本概念

文档：整个html的网页内容

文本：网页中的文字内容

元素：元素节点元素对象 = 标签名+属性+文本等等

属性：

5.常见开发工具

安装webstrom 或 Hbuilder等

6.html中标签的分类

1.行内标签：没有默认独占一行，从左到右排列，大小由文本内容多少决定，不能设置宽和高

2.块级标签：默认独占一行，可以设置宽高

3.行内块级标签：没有默认独占一行，可以设置宽高

2.常用标签介绍

Hn h1~h6 数字越大标题越小 2

Hr 分割线 size属性设置分割线厚度 noshade设置阴影效果

P 段落标签可以设置缩进style=“text-indent:2em” 段落之间有一定的默认间距 2

Span 本身没有特殊效果，但是可以对选择的内容进行特定样式设置 1

Br 换行

Strong/b 加粗 strong强调语义 1

Em/i 倾斜 em强调语义 1

3.列表

有序列表ol

有序列表
有序列表
有序列表
有序列表
有序列表

无序类别ul

列表项li

无序列表
无序列表
无序列表
无序列表
无序列表

定义列表dl

dt dd

HTML:

HyperText Markup Language 超文本标记（标签）语言

CSS:

层叠样式表

补充：实体应用文本内容居中

Text-align:center

4.图片

img

src=“图片引入路径”

alt=“加载图片异常时提示”

title=“图片标题鼠标移入时的显示”

Eg：图片加载异常

相对路径

./当前目录下

…/上一级目录

…/…/上上级目录

/下级目录[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6WO2b9l2-1602655741202)(file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml1988\wps1.jpg)]

5.链接

a 1

href=”链接地址”

target=”打开链接方式” 默认值_self当前网页打开 _blank 新的窗口打开链接

A链接的作用：

1、可以链接到外部网络中的网页地址

2、可以链接到本地的网页

3、链接到当前网页中的某一个具体位置

使用name属性或id=”top”属性设置锚点位置

然后使用

6.表格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-foRRBlAS-1602655741205)(file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml1988\wps20.jpg)]

7.表单

在网页中用于收集信息的组件

form 表单域

action：设置表单提交的路径

method：设置表单提交的方式常见get/post

get:可以在地址栏看到提交的信息，提交数据量有限的，安全性相对较低

Post:不能再地址栏看到提交的信息，提交数据量没有限制，安全性相对较高

（请求体重传递数据）

Enctype: 默认值application/x-www-form-urlencoded ，一键值对形式提交信息

multipart/form-data 可以传输键值对信息以及文件、图片、视频等的上传

表单中的各种元素对应的标签

input 3

type=”text” 文本框默认

password 密码框

radio 单选框

checkbox 复选框

hidden 隐藏域

file 上传文件

submit 提交按钮

reset 重置按钮

image 图片按钮

button 普通按钮

select 下拉列表

option 下拉项

textarea 文本域

表单中属性：action method enctype

name：收集表单信息必不可少的属性相当于设置的key值

value：

1.单选复选框选中之后设置值

2.按钮上显示文字设置

如何设置表单中的默认值

1、文本框、密码框、隐藏域使用value属性设置

2、单选、复选框使用checked属性选中默认选项

3、下拉列表使用selected属性设置默认选项

4、文本域在开始和结束标签中间设置默认值

补充属性：

readonly 只读，无法修改

disabled 禁用，无法修改无法提交

placeholder 文本框内的提示信息

required 必填项设置[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8OCZF00G-1602655741208)(file:///C:\Users\ADMINI~1\AppData\Local\Temp\ksohtml1988\wps49.jpg)]

8.框架标签

frameset 可以将网页分成各个小区域，每一个区域都是独立存在的

frame 对该区域引入相应的网页内容–src

Cols 将列进行划分多数情况使用百分比划分 20% *自动计算其他比例

rows将行进行划分多数情况使用百分比划分 20% *自动计算其他比例

注意：1、该框架标签已过时，不能使用4.01网页 h5兼容可用

2、需要删除body标签

<frameset rows="20%,*">
    <frame src="7、链接.html"/>
    <frameset cols="28%,*">
        <frame src="4、列表.html"/>
        <frame src="8、表格.html" name="rightplace"/>
    </frameset>
</frameset>

自动计算其他比例

注意：1、该框架标签已过时，不能使用4.01网页 h5兼容可用

2、需要删除body标签

<frameset rows="20%,*">
    <frame src="7、链接.html"/>
    <frameset cols="28%,*">
        <frame src="4、列表.html"/>
        <frame src="8、表格.html" name="rightplace"/>
    </frameset>
</frameset>

注意：给右边区域设置name属性，当左边区域链接时，链接地址对应的内容若需要再右边区域显示，使用target=”name值”设置

更努力，更幸运

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML

1.html的简介HTML:HyperText Markup Language 超文本标记（标签）语言超文本：相对于普通文本功能更强大，包含文字、图片、音频、视频、链接等等标签：结构<关键字</关键字> 标签分成两类：双标记单标记 Eg：双标记开始标记和结束标记组成单标记也叫空标记自结束标签2.html如何创建创建一个文件，扩展名设置为.html 或.htm3.html的组成部分<!DOCTYPE html>&lt
复制链接

扫一扫