代理会计公司网站模版,三门峡网站建设电话,国内装修公司排名,大连网站建设新图闻任务目标
理解HTML文档的基本结构#xff0c;掌握常见的HTML标签及其用途#xff0c;创建一个简单的个人简介网页。
学习内容脑图 #mermaid-svg-5GTdqH41gawr4v0h {font-family:trebuchet ms,verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…任务目标
理解HTML文档的基本结构掌握常见的HTML标签及其用途创建一个简单的个人简介网页。
学习内容脑图 #mermaid-svg-5GTdqH41gawr4v0h {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-5GTdqH41gawr4v0h .error-icon{fill:#552222;}#mermaid-svg-5GTdqH41gawr4v0h .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-5GTdqH41gawr4v0h .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-5GTdqH41gawr4v0h .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-5GTdqH41gawr4v0h .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-5GTdqH41gawr4v0h .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-5GTdqH41gawr4v0h .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-5GTdqH41gawr4v0h .marker{fill:#333333;stroke:#333333;}#mermaid-svg-5GTdqH41gawr4v0h .marker.cross{stroke:#333333;}#mermaid-svg-5GTdqH41gawr4v0h svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-5GTdqH41gawr4v0h .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-5GTdqH41gawr4v0h .cluster-label text{fill:#333;}#mermaid-svg-5GTdqH41gawr4v0h .cluster-label span{color:#333;}#mermaid-svg-5GTdqH41gawr4v0h .label text,#mermaid-svg-5GTdqH41gawr4v0h span{fill:#333;color:#333;}#mermaid-svg-5GTdqH41gawr4v0h .node rect,#mermaid-svg-5GTdqH41gawr4v0h .node circle,#mermaid-svg-5GTdqH41gawr4v0h .node ellipse,#mermaid-svg-5GTdqH41gawr4v0h .node polygon,#mermaid-svg-5GTdqH41gawr4v0h .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-5GTdqH41gawr4v0h .node .label{text-align:center;}#mermaid-svg-5GTdqH41gawr4v0h .node.clickable{cursor:pointer;}#mermaid-svg-5GTdqH41gawr4v0h .arrowheadPath{fill:#333333;}#mermaid-svg-5GTdqH41gawr4v0h .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-5GTdqH41gawr4v0h .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-5GTdqH41gawr4v0h .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-5GTdqH41gawr4v0h .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-5GTdqH41gawr4v0h .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-5GTdqH41gawr4v0h .cluster text{fill:#333;}#mermaid-svg-5GTdqH41gawr4v0h .cluster span{color:#333;}#mermaid-svg-5GTdqH41gawr4v0h div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-5GTdqH41gawr4v0h :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 掌握常用HTML标签 !DOCTYPE html: 声明文档类型 html: 根元素 head: 元数据 meta : 字符编码等 title: 文档标题 body: 主体内容 h1到h6: 标题 p: 段落 img: 图像 ul: 无序列表 ol: 有序列表 li: 列表项 a: 超链接 table: 表格 tr: 表格行 th: 表头单元 td: 表格单元 步骤一创建基本的HTML结构
首先我们需要创建一个HTML文档的基本结构。这是所有HTML文档的基础部分。
!DOCTYPE html
html
headmeta charsetUTF-8title我的个人简介/title
/head
body
/body
/html标签介绍
!DOCTYPE html: 声明文档类型为HTML5。它告诉浏览器使用HTML5标准来解析这个文档。html: 定义整个HTML文档的根元素。所有其他HTML元素都包含在这个元素内。head: 包含文档的元数据如标题、样式、脚本。这些内容不会直接显示在网页上。meta charsetUTF-8: 定义文档的字符编码为UTF-8保证文档能够正确显示各种语言的字符。title: 定义文档的标题显示在浏览器的标题栏或标签页上。body: 定义文档的主体内容包含网页上显示的所有内容。
效果展示
创建基本的HTML结构后在浏览器中打开文件您将看到一个空白页面。虽然看起来没有内容但这是一个有效的HTML文档。 步骤二添加标题和简介
现在我们在body中添加一个标题和简介文本。
!DOCTYPE html
html
headmeta charsetUTF-8title我的个人简介/title
/head
bodyh1我的个人简介/h1p欢迎来到我的个人主页这是关于我的一些信息。/p
/body
/html标签介绍
h1: 定义一级标题是文档中最重要的标题。HTML支持六级标题h1到h6依次降低重要性。p: 定义一个段落。浏览器会在段落前后自动添加一些空白。
效果展示
此时在浏览器中打开文件您将看到页面顶部有一个大标题“我的个人简介”以及一段欢迎文本。 步骤三添加个人信息
接下来添加一个小标题和一些个人信息。
!DOCTYPE html
html
headmeta charsetUTF-8title我的个人简介/title
/head
bodyh1我的个人简介/h1p欢迎来到我的个人主页这是关于我的一些信息。/ph2个人信息/h2p姓名张三/pp年龄28/pp职业前端开发工程师/p
/body
/html标签介绍
h2: 定义二级标题重要性次于h1。
效果展示
现在页面上将显示一个二级标题“个人信息”以及个人信息的具体内容。 步骤四添加照片
在“个人信息”部分下添加一张照片。
!DOCTYPE html
html
headmeta charsetUTF-8title我的个人简介/title
/head
bodyh1我的个人简介/h1p欢迎来到我的个人主页这是关于我的一些信息。/ph2个人信息/h2p姓名张三/pp年龄28/pp职业前端开发工程师/ph2照片/h2img srcprofile.jpg alt我的照片
/body
/html标签介绍
img: 用于嵌入图像。必须包含两个属性 src: 指定图像文件的路径。alt: 提供图像的替代文本在图像无法显示时显示有助于搜索引擎优化和无障碍访问。
效果展示
现在页面上将显示一个标题“照片”以及一张图片假设profile.jpg存在。 步骤五添加爱好
添加一个无序列表列出你的爱好。
!DOCTYPE html
html
headmeta charsetUTF-8title我的个人简介/title
/head
bodyh1我的个人简介/h1p欢迎来到我的个人主页这是关于我的一些信息。/ph2个人信息/h2p姓名张三/pp年龄28/pp职业前端开发工程师/ph2照片/h2img srcprofile.jpg alt我的照片h2爱好/h2ulli阅读/lili旅行/lili编程/li/ul
/body
/html标签介绍
ul: 定义一个无序列表。列表项前面通常有一个项目符号。li: 定义列表中的每一项。
效果展示
页面上将显示一个标题“爱好”以及一个无序列表列出你的爱好。 步骤六添加教育背景
添加一个有序列表列出你的教育背景。
!DOCTYPE html
html
headmeta charsetUTF-8title我的个人简介/title
/head
bodyh1我的个人简介/h1p欢迎来到我的个人主页这是关于我的一些信息。/ph2个人信息/h2p姓名张三/pp年龄28/pp职业前端开发工程师/ph2照片/h2img srcprofile.jpg alt我的照片h2爱好/h2ulli阅读/lili旅行/lili编程/li/ulh2教育背景/h2olli小学/lili中学/lili大学/li/ol
/body
/html标签介绍
ol: 定义一个有序列表。列表项按顺序排列前面通常有数字或字母。li: 定义列表中的每一项。
效果展示
页面上将显示一个标题“教育背景”以及一个有序列表列出你的教育背景。 步骤七添加联系方式
最后添加一个超链接来展示你的邮箱地址。
!DOCTYPE html
html
headmeta charsetUTF-8title我的个人简介/title
/head
bodyh1我的个人简介/h1p欢迎来到我的个人主页这是关于我的一些信息。/ph2个人信息/h2p姓名张三/pp年龄28/pp职业前端开发工程师/ph2照片/h2img srcprofile.jpg alt我的照片h2爱好/h2ulli阅读/lili旅行/lili编程/li/ulh2教育背景/h2olli小学/lili中学/lili大学/li/olh2联系方式/h2p邮箱a hrefmailto:exampleexample.comexampleexample.com/a/p
/body
/html标签介绍
a: 用于定义超链接。属性 href 用于指定链接目标。 mailto:: 用于创建电子邮件链接。
效果展示
页面上将显示一个标题“联系方式”和一个电子邮件链接。点击该链接将打开默认的邮件客户端并准备好发送邮件。 步骤八添加表格信息
我们将添加一个表格来展示你的技能。
!DOCTYPE html
html
headmeta charsetUTF-8title我的个人简介/title
/head
bodyh1我的个人简介/h1p欢迎来到我的个人主页这是关于我的一些信息。/ph2个人信息/h2p姓名张三/pp年龄28/pp职业前端开发工程师/ph2照片/h2img srcprofile.jpg alt我的照片h2爱好/h2ulli阅读/lili旅行/lili编程/li/ulh2教育背景/h2olli小学/lili中学/lili大学/li/olh2联系方式/h2p邮箱a hrefmailto:exampleexample.comexampleexample.com/a/ph2技能/h2tabletrth技能/thth熟练度/th/trtrtdHTML/tdtd高级/td/trtrtdCSS/tdtd高级/td/trtrtdJavaScript/tdtd中级/td/tr/table
/body
/html标签介绍
table: 定义一个表格。tr: 定义表格中的一行。th: 定义表头单元格通常加粗并居中。td: 定义表格中的单元格。
效果展示
页面上将显示一个标题“技能”以及一个表格展示你的技能和熟练度。 最终代码
!DOCTYPE html
html
headmeta charsetUTF-8title我的个人简介/title
/head
bodyh1我的个人简介/h1p欢迎来到我的个人主页这是关于我的一些信息。/ph2个人信息/h2p姓名张三/pp年龄28/pp职业前端开发工程师/ph2照片/h2img srcprofile.jpg alt我的照片h2爱好/h2ulli阅读/lili旅行/lili编程/li/ulh2教育背景/h2olli小学/lili中学/lili大学/li/olh2联系方式/h2p邮箱a hrefmailto:exampleexample.comexampleexample.com/a/ph2技能/h2tabletrth技能/thth熟练度/th/trtrtdHTML/tdtd高级/td/trtrtdCSS/tdtd高级/td/trtrtdJavaScript/tdtd中级/td/tr/table
/body
/html总结
在这篇文章中我们学习了如何创建一个基本的HTML文档结构并逐步添加标题、段落、图片、列表、超链接和表格等内容。通过这些步骤您已经掌握了HTML中的一些常用标签及其用途。希望这些内容对您的前端学习有所帮助。
如果您在学习过程中有任何问题请在评论区留言我会及时回复。如果觉得这篇文章对您有帮助别忘了点赞、收藏和关注
