我的HTML学习之路01

写在前面:
此博客仅用于记录个人学习进度,学识浅薄,若有错误观点欢迎评论区指出。欢迎各位前来交流。(部分材料来源网络,若有侵权,立即删除)

HTML

HTML基础

  • HTML:超文本标记语言
  • 用于描述网页
  • HTML文档也叫web页面
  • HTML标签是由尖括号包围的关键词,比如< html >
  • < 标签>内容</标签>
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>
  • 中文网页需要使用< meta charset=“utf-8”>声明编码,否则会出现乱码;若浏览器(如360浏览器)设置为GBK为默认编码,则需要设置为< meta charset=“gbk”>.

这是一个可视化的HTML页面结构

  • List item
    只有< body > 白色区域才会在浏览器中显示
HTML标题
  • HTML 标题(Heading)是通过

    -

    标签来定义的.
  • < h1>这是一个标题< /h1>
    < h2>这是一个标题< /h2>
    < h3>这是一个标题< /h3>
HTML水平线
  • < hr> 标签在 HTML 页面中创建水平线。
  • hr 元素可用于分隔内容。
HTML注释
  • 可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
  • 注释写法如下:< !-- 这是一个注释 -->
  • 开始括号之后(左边的括号)需要紧跟一个叹号,结束括号之前(右边的括号)不需要,合理地使用注释可以对未来的代码编辑工作产生帮助。
HTML段落
  • HTML 段落是通过标签 < p> 来定义的.
  • < p>这是一个段落。< /p>
    < p>这是另外一个段落。< /p>
HTML折行
  • 在不产生一个新段落的情况下使用
    标签进行换行(新行)
  • < p>这个< br>段落< br>演示了分行的效果< /p>
    运行结果
HTML链接
  • HTML链接通过标签< a>来定义
  • < a href=“https://www.runoob.com”>这是一个链接< /a>
HTML图像
  • 图像通过标签< img >来定义
  • < img src="/images/logo.png" width=“258” height=“39” />

HTML元素

HTML元素概念
  • < p> 这是一个段落 < /p>
  • < a href=“defult.htm”>这是一个链接 >
  • < br> 换行
HTML元素语法
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些HTML元素具有空内容
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数HTML元素可拥有属性
HTML实例

< !DOCTYPE html>

< html>

< body>
< p>这是第一个段落。< /p>

这个

元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签

以及一个结束标签

.
元素内容是: 这是第一个段落。

< /body>

元素定义了 HTML 文档的主体。 这个元素拥有一个开始标签 以及一个结束标签 。 元素内容是另一个 HTML 元素(p 元素)。 元素定义了整个 HTML 文档。 这个元素拥有一个开始标签 ,以及一个结束标签 . 元素内容是另一个 HTML 元素(body 元素)。

</ html>

  • HTML对大小写不敏感

HTML属性

HTML属性基础
  • HTML可以设置属性

  • 属性可以在元素中添加附加信息

  • 属性一般描述与开始标签

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

  • 实例
    < a href=“http://www.runoob.com”>这是一个链接
    HTML链接由< a>标签定义。链接的地址在 herf属性中指定。

HTML属性常用引用属性值
  • 属性值应该始终被包括在引号内
  • 通常使用双引号,单引号也可(在双引号作为属性值本身时 ,例如:name=‘John “ShotGun” Nelson’)
HTML属性参考手册(部分1)
class为html元素定义一个或多个类名(classname)(l类名从样式文件引入)
id定义元素的行内样式
style规定元素的行内样式(inline style)
title描述了元素的额外信息(作为工具条使用)
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值