HTML | HTML基础

HTML 标题

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。例如，

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 段落

HTML 段落是通过 <p> 标签进行定义的。例如，

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

HTML 链接

HTML 链接是通过 <a> 标签进行定义的。在 href 属性中指定链接的地址。例如，

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

HTML 图像

HTML 图像是通过 <img> 标签进行定义的。图像的名称和尺寸是以属性的形式提供的。例如，

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

HTML类

分类块级元素(div,ul,li,ol,h1~h6,p)

可以设置宽高，不可以与别共处一行，不设置宽度的情况下，默认宽度是100%(100%的大小取决于副级)

HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。

设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类：

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>

分类行内元素(span,strong,a) 

行内标签不可以设置宽高，可以与别共处一行，其宽高由内容撑开

行内块标签(img,input) ​：可以设置宽高 ​，可以与别人共处一行

HTML <span> 元素是行内元素，能够用作文本的容器。

设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>

　　

posted @ 2021-12-09 11:40  一马当先G  阅读(93)  评论(0)    收藏  举报