HTML笔记（一）

最新推荐文章于 2024-07-25 11:26:35 发布

Yin_Xian

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量1.2k

点赞数

分类专栏： HTML 文章标签： html 标签

本文链接：https://blog.csdn.net/Yin_Xian/article/details/52268065

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

以前在学校的时候曾经接触过HTML语言，但是因为以前在工作之中没有用到HTML，所以随着时间的推移，html的内容逐渐忘却。现在公司分配了新的任务，所以用到html的东西。于是在这里对HTML学习过程做一个记录
笔记来自w3cschool:

一.标签部分

1.a标签一个网页链接

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

2.img标签 图像的名称和尺寸是以属性的形式提供的。

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

3.hr标签使用水平线来分隔文章中的小节是一个办法。

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

4.pre标签这是
预格式文本。
它保留了空格
和换行。。

<pre>
for i = 1 to 10
     print i 
next i
</pre>

5.ul ，li 无序列表标签无序列表始于 ul 标签。每个列表项始于 li。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示:
·Coffee
·Milk

6.ol ，li 无序列表标签无序列表始于 ol 标签。每个列表项始于 li。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器显示:
1.Coffee
2.Milk
7.div标签。
①可定义文档中的分区或节，即可以自动的换行。
②标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 div，那么该标签的作用会变得更加有效。

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</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>

8.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>

二.三种插入样式的表的方式

①**外部样式表**
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css"href="mystyle.css">//mystyle.css是样式的文件
</head>

②内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过

<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

③内联样式
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
&nbsp;:空单元格

Yin_Xian

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML笔记（一）

以前在学校的时候曾经接触过HTML语言，但是因为以前在工作之中没有用到HTML，所以随着时间的推移，html的内容逐渐忘却。现在公司分配了新的任务，所以用到html的东西。于是在这里对HTML学习过程做一个记录笔记来自w3cschool:一.标签部分1.a标签一个网页链接<a href="http://www.w3school.com.cn">This is a link</a>2.img标签
复制链接

扫一扫

专栏目录