HTML简介

最新推荐文章于 2024-06-15 21:20:00 发布

Carl·杰尼龟

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量503

点赞数 2

分类专栏：前端文章标签： html html5 css

未经作者允许，不可私自转载/抄袭

本文链接：https://blog.csdn.net/qq_39052339/article/details/120265087

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.HTML简介

什么是网页？

网页由三部分组成：内容、表型、行为

内容：是页面数据。例如文本、数据库向前端展示的数据等都称为内容–而内容是通过HTML技术来展示的
表现：是这些内容在页面上的展示形式，例如：布局、颜色、大小等–一般使用CSS技术实现
行为：是指页面中元素与输入设备交互的响应，例如鼠标点击按钮的响应行为等–一般使用JavaScript来实现

什么是HTML？

HTML：超文本标记语言(Hyper Text Markup Language)

通过标签来标记要显示的网页中的各个部分，网页本身也是一种文本文件
通过标记符，告诉浏览器如何显示其中的内容，例如文字如何处理，画面如何排版等

2.HTML的创建

HTML软件

HbuildX

IDEA

Eclipese

VS code
IDEA如何创建HTML?

HTML文件必须以htm或html作为文件的后缀名

创建一个project

在这里插入图片描述
选择web，下一步

修改项目名称
在这里插入图片描述
创建完成后新建一个HTML文件

编写如下语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Carl_蔡先生</title>
</head>
<body>
 hello world
</body>
</html>

使用浏览器进行展示
在这里插入图片描述

3.HTML元素

HTML文档是由HTML元素构成的

什么是HTML元素？

由一个起始标签开始到该终止标签结尾这个整体称为一个HTML元素

举个栗子：

<body>
	<p>我是一个页面</p>
	<b>我是一个粗体页面</b>
</body>

body元素

<body>
	<p>我是一个页面</p>
	<b>我是一个粗体页面</b>
</body>

p元素

<p>我是一个页面</p>

b元素

<b>我是一个粗体页面</b>

4.HTML标签

HTML元素是由HTML标签定义的

什么是标签？

HTML标签是用来标记HTML元素的
HTML标签被<>符号包裹
HTML的标签是成对出现的，前面的称为起始标签，后面的称为终止标签
HTML标签对大小写不敏感，但是建议使用小写，尽量不要使用大写–不符合HTML设计规范

举个栗子：

<body>
	<p>我是一个页面</p>
	<b>我是一个粗体页面</b>
</body>

body标签

起始标签：<body>
终止标签：</body>

p标签

起始标签：<p>
终止标签：</p>

b标签

起始标签：<b>
终止标签：</b>

常见基本标签

标签	描述
<!DOCTYPE>	用于告知浏览器使用哪种HTML规范(定义文档类型)
< html>	定义HTML文档
< head>	定义HTML的头信息
< body>	定义文档的主体
< h1> to < h6>	定义标题1->标题6
< p>	定义段落
< br>	插入换行符
< hr>	定义水平线
< !---->	定义注释
< div>	定义文档中的块
< title>	定义文档的标题
< font>	(不赞成使用了–建议使用CSS)定义文字的字体、尺寸和颜色
< ul>	定义无序列表。
< select>	定义选择列表
< ol>	定义有序列表。

其他标签参考该文档

w3cschool.CHM/HTML教程/(X)HTML参考手册/HTML 4.01 / XHTML 1.0 参考手册

4.1HTML属性

属性是用于为HTML元素提供附加信息，属性的格式为：name=“value”

属性是依赖于标签存在的

举个栗子：

<body contenteditable="true">
	<p>我是一个页面</p>
	<b>我是一个粗体页面</b>
</body>

contenteditable就是body标签的一个属性，作用范围为整个元素。

contenteditable设置是否允许用户编辑元素，true表示允许，由该标签包裹的内容都允许被编辑

具体各标签的属性可参考文档

w3cschool.CHM/HTML教程/HTML5/HTML参考手册

5.HTML特殊字符

在这里插入图片描述

一些基本的特殊字符使用如上，可以避免被浏览器识别为特殊字符而不显示，使用编号和名称都可以，具体可以参考

w3cschool.CHM/HTML教程/(X)HTML参考手册/3、4、5

6.设置HTML表格合并单元格

<table width="500" height="500" cellspacing="0" border="1">
    <tr>
        <!--colspan合并列-->
        <td colspan="2">1.1</td>
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
        <td>1.6</td>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
        <td>2.6</td>
    </tr>
    <tr>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
        <td>3.6</td>
    </tr>
    <tr>
        <td>4.1</td>
        <td>4.2</td>
        <td>4.3</td>
        <td>4.4</td>
        <td>4.5</td>
        <td>4.6</td>
    </tr>
</table>

## 7.在一个HTML页面中显示其他HTML页面或图片

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Carl_蔡先生</title>
</head>
<body>
 <!--在hello2.html中显示Hello.html页面-->
 <iframe src="Hello.html"/>
</body>
</html>

点击链接切换对应的页面

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Carl_蔡先生</title>
</head>
<body>
<iframe src="nice.jpg" width="100%" height="800" name="aaa"></iframe>
<ol>
    <li><a href="1.jpg" target="aaa">cmm</a></li>
    <li><a href="nice.jpg" target="aaa">qsyn</a></li>
    <li><a href="Hello.html" target="aaa">Hello.html</a></li>
</ol>
</body>
</html>

8.什么是表单？

表单就是用于收集用户信息的所有元素集合，然后把这些信息发送给服务器
form标签代表表单，表单中常见的标签如下

input标签定义输入字段，用户可在input标签中输入数据 
	相关属性：
		type：定义输入数据的类型，默认为text文本类型
			button:按钮
			checkbox:多选按钮
			date:年月日
			datetime:
			datetime-local:当前时间，年月日时分
			file:上传文件
			hidden:隐藏域，用于传递一些不让用户可见的信息
			image:定义图片形式的提交按钮
			month:年月
			number:只允许输入数字
			password:输入密码
			radio:单选按钮
			range:滑块空间--可根据value设置滑块的位置，也可以根据document.getElementById("myRange").value获取滑块的值
			reset:重置按钮--重置该form表单的所有输入
			submit:提交form表单数据-提交完成后数据将被清空
			text:文本类型输入框
			time:时间输入框--输入时分数据
			url:url输入框--提交时会校验是否是网址
			week:某年第几周
select标签定义下拉列表 option标签用于展示下拉列表的选项
	selected:表示默认选择

form标签的属性

action属性设置提交的服务器地址
method属性设置提交的方式GET或POST

Carl·杰尼龟

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML简介

1.HTML简介什么是网页？网页由三部分组成：内容、表型、行为内容：是页面数据。例如文本、数据库向前端展示的数据等都称为内容–而内容是通过HTML技术来展示的表现：是这些内容在页面上的展示形式，例如：布局、颜色、大小等–一般使用CSS技术实现行为：是指页面中元素与输入设备交互的响应，例如鼠标点击按钮的响应行为等–一般使用JavaScript来实现什么是HTML？HTML：超文本标记语言(Hyper Text Markup Language)通过标签来标记要显示的网页中的各个部分
复制链接

扫一扫