专业的网站开发公司电话,步骤点页面设计,自己电脑做网站要下载,什么网站做家具出口目录 1.标题标签 2.标题标签的align属性 3.段落标签 4.水平线标签hr 5.换行标签br 6.文本样式标签font 编辑7.文本格式化标签 8.文本语义标签 1#xff09;时间time标签 2#xff09;文本高亮Mark标签 3#xff09;cite标签 9.特殊字符标签 10.图像标签img 附录#xff… 目录 1.标题标签 2.标题标签的align属性 3.段落标签 4.水平线标签hr 5.换行标签br 6.文本样式标签font 编辑7.文本格式化标签 8.文本语义标签 1时间time标签 2文本高亮Mark标签 3cite标签 9.特殊字符标签 10.图像标签img 附录 1.编写的html文件如何使用浏览器打开 2.如果没有默认浏览器打开html文件 3.vscode快速生成html代码模板 4.vscode快速保存 1.标题标签 h
hn align对其方式标题文本/hn !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title标题标签/title /head body h1一级标题标签/h1 hr/hr h2二级标题标签/h2 hr/hr h3三级标题标签/h3 hr/hr h4四级标题标签/h4 hr/hr h5五级标题标签/h5 hr/hr h6六级标题标签/h6 /body /html hn标签一样用于标记文章的标题
标签里面的文章会被解析为对应的样式
hr标签是一个类似分割线的存在
会被解析为横线 效果图 2.标题标签h的align属性
align属性
1)默认左对齐
2)left:文本左对齐
3)center文本居中
4)right: 文本右对其 !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title标题标签的align属性/title /head body h1模式默认对其方式/h1 hr/ h2 alignleft左对齐/h2 hr h1 aligncenter居中对齐/h1 hr/ h3 alignright右对齐/h3 /hr /body /html 效果图 3.段落标签p
作用这个标签用于标记文章的段落 !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title段落标签p/title /head body h1 aligncenter这是一篇文章/h1 p aligncenterhtml介绍/p pHTMLHyperText Markup Language即超文本标记语言是一种用于创建网页的标准标记语言。它通过一系列的标记tags来描述网页的内容和结构从而告诉浏览器如何显示这些内容. 总之HTML是Web的基础它不仅定义了网页的结构还为其他Web技术如CSS和JavaScript提供了基础这些技术共同作用于创建动态且富有交互性的网页。/p /body /html 效果图 4.水平线标签hr
hr就是告诉浏览器你给我显示一个水平的分割线 !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title分割线标签hr/title /head body h1align属性,设置水平线对其方式/h1 hr alignleft/hr h1 size属性设置水平线粗细/h1 hr size10 colorblue/hr h1color设置水平线颜色/h1 hr colorred/hr hr colorgreen/hr h1width属性设置水平线的宽度/h1 hr width20%/hr /body /html 注颜色处理也可以使用 #456789 #l六位十六进制数字 或者是 #123 #三位十六进制数字 效果图 5.换行标签br
作用用于一行文字的换行
注!---- 这个使用来写注释用的 vsCode使用 ctrl/ 可以快速生成 !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title换行标签br/title /head body p aligncenter换行标签的作用/p !-- 没有使用换行标签 -- p aligncenter 七律·到韶山 毛泽东〔近现代〕 别梦依稀咒逝川故园三十二年前。 红旗卷起农奴戟黑手高悬霸主鞭。 为有牺牲多壮志敢教日月换新天。 喜看稻菽千重浪遍地英雄下夕烟。 /p hr colorred size5/hr !-- 使用换行标签 -- p aligncenter 七律·到韶山br 毛泽东〔近现代〕br 别梦依稀咒逝川故园三十二年前。br 红旗卷起农奴戟黑手高悬霸主鞭。br 为有牺牲多壮志敢教日月换新天。br 喜看稻菽千重浪遍地英雄下夕烟。 /p /body /html 效果图: 6.文本样式标签font
作用:font 用于设置字体的风格样式颜色粗细效果
face属性设置字体风格样式size属性设置字体大小color属性设置文字的颜色 !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title文本样式标签font/title /head body h2 aligncenter文本样式标签font/h2 hr colorred/ p font colorblue 控制字体为蓝色/font /p hr color#99689a/ p font size5 控制字体大小为5/font /p hr color#789/ p font face黑体 控制字体为黑体/font /p /body /html 效果图
7.文本格式化标签
文本粗体标签 b 和 strong文本下划线显示标签 u 和 ins文本斜体显示标签 i 和 em文本删除线方式显示标签 s 和 del !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title文本格式化标签/title
/head
bodyh1文本格式化标签/h1hr color#af4578/hrh3文本粗体显示 b 和 strong/h3p colorredb文本使用b标签标签加粗使用/bbrstrong文本使用strong标签使用/strong/phr color#234632/hrh3文本下划线显示 u 和 ins 标签/h3p colorblueu使用u标签为文本加上下划线/ubrins使用ins标签为文本加上下划线/ins/phr color#234632/hrh3文本斜体显示 i 和 em/h3p colorgreeni使用i标签为文本斜着显示/ibrem使用em标签为文本斜着显示/em/phr color#234632/hrh3文本删除线 del 和 s/h3p colorreddel使用del标签为文本加上删除线/delbrs使用s标签为文本加上删除线/s/p/body
/html 效果图 8.文本语义标签
1时间time标签 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title时间语义增强标签time/title
/head
bodyp现在时间是22:32/phr colorred size5/!-- 使用时间语义增强标签 --p现在时间是time datetime2024-10-122:32/time/phr colorgreen size5//body
/html 效果图 2文本高亮Mark标签
作用文字高亮显示 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title文字高亮标签mark/title
/head
bodyp这是一段普通的文字高亮显示文字/ppmark高亮显示的文字/mark/p/body
/html 效果图 3cite标签
作用引用标签 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title文本引用标签cite/title
/head
bodyp这是文本应用标签/p!-- 作用是文本引用 显示的样式是斜体 --cite--今天的时间是2024-10-1/cite/body
/html 效果图 9.特殊字符标签
常用的特殊字符标签 特殊字符描述字符串代码空格nbsp;小于号It;大于号gt;和号amp;人民币yen;©版权copy;°度数deg;®注册商标reg;±正负号plusmn;×乘号 times; ÷除号divide; ²2平方sup2;³3平方sup3; !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title特殊标记符号/title
/head
bodynbsp;br/小于号It;br/大于号gt;br/和号amp;br/人民币yen;br/商标符号:copy;br摄氏度deg;br/br注册商标reg;br!-- 换行符 --plusmn;br乘号times;br/除号divide;br/上标符号sup2;br/sup3;/body
/html 效果图 10.图像标签img
注:
./boy.png 表示当前路径下名字为boy.png的图片/boy.png 表示真实路径下boy.png图片../表示当前目录/表示绝对路径
src属性 图像路径alt属性 文本不显示时出现的数字title属性 鼠标悬浮在图片上的显示的内容width属性 设置图像宽度height属性 设置图像高度border属性 设置图像边框vspace属性 设置图像顶部和底部空白的部分hspace属性 设置图像左侧和右侧的空白algin属性 left 图像在左边right 图像在右边 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title图像标签img/title
/headbodyh3alt属性/h3img src/boy.png alt图片加载失败 width300px height300px/imghr colorred size5/hrh3title属性/h3img src./boy.png title这是一个小男孩 width300px height300px/imghr colorgreen size8/hrbrh3border属性设置边框/h3img src./boy.png title这是一个小男孩 width300px height300px border5px/imghr colorred size5/hrbrh3align属性设置图片对齐方式/h3img src./boy.png title这是一个小男孩 width300px height300px alignright/imghr colorblue size5/hrbrh3hspace属性设置图片水平边距/h3img src./boy.png title这是一个小男孩 width300px height300px alignright hspace50/imghr colorpink size5/hr/body/html 效果图 附录
1.编写的html文件如何使用浏览器打开 使用快捷键 Shift alt r 弹出如下界面 双击点开就可以了 2.如果没有默认浏览器打开html文件
鼠标右键 打开方式 选择浏览器打开就可以了 3.vscode快速生成html代码模板
输入感叹号 点击第一个就可以自动生成了
注这个感叹号必须英文状态下的 4.vscode快速保存
快捷键 ctrls
