内蒙建设厅官方网站,wordpress样板,郑州市建设路第二小学网站,手机网站建设公司服务文章目录1. 标题元素标签2. p元素用于在网站上创建一段文本3. 注释4. 页面主要部分标识标签5. 通过使用img元素来为你的网站添加图片6. 使用锚点元素(a)链接到另一个页面7. 使用 section 元素将照片内容与未来的内容分开8. 无序列表(ul)元素#xff0c;列表项(li)元素在列表中…
文章目录1. 标题元素标签2. p元素用于在网站上创建一段文本3. 注释4. 页面主要部分标识标签5. 通过使用img元素来为你的网站添加图片6. 使用锚点元素(a)链接到另一个页面7. 使用 section 元素将照片内容与未来的内容分开8. 无序列表(ul)元素列表项(li)元素在列表中创建项目9. figure 元素代表独立的内容并允许将图像与标题相关联10. 图像标题(figcaption)元素11. 强调 em 元素(斜体)12. 有序列表(ol)13. 将添加一个 Web 表单来收集来自用户的信息14. input 元素允许通过多种方式从 Web 表单中收集数据15. button 元素创建一个可点击的按钮16. 单选按钮 input typeradio17. label 元素18. fieldset 元素19. legend 元素20. 复选框input typecheckbox21. footer 元素22. head 元素23. title 元素24. html 元素25. !DOCTYPE html声明26. meta 元素渲染语言页面自适应设备完整代码效果图1. 标题元素标签
h1到h6标题元素用于表明其下方内容的重要性。 数字越低重要性越高所以h2元素所具有的重要性要低于h1元素。 每页只使用一个h1元素并将重要性较低的标题放在重要性较高的标题之下。
h1Hello World/h1
h2Cat Photos/h22. p元素用于在网站上创建一段文本
pSee more cat photos in our gallery./p3. 注释
注释让你在不影响浏览器显示内容的情况下留下信息它也能让你的代码失效
!-- TODO: Remove h1 --4. 页面主要部分标识标签
HTML5 有些元素能够指明不同的内容区域 这些元素能让你的 HTML 易于阅读并有助于搜索引擎优化SEO和无障碍访问。
main/main5. 通过使用img元素来为你的网站添加图片
img元素只有一个开始标签没有结束标签。 一个没有结束标签的元素它的标签被称为自闭合标签。 在img元素中的src属性明确了一个图片的URL(图片所在的位置)
img srchttps://www.example.com/the-image.jpg所有的img元素都应该有一个alt属性。alt属性的文本值有两个作用第一个作用是让屏幕阅读器可以知晓图片的内容这会对网页的可访问性有很大提升另一个作用是当图片无法加载时页面需要显示的替代文本
img srccat.jpg altA cat6. 使用锚点元素(a)链接到另一个页面
链接的文本必须放置在锚点元素(a)的起始和闭合标签之间
a hrefhttps://www.freecodecamp.orgclick here to go to freeCodeCamp.org/a在p元素的文本中将单词 cat photos 转换为指向 https://freecatphotoapp.com 的链接通过把这些单词放到开始和结束锚点标签(a)内来实现
pSee more a hrefhttps://freecatphotoapp.comcat photos/a in our gallery./p向锚点元素(a)的起始标签中添加值为 _blank 的 target 属性用以在新的标签页中打开链接
pSee more a target_blank hrefhttps://freecatphotoapp.comcat photos/a in our gallery./p锚点元素也可以把其他类型的内容放在锚标签中将其转换成一个链接用必要的元素标签包裹图片把它变成一个链接
a hrefhttps://freecatphotoapp.comimg srchttps://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg altA cute orange cat lying on its back./a7. 使用 section 元素将照片内容与未来的内容分开
section/section8. 无序列表(ul)元素列表项(li)元素在列表中创建项目
ullimilk/lilicheese/li
/ul9. figure 元素代表独立的内容并允许将图像与标题相关联
figure/figure10. 图像标题(figcaption)元素
图像标题(figcaption)元素用于添加标题以描述 figure 元素中包含的图像 在嵌套在 figure 元素中的图像之后添加一个 figcaption 元素
figureimg srchttps://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg altA slice of lasagna on a plate.figcaptionCats love lasagna./figcaption
/figure11. 强调 em 元素(斜体)
将 figcaption 元素中的单词包裹在强调 em 元素中来强调它(斜体)
figcaptionCats emlove/em lasagna./figcaption12. 有序列表(ol)
有序列表(ol)的代码类似于无序列表但有序列表中的列表项在显示时会被编号
olliflea treatment/lilithunder/liliother cats/li
/ol13. 将添加一个 Web 表单来收集来自用户的信息
form/formaction 属性指示应该将表单数据发送到哪里,例如告诉浏览器应该将表单数据发送到路径/submit-url
form action/submit-url/form14. input 元素允许通过多种方式从 Web 表单中收集数据
与 img 元素一样input 元素是自闭合的并且不需要结束标签 使用 type 属性创建多种输入可以创建密码字段、重置按钮或控件让用户从他们的计算机中选择文件 例如创建一个文本字段以从用户那里获取文本输入
input typetext为了通过 action 属性中指定的位置访问表单的数据必须给文本字段一个 name 属性并为其分配一个值来表示数据正在提交
input typetext namecatphotourlplaceholder占位符文本用于提示人们在输入框中输入什么样的信息起提示作用并不是在框内输入内容
input typetext namecatphotourl placeholdercat photo URL为了防止用户在缺少所需信息时提交表单需要将 required 属性添加到 input 元素。 无需为 required 属性设置值。 只需将单词 required 添加到 input 元素确保它和其他属性之间有空格
input typetext namecatphotourl placeholdercat photo URL required15. button 元素创建一个可点击的按钮
例如创建一个带有文本 Click Here 的按钮
buttonClick Here/button在 input 元素下方添加带有文本 Submit 的 button 元素。 单击没有任何属性的表单按钮的默认行为会将表单提交到表单的 action 属性中指定的位置 即使你在文本输入下方添加了按钮它们也会在页面上彼此相邻。 这是因为 input 和 button 元素都是内联元素它们不会出现在新的行上 添加的按钮将默认提交表单 而依赖默认行为可能造成混乱。 将值为 submit 的 type 属性添加到 button 以明确它是一个提交按钮
button type submitSubmit/button16. 单选按钮 input typeradio
对于需要从多个选项中获得一个答案的问题可以使用单选按钮 input typeradio 例如这是一个带有 cat 选项的单选框input typeradio cat 希望单选按钮一次只能选中一个给每一个单选按钮添加相同的 name 属性并设置其值为 account-type以关联单选按钮这样两个单选按钮就无法同时选中了
labelinput typeradio nameaccount-type/ Personal Account/label
labelinput typeradio nameaccount-type/ Business Account/label17. label 元素
label 元素用于帮助将 input 元素的文本与 input 元素本身关联起来尤其是对于屏幕阅读器等辅助技术 例如下列语句使得点击单词 cat 也会选择相应的单选按钮
labelinput typeradio cat/label还有另一种方法可以将 input 元素的文本与元素本身相关联。 你可以将文本嵌套在 label 元素中并添加与 input 元素的 id 具有相同值的 for 属性
input idloving typecheckbox label for loving Loving /labelid 属性用于标识特定的 HTML 元素 每个 id 属性的值必须不同于整个页面的所有其他 id 值 当元素具有多个属性时属性的顺序无关紧要
labelinput typeradio idindoor Indoor/label为了使选择一个单选按钮自动取消选择另一个两个按钮必须有具有相同值的 name 属性
labelinput idindoor typeradio nameindoor-outdoor Indoor/label
labelinput idoutdoor typeradio nameindoor-outdoor Outdoor/label为两个单选按钮添加 value 属性 如果选择 Indoor 单选按钮并提交表单则该按钮的表单数据基于其 name 和 value 属性。 由于单选按钮没有 value 属性因此表单数据将包含 indoor-outdooron这在有多个按钮时没有用处 为两个单选按钮添加 value 属性。 为方便起见将按钮的 value 属性设置为与其 id 属性相同的值
labelinput idindoor typeradio nameindoor-outdoor value indoor Indoor/label
labelinput idoutdoor typeradio nameindoor-outdoor value outdoor Outdoor/label18. fieldset 元素
fieldset 元素用于在 Web 表单中将相关的输入和标签组合在一起 fieldset 元素是块级元素这意味着它们出现在新的一行上
fieldset/fieldset加上fieldset 元素之后
19. legend 元素
legend 元素充当 fieldset 元素中内容的标题它为用户提供了有关他们应该在表单的该部分中输入什么的上下文
fieldsetlegendIs your cat an indoor or outdoor cat?/legendlabelinput idindoor typeradio nameindoor-outdoor valueindoor Indoor/labellabelinput idoutdoor typeradio nameindoor-outdoor valueoutdoor Outdoor/label
/fieldset20. 复选框input typecheckbox
对于可能有多个答案的问题表单通常使用复选框。 例如这是一个带有 tacos 选项的复选框input typecheckbox tacos 将值为 personality 的 name 属性添加到复选框 input 元素。虽然你不会在浏览器中注意到这一点但这样做会使服务器更容易处理你的 Web 表单尤其是当有多个复选框时
input idloving typecheckbox namepersonality label forlovingLoving/label与单选按钮一样选中复选框的表单数据是 name / value 属性对。 虽然 value 属性是可选的但最好将它包含在页面上的任何复选框或单选按钮中。为每个复选框添加一个 value 属性为方便起见将每个复选框的 value 属性设置为与其 id 属性相同的值
input idloving typecheckbox namepersonality valueloving label forlovingLoving/label
input idlazy typecheckbox namepersonality valuelazy label forlazyLazy/label为了使复选框或单选按钮默认被选中需要为其添加 checked 属性。 无需为 checked 属性设置值。 只需将单词 checked 添加到 input 元素确保它和其他属性之间有空格。(默认选中第一个单选按钮和第一个复选框)
labelinput idindoor typeradio nameindoor-outdoor valueindoor checked Indoor/label
input idloving typecheckbox namepersonality valueloving checked label forlovingLoving/label21. footer 元素
向页面添加页脚部分。在 main 元素之后添加 footer 元素
22. head 元素
到目前为止添加到页面的所有内容都在 body 元素内 应该呈现到页面的所有页面内容元素都放在 body 元素中。 但是其他重要信息位于 head 元素中。在 body 元素上方添加一个 head 元素
23. title 元素
title 元素决定了浏览器在页面的标题栏或选项卡中显示的内容
headtitleCatPhotoApp/title
/headtitle 元素为搜索引擎提供了有关页面的额外信息。 它还通过以下两种方式显示 title 元素的内容
当页面打开时在标题栏中当你把鼠标悬停在该页面上时在浏览器标签中。 即使该标签未被激活一旦你将鼠标悬停在该标签上title 文本就会显示出来
24. html 元素
页面的全部内容都嵌套在 html 元素中。 所有其他元素必须是此 html 元素的后代。 将值为 en 的 lang 属性添加到开始 html 标签以指定页面的语言为英语
html langen25. !DOCTYPE html声明
所有页面都应以 !DOCTYPE html 开头。 这个特殊的字符串被称为声明并确保浏览器尝试满足行业范围的规范。将此声明添加为代码的第一行
26. meta 元素
你可以通过在 head 中添加自闭合的 meta 元素来设置浏览器行为
渲染语言
通过创建一个 meta 元素作为 head 元素的子元素告诉浏览器渲染 markdown 为多种语言。 将其 charset 属性设置为 UTF-8
head
meta charsetUTF-8
titleCatPhotoApp/title
/head页面自适应设备
在 head 中添加另一个自闭合的 meta 元素。 给它一个 name 属性值为 viewport和一个 content 属性值为 widthdevice-width, initial-scale1.0这样你的页面在各种设备上看起来是一样的
meta nameviewport contentwidthdevice-width, initial-scale1.0完整代码
!DOCTYPE htmlhtml langen
head
meta charsetUTF-8titleCatPhotoApp/title/headbodymainh1CatPhotoApp/h1sectionh2Cat Photos/h2!-- TODO: Add link to cat photos --pSee more a target_blank hrefhttps://freecatphotoapp.comcat photos/a in our gallery./pa hrefhttps://freecatphotoapp.comimg srchttps://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg altA cute orange cat lying on its back./a/sectionsectionh2Cat Lists/h2h3Things cats love:/h3ullicat nip/lililaser pointers/lililasagna/li/ulfigureimg srchttps://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg altA slice of lasagna on a plate.figcaptionCats emlove/em lasagna./figcaption /figureh3Top 3 things cats hate:/h3olliflea treatment/lilithunder/liliother cats/li/olfigureimg srchttps://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg altFive cats looking around a field.figcaptionCats stronghate/strong other cats./figcaption /figure/sectionsectionh2Cat Form/h2form actionhttps://freecatphotoapp.com/submit-cat-photofieldsetlegendIs your cat an indoor or outdoor cat?/legendlabelinput idindoor typeradio nameindoor-outdoor valueindoor checked Indoor/labellabelinput idoutdoor typeradio nameindoor-outdoor valueoutdoor Outdoor/label/fieldsetfieldsetlegendWhats your cats personality?/legendinput idloving typecheckbox namepersonality valueloving checked label forlovingLoving/labelinput idlazy typecheckbox namepersonality valuelazy label forlazyLazy/labelinput idenergetic typecheckbox namepersonality valueenergetic label forenergeticEnergetic/label/fieldsetinput typetext namecatphotourl placeholdercat photo URL requiredbutton typesubmitSubmit/button/form/section/mainfooterpNo Copyright - a hrefhttps://www.freecodecamp.orgfreeCodeCamp.org/a/p/footer/body
/html效果图
