建设网站有哪些问题,个人建什么样的网站,微信应用平台开发,如何用wordpress插件文章目录 HTML知识点详解教程1. HTML基本语法2. HTML标签详解2.1 分区标签 div2.2 标题标签 h1 ~ h62.3 段落标签 p2.4 图片标签 img2.5 列表标签 ul 和 ol无序列表 ul有序列表 ol 2.6 超链接标签 div2.2 标题标签 h1 ~ h62.3 段落标签 p2.4 图片标签 img2.5 列表标签 ul 和 ol无序列表 ul有序列表 ol 2.6 超链接标签 a2.7 表单标签 form2.8 表格标签 table2.9 框架标签 iframe 案例实践个人简介网页 HTML知识点详解教程
1. HTML基本语法
HTML 是用来定义网页结构的标记语言。一个 HTML 文档的基本结构如下
html复制代码
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML 基础/title
/head
bodyh1欢迎学习 HTML/h1p这是一个简单的 HTML 文档示例。/p
/body
/html解析
!DOCTYPE html声明 HTML5 文档类型。htmlHTML 文档的根标签。head包含元信息如标题、字符集。body网页的主要内容部分。 2. HTML标签详解
以下列举图片中涉及的所有 HTML 标签并附详细代码示例。
2.1 分区标签 div
div 是常用的分区标签用于分隔内容块。
html复制代码
div stylebackground-color: lightblue; padding: 20px;h2这是一个分区/h2p分区中的段落文字。/p
/div2.2 标题标签 h1 ~ h6
HTML 提供了 6 级标题标签表示从大到小的标题层级。
html复制代码
h1一级标题/h1
h2二级标题/h2
h3三级标题/h3
h4四级标题/h4
h5五级标题/h5
h6六级标题/h62.3 段落标签 p
段落标签用于表示正文内容。
html复制代码
p这是一个段落。/p
p这是另一个段落。/p2.4 图片标签 img
用于在网页中插入图片。
html复制代码
img srchttps://via.placeholder.com/150 alt示例图片 width150 height150属性解析
src图片的路径。alt图片的替代文本用于无障碍访问。width 和 height定义图片的宽高。
2.5 列表标签 ul 和 ol
无序列表 ul
html复制代码
ulliHTML/liliCSS/liliJavaScript/li
/ul有序列表 ol
html复制代码
olli第一步/lili第二步/lili第三步/li
/ol2.6 超链接标签 a
用于创建链接。
html复制代码
a hrefhttps://www.csdn.net target_blank访问CSDN/a属性解析
href目标链接。target_blank在新窗口中打开链接。
2.7 表单标签 form
表单用于用户输入数据并提交给服务器。
html复制代码
form action/submit methodpostlabel forname姓名/labelinput typetext idname namenamebrlabel foremail邮箱/labelinput typeemail idemail nameemailbrinput typesubmit value提交
/form2.8 表格标签 table
用于展示结构化数据。
html复制代码
table border1trth姓名/thth年龄/thth职业/th/trtrtd张三/tdtd25/tdtd程序员/td/trtrtd李四/tdtd30/tdtd设计师/td/tr
/table属性解析
border表格边框宽度。
2.9 框架标签 iframe
用于嵌套其他网页。
html复制代码
iframe srchttps://www.example.com width600 height400/iframe属性解析
src嵌套网页的地址。width 和 height定义框架的宽高。 案例实践个人简介网页
综合上述知识点构建一个简单的个人简介页面
html复制代码
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title个人简介/title
/head
bodyheaderh1个人简介/h1/headermaindiv stylebackground-color: #f0f0f0; padding: 20px;h2关于我/h2p大家好我是张三一名热爱编程的前端开发工程师。/p/divsectionh2兴趣爱好/h2ulli编程/lili阅读/lili旅行/li/ul/sectionsectionh2联系我/h2p邮箱a hrefmailto:zhangsanexample.comzhangsanexample.com/a/p/section/mainfooterp版权所有 © 2024 张三/p/footer
/body
/html希望这份教程对您有所帮助如果喜欢欢迎点赞、收藏并分享
