本文介绍了HTMLBoilerplate的基本结构，包括HTML5文档类型声明、元数据、标题、列表（有序与无序）、超链接的使用以及如何嵌入图片。文章还强调了语义化HTML的重要性，如使用`<section>`、`<article>`等标签，并提到了注释和辅助技术的兼容性。此外，还提及了HTML表格和前端面试中可能涉及的HTML相关问题。
HTML Boilerplate
! + tab 自动生成
<!DOCTYPE html>//use the html5
<html>
<head>
<!--include css, javascrip, font ect.
metadata, nothing shows in the document in self-->
<title>Chicken - coltipida </title>
</head>
<p><h1>Chicken</p></h1>
<body>
</body>
</html> <!--everthing has to go between html -->
自动排版: shift+alt+f
Basic Elements
Lists
ordered: 1.2.3/unordered: bulletin points
<ol> //ordered list
<li>Silkie</li>
<li>silkie Egger</li>
</ol>
<ul> //unordered list
<li>Silkie
<ul>
<li>test</li>
</ul> //nested list
</li>
<li>silkie Egger</li>
</ul>The anchor element
超链接 <a> </a> a+tab 更好用
<a href="http://www.google.com">I am a link</a>
<a href="about.html">I am a link to another page</a>The Image Embed element
<img src="Male_and_female_chicken_sitting_together.jpg">
<img src="pictures/Male_and_female_chicken_sitting_together.jpg" alt = "my pet chicken">
Alt is for if the image is not shown, the text after alt will be shown. Also it is a good resource for the screen reader.
Comments in html
<!--alt attribute will be read by screen reader. -->在我的电脑快捷上是 ctrl + /
其他元素
HTML elements reference - HTML: HyperText Markup Language | MDN
<p></p>
<b></b> Bold
<h1>-<h6> Heading do not use a <h2> without <h1>
<div></div> <span></span>
<section><article><nav><main><header><footer><aside><summary><details> 语义化/Semantic Markup
编写语义化 HTML 是一个好习惯，越早开始越好。它提高了易读性、SEO，同时也不要忘了那些视觉障碍的人，他们会非常感谢你的体贴. 语义化 HTML 指南——div 的十种替换方案
HTML Table HTML Tables
Link: 前端面试题HTML相关。
扫一扫
734
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
