不良网站正能量免费下载,免费学编程网站,镇江网站托管,品牌建设实施细则文章目录 1. HTML常用标签1.1 排版标签1#xff09;标题标签h (熟记)2#xff09;段落标签p ( 熟记)3#xff09;水平线标签hr(认识)4#xff09;换行标签br (熟记)5#xff09;div 和 span标签(重点)6#xff09;排版标签总结 1.2 标签属性1.3 图像标签img (重点)1.4 链… 文章目录 1. HTML常用标签1.1 排版标签1标题标签h (熟记)2段落标签p ( 熟记)3水平线标签hr(认识)4换行标签br (熟记)5div 和 span标签(重点)6排版标签总结 1.2 标签属性1.3 图像标签img (重点)1.4 链接标签(重点)1.5 注释标签1.6 团队约定 2. 路径(重点、难点)2.1概述2.2 绝对路径2.3 相对路径 3. 锚点定位难点4. 列表标签重点4.1 网页中的列表应用的场景有哪些4.2 无序列表 ul 重点4.3 有序列表 ol 了解4.4 自定义列表理解4.5 列表总结 1. HTML常用标签
HTML标签有很多这里我们学习最为常用的后面有些较少用的我们可以查下手册就可以了。
1.1 排版标签
排版标签主要和css搭配使用显示网页结构的标签是网页布局最常用的标签。
1标题标签h (熟记) 单词缩写 head 头部、 标题 为了使网页更具有语义化我们经常会在页面中用到标题标签HTML提供了6个等级的标题即h1-h6
h1 标题文本 /h1
h2 标题文本 /h2
h3 标题文本 /h3
h4 标题文本 /h4
h5 标题文本 /h5
h6 标题文本 /h6显示效果如下 注意 : 一行是只能放一个标题的
2段落标签p ( 熟记) 单词缩写 paragraph 段落 [ˈpærəgræf] 无须记这个单词 可以把 HTML 文档分割为若干段落 在网页中要把文字有条理地显示出来离不开段落标签就如同我们平常写文章一样整个网页也可以分为若干个段落而段落的标签就是
p 文本内容 /p是HTML文档中最常见的标签默认情况下文本在一个段落中会根据浏览器窗口的大小自动换行。
3水平线标签hr(认识) 单词缩写 horizontal 横线 [ˌhɔrəˈzɑntl] 同上 在网页中常常看到一些水平线将段落与段落之间隔开使得文档结构清晰层次分明。这些水平线可以通过插入图片实现也可以简单地通过标签来完成 就是创建横跨网页水平线的标签。其基本语法格式如下 hr /是单标签4换行标签br (熟记) 单词缩写 break 打断 ,换行 在HTML中一个段落中的文字会从左到右依次排列直到浏览器窗口的右端然后自动换行。如果希望某段文本强制换行显示就需要使用换行标签
br /5div 和 span标签(重点) div span 是没有语义的 是我们网页布局主要的2个盒子 想必你听过 cssdiv div 就是 division 的缩写 分割 分区的意思 其实有很多div 来组合网页。 span 跨度跨距范围 语法格式 div/divspan/span他们两个都是盒子用来装我们网页元素的 只不过他们有区别现在我们主要记住使用方法和特点就好了
div标签 用来布局的但是现在一行只能放一个divspan标签 用来布局的一行上可以放好多个span不换行
6排版标签总结
标签名定义说明标题标签作为标题使用并且依据重要性递减段落标签可以把 HTML 文档分割为若干段落 水平线标签没啥可说的就是一条线换行标签 div标签用来布局的但是现在一行只能放一个divspan标签用来布局的一行上可以放好多个span
1.2 标签属性 所谓属性就是外在特性 比如 手机的颜色 手机的尺寸 总结就是手机的。 手机的颜色是黑色 手机的尺寸是 8寸 水平线的长度是 200 图片的宽度 是 300 使用HTML制作网页时如果想让HTML标签提供更多的信息可以使用HTML标签的属性加以设置。其基本语法格式如下
标签名 属性1属性值1 属性2属性值2 … 内容 /标签名
手机 颜色红色 大小5寸 /手机1.3 图像标签img (重点) 单词缩写 image 图像 要想在网页中显示图像就需要使用图像标签接下来将详细介绍图像标签以及和他相关的属性。它是一个单身狗 语法如下
img src图像URL /该语法中src属性用于指定图像文件的路径和文件名他是img标签的必需属性。 **注意: ** 标签可以拥有多个属性必须写在开始标签中位于标签名后面。属性之间不分先后顺序标签名与属性、属性与属性之间均以空格分开。采取 键值对 的格式 key“value” 的格式 重点属性掌握点 src表示链接图片的地址包含图片名称alt当图片不能正常显示提示的文本信息title表示鼠标悬停在图片时显示的信息width图片占屏幕的像素宽度height图片占屏幕的像素高度
img srcxnkl.JPEG alt图片不见了 title这是新年快乐的海报 width15121.4 链接标签(重点) 单词缩写 anchor 的缩写 [ˈæŋkə®] 。基本解释 锚, 铁锚 的 在HTML中创建超链接非常简单只需用标签把文字包括起来就好。 语法格式
a href跳转目标 target目标窗口的弹出方式文本或图像/a属性作用href用于指定链接目标的url地址必须属性当为标签应用href属性时它就具有了超链接的功能target用于指定链接页面的打开方式其取值有_self和_blank两种其中_self为默认值__blank为在新窗口中打开方式。
注意
外部链接 需要添加 http:// www.baidu.com内部链接 直接链接内部页面名称即可 比如 a href“index.html” 首页 如果当时没有确定链接目标时通常将链接标签的href属性值定义为“#”(即href“#”)表示该链接暂时为一个空链接。不仅可以创建文本超链接在网页中各种网页元素如图像、表格、音频、视频等都可以添加超链接。 a hrefhttps://www.baidu.com target_blank百度一下/aa hrefhttps://www.baidu.comimg srcxnkl.JPEG altxxx
/a1.5 注释标签 在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字就需要使用注释标签。 简单解释 注释内容不会显示在浏览器窗口中但是作为HTML文档内容的一部分也会被下载到用户的计算机上查看源代码时就可以看到。 语法格式 !-- 注释语句 -- 快捷键是 ctrl / 注释重要性 注释是给人看的目的是为了更好的解释这部分代码是干啥的 程序是不执行这个代码的
1.6 团队约定 一般用于简单的描述如某些状态描述、属性描述等 注释内容前后各一个空格字符注释位于要注释代码的上面单独占一行 推荐
!-- Comment Text --
div.../div不推荐
div.../div!-- Comment Text -- div!-- Comment Text --...
/div2. 路径(重点、难点)
2.1概述 实际工作中我们的文件不能随便乱放否则用起来很难快速的找到他们因此我们需要一个文件夹来管理他们。 **目录文件夹 ** **根目录 **
打开目录文件夹的第一层 就是 根目录
2.2 绝对路径
绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对指当所有网页引用同一个文件时所使用的路径都是一样的。“F:\web\img\logo.gif”或完整的网络地址例如“http://www.baidu.cn/images/logo.gif”。注意绝对路径用的较少我们理解下就可以了。
2.3 相对路径 以引用文件之网页所在位置为参考基础而建立出的目录路径。因此当保存于不同目录的网页引用同一个文件时所使用的路径将不相同故称之为相对路径。 同一级路径只需输入图像文件的名称即可如img src“baidu.gif” 下一级路径图像文件位于HTML文件同级文件夹下例如文件夹名称为images如img src“images/baidu.gif” 上一级路径在文件名之前加入“…/” 如果是上两级则需要使用 “…/ …/”以此类推 如img src“…/baidu.gif” 相对路径是从代码所在的这个文件出发 去寻找我们的目标文件的而 我们所说的 上一级 下一级 同一级 简单说就是 图片 位于 HTML 页面的位置 3. 锚点定位难点 通过创建锚点链接用户能够快速定位到目标内容。 创建锚点链接分为两步
1. 使用相应的id名标注跳转目标的位置。 (找目标)a href#two第二集/ap idtwo 第二季电视剧剧情 /p2. a hrefhtml02.html#two跳转到html02.html/a 4. 列表标签重点
4.1 网页中的列表应用的场景有哪些
4.2 无序列表 ul 重点
无序列表的各个列表项之间没有顺序级别之分是并列的。其基本语法格式如下
ulli列表项1/lili列表项2/lili列表项3/li......
/ulul就是声明一下。这是一个无序列表li表示列表项 脚下留心 1. ul/ul中只能嵌套li/li直接在ul/ul标签中输入其他标签或者文字的做法是不被允许的。2. li与/li之间相当于一个容器可以容纳所有元素。值描述disc默认值、实心圆circle空心圆square实心方块
案例 bodyp我的电脑/pul typesquareli 我的c盘ul typediscli我的视频/lili我的音乐/lili我的文档/li/ul/lili我的D盘ul typediscli我的视频/lili我的音乐/lili我的文档/li/ul/li/ul
/bodyullip Apple/pimg srchttps://www.apple.com.cn/v/iphone-13-pro/f/images/overview/design/design_display_pro_max__dswn1tntiywm_large_2x.pngalt height200/lilip华为/pimg srchttps://www.apple.com.cn/v/iphone-13-pro/f/images/overview/design/design_display_pro_max__dswn1tntiywm_large_2x.pngalt height200/lilip三星/pimg srchttps://www.apple.com.cn/v/iphone-13-pro/f/images/overview/design/design_display_pro_max__dswn1tntiywm_large_2x.pngalt height200/lilip小米/pimg srchttps://www.apple.com.cn/v/iphone-13-pro/f/images/overview/design/design_display_pro_max__dswn1tntiywm_large_2x.pngalt height200/li/ul4.3 有序列表 ol 了解
有序列表即为有排列顺序的列表其各个列表项按照一定的顺序排列定义有序列表的基本语法格式如下
olli列表项1/lili列表项2/lili列表项3/li......
/ol案例
h32022冬奥会金牌榜/h3olli中国/lili俄罗斯/lili美国/lili日本/lili韩国/li/ol!-- type:1,A,a,I,i -- 4.4 自定义列表理解
定义列表常用于对术语或名词进行解释和描述定义列表的列表项前没有任何项目符号。其基本语法如下
dldt名词1/dtdd名词1解释1/dddd名词1解释2/dd...dt名词2/dtdd名词2解释1/dddd名词2解释2/dd...
/dl 代码示例案例 dldt什么是帅哥/dtdd身高够高/dddd有钱/dddd帅气/dddt什么是美女/dtdd身高够高/dddd有钱/dddd漂亮/dd
/dl4.5 列表总结
标签名定义说明 无序标签里面只能包含li 没有顺序我们以后布局中最常用的列表 有序标签里面只能包含li 有顺序 使用情况较少 自定义列表里面有2个兄弟 dt 和 dd
我们现在还没有学布局现在只要保证2个点
学会什么时候用无序列表 学会什么时候用自定义列表无序列表和自定义列表代码怎么写具体的我们刚才看的布局等我们学了css 在来全面布局。
