HTML

HTML Helloworld文件:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <head>
        <title>hello world</title>
    </head>
    <body>
        hello world
    </body>
</html>   

  

开头<!DOCTYPE HTML>

<html></html>间为文本描述网页

<body></body>间为可见的网页内容

 

最基础的HTML元素

标题<h1>-<h6>

<h1>This is a lv1 heading</h1>
<h2>This is a lv2 heading</h2>

段落<p>

<p>This is a paragraph</p>
<p>This is another paragraph.</p>

链接<a>

<a href="http://www.w3school.com.cn">This is a link</a>

注释:在href属性中指定链接地址

图像<img>

<img src="w3school.jpg" width="104" height="142" />

img标签单独出现,没有结束标签。

 

HTML元素

HTML元素是指从开始标签(start tag)结束标签(end tag)的所有代码。

即使忘记使用结束标签,大多数浏览器也会正确地显示HTML,但这样做不好。

 

空HTML元素:没有内容的HTML元素被称为空元素。空元素在开始标签中关闭。

<br>没有关闭标签的空元素(<br>定义换行

开始标签中添加斜杠/,比如<br />,是关闭空元素的正确方式。

 

HTML标签对大小写不敏感,<P>等同于<p>,但应该尽量用小写。

 

HTML属性

属性总是以名称/值对的形式出现,比如:name="value"

属性总是在HTML元素的开始标签中规定。

几个实例:

<a>HTML链接:由<a>标签定义,链接的地址在href属性中指定:

<a href="http://www.w3school.com.cn">This is a link</a>

<h1>标题:标题位置,align

<h1 align="center">Headline</h1>

<body>文档的主体:背景颜色,bgcolor

<body bgcolor="Yellow"></body>

 

始终为属性值加引号,单双都可以。

 

HTML标题

通过<h1>-<h6>等标签进行定义。

搜索引擎使用标题为我们的网页结构和内容编制索引

 

HTML水平线

<hr />标签在HTML页面中创建水平线。没有结束标签。

hr元素可以用于分隔内容。

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />

 

注释

<!-- 注释内容 -->

 

空行/段落

<br />

如果希望在不产生一个新段落的情况下进行换行,可以用<br />标签:

<p>This is <br /> a para<br />graph with line break</p>

如果/出现在元素的开始标签中,那么这个元素没有关闭标签。

 

在HTML代码中,我们无法通过在HTML代码中添加额外的空格或者换行(是用回车换行,而不是用<br />)来改变输出的效果。

显示页面时,浏览器会移除源代码中多余的空格和换行。所有的换行和空格都会被算作一个空格。要想实现换行,不能通过在源代码中输入回车来实现,只能用<br />

复制代码
<p>
这个段落
在源代码中
包含许多行
但是浏览器
忽略了它们。
</p>

<p>
这个段落
在源代码       中
包含   许多行
但是      浏览器
忽略了  它们。
</p>
复制代码

所有的连续空格连续(回车)换行都会被替换为一个空格

 

HTML分块:<div>

文档中用<div>标签可以定义文档中的分区或者节(section)。

<div>标签可以把文档分割为独立的、不同的部分。在div中的样式只会作用于该div部分。

如果用id或者class来标记<div>,那么该标签的作用会变的更加有效。

 

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是<div>固有的唯一格式表现(即不加其他样式时的唯一样式就是换行)。可以通过 <div> 的class 或者 id添加额外的样式。

可以对同一个<div>元素应用class或者id属性,但是更常见的情况是只应用其中一种。二者的主要差异在于,class用于某一类元素而id用于标识单独的唯一的元素。即,不同的div块可能是同一个class,而绝不可能是同一个id。

例子:

复制代码
<body>
<h1> NEWS WEBSITE </h1>
<p> some text. some text. some text...</p>

<div class='news' id=1>
<h2> News headline 1 </h2>
<p> some text. some text. some text...</p>
</div>

<div class='news' id=2>
<h2> News headline 2 </h2>
<p> some text. some text. some text...</p>
</div>

</body>
复制代码

 

 粗体文本:<b>

<p>这是普通文本...<b>这是粗体文本</b></p>

 

posted @   ShineLe  阅读(59)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示