html入门（w3cschool学习笔记）

最新推荐文章于 2024-05-28 22:57:50 发布

yogima

最新推荐文章于 2024-05-28 22:57:50 发布

阅读量597

点赞数

分类专栏： java web 文章标签： html 标签入门 w3cschool

本文链接：https://blog.csdn.net/yogima/article/details/79535778

版权

java web 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

<html> 与 </html> 之间的文本描述网页<body>与 </body>之间的文本是可见的页面内容
页面跳转：<META http="refresh" content="秒数;URL=转向页面"/>
<h1> - <h6> 等标签定义标题。HTML heading 标签应该只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。
<hr />标签在 HTML 页面中创建水平线，可用于分隔内容。
注释：
<p>与 </p> 之间的文本被显示为段落，<p>是块级元素，浏览器会自动地在段落的前后添加空行。但是不要用空的段落标记<p></p>去插入一个空行。用<br /> 标签代替它！（但是不要用 <br /> 标签去创建列表。）
<a href="http://www.baidu.com/">This is a link</a> ——链接，如果形式是a href=”/index.html”这样的就是指向本网站上的链接。<a href="#">链接文字</a>：空链接：指指向链接后，鼠标变成手形，但单击后仍停留在当前页面。默认的被链接文档会在原有的窗口中打开，如果将 target 属性设置为 “_blank” 则文档就会在新窗口打开：<a href="//www.baidu.com/" target="_blank">百度一下，你就知道</a>。（Note: 请始终将正斜杠添加到子文件夹。假如这样书写链接：href=”//www.w3cschool.cn/html”，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=”//www.w3cschool.cn/html/”。）创建一个无下划线的链接：<a href="http://www.w3cschool.cn/" style="text-decoration:none;">访问 w3cschool.cn!</a>
图像——<img src="XXX.jpg" width="104" height="142" />。<img> 是空标签，(只包含属性，没有闭合标签)。源属性src 指 “source”，值是图像的 URL 地址。alt属性图像定义一串预备的可替换的文本。在浏览器无法载入图像时，将显示替代文本。src 和 alt是img标签的必需属性。宽度和高度的默认单位为像素。<p><img src="XXX" alt="XX" style="float:left">图片浮动在这个段落的左边</p>
属性——总是在 HTML 元素的开始标签中规定，以名称/值对的形式出现。属性和属性值对大小写不敏感，但推荐使用小写。属性值需要加引号。例：

<h1 align="center"> <!-- align：设置对齐方式 -->
<body bgcolor="yellow"> <!-- 设置背景颜色 -->
<table border="1"> <!-- 设置表格边框信息 -->

<!-- 虽然这里列举的align和bgcolor都已经被淘汰了嘻嘻 -->

常用属性：class、id、style、title
9. 样式——style属性淘汰了一部分旧的属性。应该使用样式代替的标签和属性：

标签	描述
`<center>`	定义居中的内容
`<font>` 和 `<basefont>`	定义 HTML 字体
`<s>` 和 `<strike>`	定义删除线文本
`<u>`	定义下划线文本

被淘汰的属性	描述	应该使用的属性
align	定义文本的对齐方式	text-align
bgcolor	定义背景颜色	background-color
color	定义文本颜色	font-family、color、font-size

示例：

<body style="background-color:yellow">
<h1 style="text-align:center">This is a heading</h1>
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>

<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> <!-- 字体、颜色、大小 -->
</body>

用样式改变段落的颜色和左外边距：

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

10.文本格式化：<b></b>或<strong></strong>加粗；<em></em>或<i></i>斜体；<big></big>…<small></small>放大缩小；<sup></sup>上标；<sub></sub>下标；
11. <pre></pre>——保留空格和换行。若不使用预格式文本，当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。
12. <address></address>写地址
13. 缩略词——在某些浏览器中，当把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。<abbr title="etcetera">etc.</abbr>或<acronym title="World Wide Web">WWW</acronym>
14. 改变文字方向——<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
15. <q></q>——块引用（可跨行，外面带双引号）
16. <del>blue</del>删除线效果 <ins>red</ins>下划线效果
17. 链接到当前页面指定位置（书签）——通过id

<p>
<a href="#C4">查看章节 4</a>
</p>

<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>

<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>

<h2><a id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>

<h2>章节 5</h2>
<p>这边显示该章节的内容……</p>

18.头部——<head>元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。
可添加在头部的标签及描述：

标签	描述
`<title>`	文档的标题，在html、xml中是必须的
`<base>`	`<base href="//www.w3cschool.cn/images/" target="_blank">`。定义HTML文档中所有的链接标签的默认链接，在 HTML 中，`<base>` 标签没有结束标签；在 XHTML 中，`<base>` 标签必须被正确地关闭。
`<link>`	定义了文档与外部资源之间的关系,通常用于链接到样式表：`<link rel="stylesheet" type="text/css" href="mystyle.css">`
`<style>`	定义了HTML文档的样式文件
`<script>`	用于加载脚本文件，如JavaScript
`<meta>`	通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据也不显示在页面上，但会被浏览器解析。

link进来的叫外部样式表，head中的style叫内部样式表，而直接<h1 style="">则属于内联样式表。
style和meta用法示例：

<style type="text/css">        
body {background-color:yellow}     
h1 {color:red;}   
p {color:blue}
<!--这样在body中写h1标签等等的时候颜色就会被改变-->        
</style>

为搜索引擎定义关键词:    
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:    
<meta name="description" content="Free Web tutorials on HTML and CSS">

定义网页作者:    
<meta name="author" content="Hege Refsnes">

每30秒中刷新当前页面:   
<meta http-equiv="refresh" content="30">

19.表格——<table>…</table>定义表格;<th>…</th>定义表格的标题栏（文字加粗）;<tr>…</tr>定义表格的行;<td>…</td>：定义表格的列。cellpadding用于设置单元格边距<table border="1" cellpadding="10">；cellspacing属性用于设置单元格间距。

<h4>两行三列:</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

<!--跨n行n列的例子，跨行则用colspan-->
<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

20.列表——列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
无序列表：

<ul><!--可使用style属性更改列表前的标志：style="list-style-type:disc"。 ：后还可以是circle、square-->
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

有序列表(可设置起始序号)：

<ol start="50"><!--也可以使用type属性更改序号类型：type="A",type="a","I","i"-->
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

21.将script插入html文档——script一般置于body标签的末尾部分(不支持 JavaScript 的浏览器会使用 noscript 元素中定义的内容（文本）来替代)：

<body>


<script>
document.write("Hello World!")
</script>

<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

</body>

yogima

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html入门（w3cschool学习笔记）

&amp;lt;html&amp;gt; 与 &amp;lt;/html&amp;gt; 之间的文本描述网页&amp;lt;body&amp;gt;与 &amp;lt;/body&amp;gt;之间的文本是可见的页面内容&amp;lt;h1&amp;gt; - &amp;lt;h6&amp;gt; 等标签定义标题。HTML heading 标签应该只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。搜索引
复制链接

扫一扫