网站搭建策略与方法是什么,深圳百度公司地址在哪里,多媒体设计与制作毕业设计,长沙住房建设部网站文章目录 前言1.介绍2.组成3.基本框架4.常见标签4.1双标签4.1.1.标题标签4.2.2段落标签4.1.3文本格式化标签4.1.4超链接标签4.1.5视频标签4.1.6 音频标签 4.2单标签4.2.1换行标签和水平线标签4.2.2 图像标签 5.表单控件结语 前言
生活中处处都有网站#xff0c;无论你是学习爬… 文章目录 前言1.介绍2.组成3.基本框架4.常见标签4.1双标签4.1.1.标题标签4.2.2段落标签4.1.3文本格式化标签4.1.4超链接标签4.1.5视频标签4.1.6 音频标签 4.2单标签4.2.1换行标签和水平线标签4.2.2 图像标签 5.表单控件结语 前言
生活中处处都有网站无论你是学习爬虫还是学习web前端开发HTML(超文本标记语言)都值得你认真学习本篇博客主要介绍了HTML语言的基本语法以及常见标签的使用方法希望带你快速入门HTML语言。
1.介绍
HTML超文本标记语言:是创建网页的基础标准语言。它结构简单由一系列标签组成易于学习且具有跨平台性能在不同操作系统和设备上通过浏览器显示。HTML 的标签和属性可定义网页结构与内容展示文本、图片、视频等多种类型内容还能定义页面结构。
2.组成
主要有标签、属性、元素三部分组成 标签HTML 标签是用来标记网页内容的元素。每个标签都有特定的含义和用途。 属性标签可以带有属性属性提供了关于标签的更多信息。 元素由开始标签、内容和结束标签组成的整体称为元素。
3.基本框架
主要由head 和body两部分组成 代码展示
!-- html:超文本标记语言 --!DOCTYPE html
html langen!-- head:网页头部存放给浏览器看的代码css --
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0!-- title:网页标题 --titleDocument/title
/head
!-- body:网页主体存放给用户看的代码图片文字等 --
body/body
/html4.常见标签
4.1双标签
4.1.1.标题标签
标题标签h有很多等级显示的大小并不相同 示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 标题标签双标签h1-h6 --!-- 特点1.文字加粗 2.字号逐渐减小 3.独占一行 --!-- h1标签在一个网页中只能用一次用来新闻标题或网页logo --h1标题一/h1h2标题二/h2h3标题三/h3h4标题四/h4h5标题五/h5h6标题六/h6
/body
/html运行结果
4.2.2段落标签
段落标签p用来产品介绍或者新闻内容 示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 段落标签p双标签 用来产品介绍或者新闻内容--!-- 特点1.独占一行 2.段落之间存在空隙 3.自动换行--p语文是基础教育课程体系中的一门重点教学科目其教学的内容是语言文化其运行的形式也是语言文化。语文能力是学习其他学科和科学的基础也是一门重要的人文社会科学是人们相互交流思想等的工具。具有工具性与人文性的统一特点。《语文》也是中国的学校等教育机构开设的一门主要学科。/pp语文是基础教育课程体系中的一门重点教学科目其教学的内容是语言文化其运行的形式也是语言文化。语文能力是学习其他学科和科学的基础也是一门重要的人文社会科学是人们相互交流思想等的工具。具有工具性与人文性的统一特点。《语文》也是中国的学校等教育机构开设的一门主要学科。/p
/body
/html4.1.3文本格式化标签
文本格式化标签为文本添加特殊格式以突出重点默认不会换行 示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 文本格式化标签为文本添加特殊格式以突出重点。常见的文本格式加粗倾斜下划线删除线等 --!-- 加粗b/b或者strong/strong --原字体b原字体/bstrong原字体/strong!-- 倾斜em/em或者i/i --em原字体/emi原字体/i!-- 下划线ins/ins或者 u/u--ins原字体/insu原字体/u!-- 删除线 --del原字体/dels原字体/s
/body
/html运行结果
4.1.4超链接标签
超链接标签a用于跳转至其他页面或者网站等 示例代码
!DOCTYPE html
html langch
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 超链接点击跳转到其他页面 a href/a --!-- href属性值为跳转的网址或者文件一般为html文件 --a hrefhttps://www.baidu.com/百度/aa href./7.图像标签.html 个人图像标签/a!-- target标签属性值_blank可以打开一个新窗口(新窗口跳转) --a href./source/1.jpg target_blank白鹿/a!-- 开发初期不知道超链接的跳转地址href属性值写“#”表示空链接不会跳转--a href#空链接/a
/body
/html运行结果
4.1.5视频标签
视频标签video用于在网页中插入视频
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 视频标签:video src/video --!-- src属性: 视频的url--!-- controls属性:显示视频控制面板 --!-- loop属性:循环播放 --!-- muted属性:静音播放 --!-- autoplay属性:自动播放 为了提升用户体验,浏览器支持在静音下自动播放--video srcC:\Users\c\Videos\Captures\自动化网页调试.mp4 controls loop muted autoplay/video
/body
/html4.1.6 音频标签
音频标签audio用于在网页中插入音频 示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 音频标签: audio src音频的url/audio --!-- src属性:音频的url --!-- controls属性:显示音频的控制面板 --!-- loop属性:循环播放 --!-- autoplay属性:自动播放 为了提升用户体验,浏览器一般会禁用自动播放功能 --!-- 注:在HTML5里面如果属性值和属性名相同,可以简写成一个单词 --audio src播放音频的路径 controls loop autoplay/audio
/body
/html4.2单标签
4.2.1换行标签和水平线标签
换行标签br用于换行显示文本 水平线标签hr显示一条水平线 示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 单标签 不包含内容--!-- 1.换行br --第一行内容br第二行内容!-- 2.水平线hr --hr第三行内容
/body
/html运行结果
4.2.2 图像标签
图像标签用于在网页中插入图片
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 图像标签在网页中插入图片 img src图片的url alt 默认不换行 各属性之间用空格隔开顺序不分先后 --!-- src属性绝对路径或者相对路径或者在线网址用于指定图像的位置和名称是img的必须属性 --img src./source/1.jpg !-- alt属性替换文本图片无法显示的时候显示文字 --!-- mudiweile解决以前的问题由于网速过慢图片加载不出来 --img src./source/3.jpg alt失败!-- title属性提示文本鼠标悬停在图片上面的时候显示的文字 --img src./source/2.jpg alt title风景画!-- width图片的宽度值为数字(像素)没有单位默认等比缩放 --!-- heighth图片的高度值为数字像素没有单位默认等比缩放--img src./source/1.jpg width100 height100 img srchttps://profile-avatar.csdnimg.cn/4e80a12a108b4a1aba499e2288e78654_2401_85464956.jpg!1 alt加载失败
/body
/html备注上述代码图片需要按相应的文件夹放置采用的是相对路径
5.表单控件
form 表单是用于收集用户输入信息并将其提交到服务器进行处理的一种 HTML 元素。它由form标签开始以/form标签结束。 示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- form标签表单控件 --form actionh1注册信息/h1h3个人信息/h3label姓名/labelinput typetext placeholder请输入您的真实姓名br密码input typepassword placeholder请输入密码br确认密码input typepassword placeholder请再次输入密码br性别labelinput typeradio namesex男/labellabelinput typeradio namesex女/labelbr居住城市selectoption上海/optionoption北京/optionoption南京/optionoption selected合肥/optionoption 武汉/option/selecth3教育信息 /h3最高学历select option 博士/optionoption 硕士/optionoption selected学士/optionoption 高中及其以下/option/selectbrlabel学校名称/labelinput typetextbrlabel 所学专业/labelinput typetextbrlabel在校时间/labelselect option 2022/optionoption 2023/optionoption selected2024/optionoption 2021/option/select---select option 2022/optionoption 2023/optionoption selected2024/optionoption 2021/option/selecth3工作经历:/h3label公司名称:/labelinput typetextbrlabel 工作描述:/labelbrtextarea cols30 rows10/textareabrinput typecheckboxlabel 已同意以下协议/labelullia href#《用户服务协议》/a/lilia href#《隐私协议》/a/li/ulbrbutton免费注册/buttonbutton typereset重新填写/button/form/body
/html运行结果
结语
通过本篇博客的学习希望你能对HTML语言有初步的了解更多内容可以参考官方文档进行学习。如有不足还请批评指出
