HTML学习笔记(Day1)

最新推荐文章于 2024-09-18 19:31:08 发布

DesmondCobb

最新推荐文章于 2024-09-18 19:31:08 发布

阅读量795

点赞数 1

分类专栏： HTML学习笔记文章标签： html 学习笔记

本文链接：https://blog.csdn.net/DesmondCobb/article/details/74792594

版权

HTML学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

笔记根据w3school的HTML教程进行整理

最初发布于http://desmondcobb.blog.163.com/blog/static/2742430862017661474734，由于网易博客被封故重新发布

一、基础HTML标签
1.HTML标题(Heading)
通过<h1>到<h6>等等标签进行定义

<h1>This is a heading.</h1>
<h2>This is another heading.</h2>

2.HTML段落(Paragraph)
通过<p>标签进行定义

<p>This is Para 1.</p>
<p>This is Para 2.</p>

3.HTML链接(Link)
通过<a>标签进行定义

<a href="链接">显示文字</a>

4.HTML图像(Image)
通过<img>标签进行定义

<img src="图像路径" width="233" height="233"/>

注:名称与尺寸以属性形式提供

二、HTML元素
HTML文件由HTML元素定义
1.HTML元素是指从开始标签(start tag)到结束标签(end tag)的所有代码

2.HTML元素语法
-以开始标签起始，以结束标签终止
-元素的内容是起止标签之间的内容
-某些HTML元素具有空内容(empty content)
-空内容在开始标签中进行关闭(以开始标签的结束而结束)
-大多数HTML元素具有属性

3.大多数HTML元素可以嵌套

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

以上包含三个HTML元素

4.空的HTML元素
没有内容的HTML元素成为空元素，空元素在开始标签中关闭
例如<br>就是一个空元素(定义换行)
在开始标签中添加斜杠，例如<br/>可以关闭空元素
为了保证未来的兼容性，所有元素必须被关闭

5.为了保证未来的兼容性，使用小写标签

三、HTML属性
HTML标签可以拥有属性，属性为HTML元素提供附加消息
属性总是在开始标签中，以名称/值的形式出现
为了保证未来的兼容性请使用小写属性
重要！始终为属性加引号:属性应该始终被包含在引号内，双引号是常用的，单引号亦可，假如属性值本身包含双引号，则必须使用单引号。

name='desmond "lowb" cobb'

HTML属性参考手册见 http://www.w3school.com.cn/tags/index.asp

四、HTML标题
标题通过<h1> - <h6>定义
<h1>定义最大标题 <h6>定义最小标题
标题前后会自动加空行
<hr/>在HTML页面中创建水平线
HTML注释:

五、HTML段落
HTML段落通过<p>标签定义
使用<br/>换行
浏览器会移除多余的空格和空行

<html>

<body>

<h1>春晓</h1>

<p>
    春眠不觉晓，
      处处闻啼鸟。
        夜来风雨声，
          花落知多少。
</p>

<p>注意，浏览器忽略源代码中的排版（省略了多余的空格和换行）。</p>

</body>

</html>

六、HTML样式
style属性提供了一种改变HTML元素样式的通用方法
实例
background-color定义了背景颜色
font-family;color;font-size定义了字体、颜色、字号
text-align定义了文本的水平对齐方式

<html>
<body style="background-color:PowderBlue;">

<h1>Look! Styles and colors</h1>

<p style="font-family:verdana;color:red">
This text is in Verdana and red</p>

<p style="font-family:times;color:green">
This text is in Times and green</p>

<p style="font-size:30px">This text is 30 pixels high</p>

</body>
</html>

Ref: http://www.w3school.com.cn