目录
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 -->
2238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
