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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性