程序员做网站美工能过关吗,树莓派搭建wordpress,做网站的电脑配置,做视频网站 带宽多少才合适前言 当今互联网时代#xff0c;网页是我们获取信息、交流和展示自己的重要渠道之一。而HTML#xff08;超文本标记语言#xff09;作为构建网页的基础#xff0c;学习掌握HTML标签成为了必不可少的技能。 标题标签
h1~h6#xff1a;这是用来定义标题的…前言 当今互联网时代网页是我们获取信息、交流和展示自己的重要渠道之一。而HTML超文本标记语言作为构建网页的基础学习掌握HTML标签成为了必不可少的技能。 标题标签
h1~h6这是用来定义标题的标签其级别从h1到h6递减。
示例
h1一级标题/h1
h2二级标题/h2
h3三级标题/h3
h4四级标题/h4
h5五级标题/h5
h6六级标题/h6
预览 段落标签
p这个标签用于定义一个段落。通常用于包裹一段文字或内容并按照段落的方式进行显示。
示例
P这是一个段落。/P
p江湖问路不问心问心能有几分真自古深情留不住唯有谎言得人心。洒尽人间相思泪斩断红尘万缕情。从此天涯多一客孤舟独钓一人行。
/p 预览 换行标签和水平线标签
br该标签用于在文本中插入一个换行符让文本在当前位置进行换行。它是一个单标签没有闭合标签。
hr该标签用于插入一条水平线常用于分隔不同区块或段落之间。它也是一个单标签没有闭合标签。
示例
这是一行文字。br
这是另一行文字。P这是第一段内容。/P
hr
p这是第二段内容。/p
预览 文本格式化标签
strong、em、ins、del等标签更语义化推荐使用。 strong 或 b该标签用于定义强调文本通常会使文本加粗显示。
示例
p这是strong重要的/strong内容。/p
预览 em 或 i该标签用于强调文本通常用于斜体显示。
示例
P这是em强调的/em内容。/P
预览 ins 或 u该标签用于定义下划线文本使文本带有下划线。
示例
p这是ins下划线的/ins文本。/p
预览 del 或 s该标签用于定义删除线文本将文本显示为删除线样式。
示例
p这是del删除的/del文本。/p
预览 sup该标签用于定义上标文本将文本显示在上方略高位置。
示例
p让 x sup2/sup表示x的平方。/p
预览 sub该标签用于定义下标文本将文本显示在下方略低位置。
示例
pH sub2/subO表示水分子。/p
预览 图像标签
img该标签用于插入图片。它是一个单标签不需要闭合。
属性作用说明src 指定图片URL 或路径 表示图表的来源alt替换文本图片无法显示的时候显示的文字title提示文本鼠标悬停在图片上时显示的文字width图片宽度height图片高度
图片高度和宽度一般使用CSS来设置。
示例
img src..\images\小丑.jpg alt这是小丑 width99 height99 title小丑预览 无法显示时 超链接标签
a该标签用于创建链接。
属性作用说明href指定链接的目标地址可以是一个URL地址一个相对路径或一个锚点IDtarget指定链接的打开方式 常见取值 _blank在新窗口或标签页中打开链接。 _self在当前窗口或标签页中打开链接。默认行为 _parent在父级框架中打开链接。 _top在最顶层的框架中打开链接。
示例
a hrefhttps://example.com/ target_blank这是一个外部链接/a
预览 多媒体标签
audio该标签用于嵌入音频内容。它可以将音频文件播放给用户并提供控制音频的各种功能。
属性作用说明src指定音频的路径或URL音频的来源control显示播放器的默认控件播放/暂停按钮、音量调节、进度条等autoplay在页面加载时自动开始播放音频loop循环播放音频preload指定何时预加载音频 取值 none不预加载音频。默认值 metadata仅预加载音频的元数据如音频时长、标题等。 auto在页面加载时自动预加载整个音频文件。
示例
audio srcE:\音乐\把回忆拼好给你 - cici_.mp3 controls/audio
预览 video该标签用于嵌入视频内容。它可以在网页上显示和播放视频并提供一系列控制功能。
属性作用说明src指定视频文件的路径或URL视频的来源control显示默认的视频控件播放/暂停按钮、音量调节、进度条等muted静音播放autoplay在页面加载时自动开始播放视频loop循环播放视频preload指定何时预加载视频 取值 none不预加载视频。默认值 metadata仅预加载视频的元数据如视频时长、标题等。 auto在页面加载时自动预加载整个视频文件。 width设置视频显示的宽度height设置视频显示的高度 示例
video srcE:\视频\动漫剪辑.mp4 controls width300 height200/video
预览 列表标签
无序列表
无序列表是HTML中用于显示项目或事项列表的标记。使用ul元素来创建无序列表并在其中使用li表示每个列表项。
示例
ulli第一项/lili第二项/lili第三项/li
/ul
预览 可以在li元素中使用任意的内容例如文本、图像、链接等。对于复杂的列表可以嵌套的ul列表放置在li元素内部以创建多级的层次结构。
示例
ulli水果/liulli橙子/lili苹果/lili香蕉/li/ulli动物/liulli鸡/lili猫/lili狗/li/ul
/ul
预览 有序列表
有序列表是HTML中用于显示按顺序排列的项目或事项列表的标记。使用ol元素来创建有序列表并在其中使用li元素表示每个列表项。
示例
olli第一项/lili第二项/lili第三项/li
/ol
预览 与无序列表类似可以在li元素中使用任何内容包括文本、图像、链接等。也可以嵌套的ol列表创建多级的有序列表。
示例
olli水果/liolli苹果/lili香蕉/lili橙子/li/olli动物/liolli鸡/lili猫/lili狗/li/ol
/ol
预览 表格
表格是HTML中用于展示数据和信息的标记。
标签名作用说明table表示整个表格它是其他表格元素的容器caption定义表格的标题位于table标签之内紧接着table后面用于描述整个表格内容thead定义表格的页眉部分一般用于显示列标题tbody定义表格的主体部分包含了表格的主体数据tfoot定义表格的页脚部分一般用于显示总计、平均值等统计信息tr表示表格中的每一行行标签它是table、thead、tbody、tfoot的子元素th表示表格中的表头单元格通常使用粗体字并居中显示td表示表格中的数据单元格包含了实际的数据 table标签属性
borber设置表格边框的宽度。cellpadding设置单元格内容与单元格边框之间的空白距离。cellspacing设置单元格直接的间距。
示例
table border1 cellspacing0caption学生成绩表/captiontheadtrth姓名/thth数学成绩/thth语文成绩/thth英语成绩/th/tr/theadtbodytrtd张三/tdtd90/tdtd85/tdtd92/td/trtrtd李四/tdtd78/tdtd88/tdtd82/td/tr/tbodytfoottrtd总平均分86.75/tdtd/tdtd/tdtd/td/tr/tfoot
/table
预览 合并单元格
在表格中可以使用th和td的属性colspan和rowspan来合并单元格。
colspan属性用于指定单元横向合并的列数。
示例
将上表中总平均分那一行四个单元格合并为一个单元格
tfoottrtd colspan4总平均分86.75/td/tr
/tfoot
预览 rowspan属性用于指定单元格纵向合并的行数。
示例
将上表中英语成绩那列两个单元格合并成一个 tbodytrtd张三/tdtd90/tdtd85/tdtd rowspan292/td/trtrtd李四/tdtd78/tdtd88/td/tr/tbody
预览 注意合并单元格后一定要将多余的单元格删掉不然会出现下列情况 表单
在HTML中表单Form用于收集用户输入的数据并将其提交到服务器进行处理。
form该标签用来定义一个包含表单元素的区域将所有的表单控件放在form标签内。
属性作用说明action指定表单数据提交的目标URLmethod指定表单数据提交的HTTP方法常见取值有GET和POST。enctype指定表单数据在提交时的编码类型主要用于支持文件上传功能。target指定表单提交后数据返回的目标窗口或框架 常见取值 _self当前窗口打开默认值 _blank在新窗口打开 input该标签用于接收用户输入的各种类型的数据如文本、密码、日期等。具体类型由type属性指定。
type属性值说明text文本输入框用于输入单行文字。password密码输入框输入的字符被隐藏为圆点或星号。email邮箱输入框用于输入电子邮件地址。number数字输入框限制输入为数值类型。checkbox复选框允许用户选择多个选项。radio单选按钮允许用户选择多个选项。submit提交按钮用于触发表单的提交作用。file文件上传框用于选择本地文件进行上传。
input常用属性
name指定输入字段的名称用于在提交表单时标识该字段的值placeholder提供对用户信息预期输入内容的提示信息value设置输入字段的初始值required表示该字段为必填项在提交表单时需要进行验证默认为非空字段。maxlength限制输入字段的最大长度超过指定长度的字符将会被截断。checked用于默认选中复选框或单选按钮。
示例
文本框input typetext placeholder请输入用户名
brbr
密码输入框input typepassword placeholder请输入密码
brbr
邮箱输入框input typeemail
brbr
数字输入框input typenumber
brbr
复选框input typecheckbox
brbr
单选按钮input typeradio namegender checked男
input typeradio namegender女
brbr
提交按钮input typesubmit
brbr
文件上传框input typefile
预览 select和option该标签用于创建下拉列表select是下拉列表的整体option是下拉列表的一个选项。
select标签属性
name指定表单控件的名称用于在提交表单时标识该控件的值。size设置下拉列表中可见的选项数目。multiple表示是否允许选择多个选项。
option标签属性
value指定选项的值。selected指定默认选项。disabled表示选项是否禁用。
示例
城市
selectoption北京/optionoption深圳/optionoption selected上海/optionoption广州/option
/select
预览 textarea该标签创建文本输入域允许用户输入多行文本。
textarea一些属性
rows和cols分别设置文本输入域的显示行数和列数。可以通过调整这些属性来控制文本框的大小。placeholder设置一个占位符文本作为用户未输入时文本输入域内的灰色提示文本。
示例
textarea cols30 rows5 placeholder请输入···/textarea
预览 label该标签用于为表单控件定义标签文本以便增强用户界面的可用性和可访问性。
示例
用label标签绑定文字和表单控件的关系增大表单控件的点击范围。
!-- 写法1只包裹内容不包裹表单控件 --
input typeradio idman
label forman男/label!-- 写法2包裹文字和表单控件 --
labelinput typeradio女/label
预览
这样点击文字也可以选中单选按钮。 button该标签用于创建一个可点击的按钮。它可以与JavaScript代码一起使用实现交互功能并响应用户的点击事件。
button标签的一些属性
type指定按钮的类型默认为submit。常用类型包括submit提交表单点击后提交数据到后台、reset重置表单点击后将表单控件恢复默认值和button普通按钮默认没有功能一般配和JavaScript使用。name和value用于将按钮的名称和值作为键值对提交到服务器或处理表单数据。
示例
button typesubmit提交/button
预览 无语义的布局标签
div该标签是HTML中的一个无语义的块级元素被用于将一组相关的内容包裹在一个容器中。它通常用于布局和样式的目的。 1.包裹内容可以使用div标签来包裹其他HTML元素或文本内容创建一个独立的区块。这使得可以对这个区块进行样式、操作或布局上的调整。
示例
divh1这是一个标题。/h1p这是一个段落。/p
/div
预览 2.划分布局div标签可以划分页面布局的不同部分使其具有不同的样式或行为。例如可以将页面分为页眉、内容区域和页脚每个部分用一个div标签包裹。
示例
div idheader!-- 页眉内容 --
/divdiv idcontent!-- 内容区域 --
/divdiv idfooter!-- 页脚内容 --
/div
3.CSS样式选择器容器div标签经常用作CSS选择器的容器通过为div添加类名或ID可以通过CSS将样式应用到其中的内容。
示例
div classcontainerh1标题/h1p这是一个段落。/p
/div span该标签是HTML的一个内联元素用于标记文本中的小片段或行内元素。与div标签不同span标签通常用于对文本进行样式、处理或标记而不会创建独立的区块。
文本样式可以使用span标签将文本片段包裹起来并应用样式或类名来对其进行格式化或添加特殊效果。
示例
p这是一段正常的文本span classhighlight这是一个高亮文本片段/span然后继续正常文本。
/p
span标签还有其他常用用法例如操作或处理元素、表单处理等。 字符实体
字符实体是一种特殊的编码方式用于在HTML中表示特殊字符或无法直接输入的字符。
一些常见字符实体示例
实体名称描述显示lt;小于号gt;大于号amp;和符号quot;双引号apos;单引号nbsp;非断空格euro;欧元符号€pound;英镑符号£
