目录
Tips & Concept:
1. HTML is Not Case Sensitive
2. Nested HTML structure create a Document Object Model (DOM) Tree
Source: HTML 标签参考手册https://www.w3school.com.cn/tags/index.aspHTML Tutorial
https://www.w3schools.com/html/default.asp
HTML元素通常可以分为两种类型:inline elements,block-level elements
Inline Elements:
- 不会打断并开启新的一行,相邻的 inline elements 会在同一行显示
- 它的宽度和高度由内容决定,不能设置固定的宽度和高度
- 常见元素有
<span>
,<a>
,<strong>
,<em>
,<img>
,<input>
等Block-level Elements:
- 块级元素会独占一行,create a new block,在前后都会自动换行。
- 它的宽度默认为父元素的100%,可以设置固定的宽度和高度。
- 常见元素有
<div>
,<p>
,<h1>
,<ul>
,<li>
,<section>
,<pre>
等
01. 基础框架
<!-- DOCTYPE:告诉浏览器,我们要使用什么规范,不属于HTML标签,在HTML外面 -->
<!DOCTYPE html>
<html>
<head> <!-- head:代表网页头部,包含所有附加信息,都是用户不可见的 -->
<title> HTML Learning </title>
<!-- title:阐明网页标题,标签里的文字会显示在tab上面 -->
<style> ... </style>
<!-- <style> used to define style info (CSS) for a document -->
</head>
<body> <!-- body:表示网页主体,里面写网页的显示内容,全部为用户可见的内容 -->
hello
</body>
</html>
02. 结构性标签 (Structural Tags)
- <html>
- <head>
- <body>
- <header>
- <nav>
- <main>
- <figure> <figcaption>
- <footer> always contains:
- authorship information
- copyright information
- contact information
- sitemap
- back to top links
- related documents
<body>
<header> <!-- header:定义文档的页眉(介绍信息)-->
<h1> HTML Tag </h1>
<nav>
<a href="tag1.html"> 结构性标签 </a>
<a href="tag2.html"> 文本内容标签 </a>
<a href="#"> ... </a>
</nav>
<!-- nav: defines a set of navigation links -->
</header>
<main> <!-- main:阐明文档内容 -->
<section>
<h2> 文本内容标签 (Text Content Tags) </h2>
<p> This is the content. </p>
</section>
<figure>
<img src="img_book.jpg" alt="an HTML Book" hight="200">
<figcaption> Fig1. HTML and CSS </figcaption>
<!-- figcaption: defines a caption for a <figure> element-->
</figure>
<!-- figure: 文档中的独立内容块,用于嵌入图像,音频,视频等多媒体内容 -->
</main>
<footer>
<p>© HTML Learning. All rights reserved.</p>
</footer>
</body>
03. 文本内容标签(Text Content Tags)
- 标题标签 <h>
<h1> 一级标题 </h1> <h2> 二级标题 </h2> <h3> 三级标题 </h3> ... <!-- 标签内容默认单独起一行,数字越小,标题等级越高,显示字体越大 -->
- 段落标签 <p>
<p> 这是一个段落 </p> <!-- 标签里的内容为独立的自然段,跟上下文自动保持一定的行距 -->
- 换行标签 <br/>
故人西辞黄鹤楼<br/> 烟花三月下扬州<br/> 孤帆远影碧空尽<br/> 惟见长江天际流<br/> <!-- HTML中,打字回车只会显示为空格,需要<br/>才能真正的换行(只换行,不添加行距) PS: <br>和<br/>都可以进行换行,后者更为规范 -->
- 水平线标签 <hr/>
总结<hr/> 回顾一年来的工作,... <!-- 自动换行,并在新的一行显示水平线,标签后的内容在水平线下一行 PS: <hr/> <hr> 效果一样,<hr/> 格式更标准 -->
- 字体样式标签
1. 黑体标签 <strong> </strong>、<b> </b> 2. 斜体标签 <em> </em>、<i> </i> 3. 下划线标签 <ins> </ins>、<u> </u> 4. 删除线 <del> </del>、<s> </s> 5. 下标字 subsript <sub> </sub> 5. 上面标字 supersript <sup> </sup> <!-- 以2为底log8 -> log<sub>2</sub><sup>8</sup> --> <!-- 整段斜体或者黑体的话,我们一般用CSS完成,只有个别文字单独特殊时,才用 HTML tag 黑体标签: <strong> importance urgency、<b> bold 斜体标签: <em> emphasis italics, <i> visual-only italics -->
- 引用类标签
< blockquote >: Block-level Element,类似于 <figure>, <section>,default style 是左右缩进
< cite >: Inline Element,定义 the title of a creative work (e.g. a book, a song, a movie, a painting),default style 是斜体样式的
< q >: Inline Element, define quotation. 会自动添加引用符号,且会根据 lang 定义语言的不同,给出不同的引用符号(法语中是《》, 英文中是 " ") - 时间类标签
04. 列表标签(List Tags)
list 会自动跟上下文保持一定的行距
- Ordered List <ol>
考试排名: <ol type="1/a/A/i/I" start="50" reversed> <li> Lily </li> <li> Bruce </li> </ol> <!-- Attribute 【type】: 声明 list type, the default type is '1' 【reversed】: 出现即代表列表倒叙排列 (9,8,7...) 【start】: Specifies the start value of an ordered list -->
- Unordered List <ul>
兴趣爱好: <ul style="list-style-type:circle/square/disc"> <li>唱歌</li> <li>跳舞</li> </ul> <!-- List items will usually be displayed with bullet points. the default style is ‘disc’ -->
- Description List <dl>
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> <!--【dt】defines terms/names, 【dd】describes each term with an indentation -->
05. 链接标签(Link Tags)
- 超链接标签 <a>
Hyperlink Tag 用于从一张页面链接到另一张页面。
【Semantic Attributes】
[ href ]: <a> element 最重要的 attribute,它指示链接的目标。If the <a> tag has no href attribute, it is only a placeholder for a hyperlink.<a href="https://www.google.com/"> 这是一个超链接 </a> <!-- <a> & </a> 之间的部分是超链接所显示的文字 --> a link to a page on the World Wide Web (绝对路径): <a href="https://www.w3schools.com">Visit W3Schools </a> a link to a page on this website (相对路径): <a href="/html/default.asp"> Visit HTML Tutorial </a>
[ target ]: The attribute specifies where to open the linked document.
<a herf=.. target="_blank|_self|_parent|_top|framename"> <!-- Attribute【target】: <a target="_blank">: 在新窗口/tab中打开链接 <a target="_self">: open in the same frame as it was clicked (default) -->
- 图片标签 <img>
⚠️ always specify the width or the height of an image. If width and height are not specified, the page might flicker while the image loads.<img src="girl.jpg" alt="Girl in a jacket" width="500" height="600"> <!-- Attribute 【src】: URL. To specify the path to the image 【alt】: text. To specify an alternate text for an image 【height, width】: To specify the width and height of an image --> 总是在 <figure> 里面: <figure> <img src="moon_on_sea.JPG" alt="a moon on the sea" height="400"> <figcaption> Fig1: A bright moon hangs over the sea </figcaption> </figure>
06. 表单标签 (Form Tags)
<form> is used to create an HTML form for user input,它是与用户交互和数据传输的关键标签
<form action="/action_page.php" name="user_info" method="get|post">
...
...
</form>
<!-- Attributes
【action】: URL, where to send the form-data when a form is submitted
【method】: Specifies the HTTP method to use when sending form-data
【name】: Specifies the name of a form -->
<form target="_blank|_self|_parent|_top|framename">
<!--【target】:规定提交表格过后在哪里显示 received response
<target="_blank">: 在新窗口/tab中打开链接
<target="_self">: open in the same frame as it was clicked -->