网站模板之家免费下载,asp手机网站开发教程,怎样推广公司的网站,洛阳网站建设汉狮怎么样一、什么是HTML
HTML#xff0c;全称超文本标记语言#xff08;HyperText Markup Language#xff09;#xff0c;是一种用于创建网页的标准标记语言。它通过一系列标签来定义网页的结构、内容和格式。HTML文档是由HTML元素构成的文本文件#xff0c;这些元素包括标题、段…一、什么是HTML
HTML全称超文本标记语言HyperText Markup Language是一种用于创建网页的标准标记语言。它通过一系列标签来定义网页的结构、内容和格式。HTML文档是由HTML元素构成的文本文件这些元素包括标题、段落、图片、链接、列表以及其他内容。浏览器读取HTML文档并将其渲染成可视化网页。
HTML的基本结构通常包含以下几个部分 1. !DOCTYPE html声明文档类型告诉浏览器这是HTML5文档。 2. html根元素所有其他的HTML元素都包含在它之内。 3. head包含了如文档的标题、链接到样式表、脚本和元数据等信息。 4. body包含了可见的页面内容如文本、图片、链接、视频等。
HTML标签通常成对出现一个开始标签如p和一个结束标签如/p 它们之间的内容会被浏览器解析为特定的元素。例如段落标签p用于定义文本的段落。
HTML的最新版本是HTML5它引入了更多的语义化标签如article, section, nav等增强了表单元素并支持多媒体如视频和音频以及图形如canvas。
二、HTML入门
1. 标签 又称 元素是HTML的基本组成单位 标签分为双标签 与 单标签 绝大多数都是双标签。 标签名不区分大小写但推荐小写因为小写更规范。
h1主体标签/h1
p段落标签/p
!DOCTYPE html !-- 声明文档类型 --
html langzh !-- 设置语言 --
headmeta charsetUTF-8 !-- 设置字符编码 --meta nameviewport contentwidthdevice-width, initial-scale1.0 !-- 适应不同设备 --title我的第一个网页/title !-- 网页标题 --
/head
bodyh1欢迎来到我的网页/h1 !-- 主标题 --p这是我的第一个 HTML 页面/p !-- 段落 --
/body
/html效果展示 h1主标题/h1
h2副标题/h2
h3三级标题/h32.段落和文本格式化
使用 p 标签创建段落使用其他标签格式化文本。
p这是一个段落。/p
pstrong这是加粗文本。/strong/p
pem这是斜体文本。/em/p
pu这是下划线文本。/u/p效果展示 3. 列表
可以使用无序列表和有序列表。
ul !-- 无序列表 --li项目 1/lili项目 2/li
/ulol !-- 有序列表 --li第一项/lili第二项/li
/ol效果展示 4. 超链接和图像
使用 a 标签创建链接比如我们访问百度
!DOCTYPE html !-- 声明文档类型 --
html langzh !-- 设置语言 --
headmeta charsetUTF-8 !-- 设置字符编码 --meta nameviewport contentwidthdevice-width, initial-scale1.0 !-- 适应不同设备 --title我的第一个网页/title !-- 网页标题 --
/head
bodya hrefhttps://www.baidu.com target_blank访问示例网站/a !-- target_blank 在新窗口打开 --/body
/html点击 访问示例网站 进入百度 5.图像
使用 img 标签插入图像
!DOCTYPE html !-- 声明文档类型 --
html langzh !-- 设置语言 --
headmeta charsetUTF-8 !-- 设置字符编码 --meta nameviewport contentwidthdevice-width, initial-scale1.0 !-- 适应不同设备 --title我的第一个网页/title !-- 网页标题 --
/head
bodyimg src/Path_test/beaa0418c666182dae2f40357e99ac0f.jpg alt width300 height200 !-- src 为图像路径alt 为替代文字 --
// 使用width和height设置图片的大小
/body
/html 6. 表单
表单用于收集用户输入
form定义表单。label为输入框提供标签。input用于用户输入的字段。required 属性表示该字段为必填。
!DOCTYPE html !-- 声明文档类型 --
html langzh !-- 设置语言 --
headmeta charsetUTF-8 !-- 设置字符编码 --meta nameviewport contentwidthdevice-width, initial-scale1.0 !-- 适应不同设备 --title我的第一个网页/title !-- 网页标题 --
/head
bodyform action/submit methodPOST !-- action 指定表单提交的 URL --label forname姓名:/labelinput typetext idname namename required !-- 文本输入 --label foremail电子邮件:/labelinput typeemail idemail nameemail required !-- 电子邮件输入 --input typesubmit value提交 !-- 提交按钮 --/form
/body
/html7.语义元素
这些元素提供了更清晰的文档结构有助于 SEO 和可访问性。 header头部内容/header
nav导航链接/nav
article文章内容/article
aside侧边栏内容/aside
footer页脚内容/footer希望这个模块对你学习 HTML 有所帮助如果你有任何问题欢迎随时提问。
