HTML+CSS-基础篇

最新推荐文章于 2024-02-18 22:05:28 发布

可可鸭~

最新推荐文章于 2024-02-18 22:05:28 发布

阅读量643

点赞数

分类专栏： html 文章标签： css html html5

本文链接：https://blog.csdn.net/qq_43547255/article/details/120480834

版权

html 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

HTML+CSS基础篇（干货）

一.基本架构

<!doctype html>
<html>
<head>
<meta charset="utf-8"><!--制定编码格式utf-8-->
<title>无标题文档</title><!--文档名-->
</head>
<style><!--这里可以放页面引用的css样式部分--></style>
<body>	<!--body里面放主体部分-->
</body>
</html>

补充:
1、编程时最好把html+js+css样式文件分开，各自独立只需把路径加到html中。

1.1HTML中使用css样式

在HTML中使用css样式的方法有：行内式、内嵌式、外联式，而外联式又分：链接式（link）和导入（@import）。
~~行内式~~

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
	<p style="line-height: 30px;">我是行内式</p>
</body>
</html>

~~内嵌式~~

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
	<style>
		.control{
			width: 100%;
		}
	</style>
<body>
	<div class="control"></div>
</body>
</html>

链接式（link）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
　　<link rel="stylesheet" type="text/css" href="style.css">
<body>
<p>在link标签中，“rel=stylesheet”<br>
	rel是关联的意思，关联的是一个样式表(stylesheet)文档
	它表示这个link在文档初始化时将被使用。
	一般这里是不需要改动</p>
<p>text/css说明引用类型文本是css一般不需要改动</p>
<p>只需要把href后面的路径改成自己css文件路径即可</p>
</body>
</html>

导入式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style type="text/css" media="screen">
　　@import url("style.css");
　　</style>
<body>
</body>
</html>

二、body中常用的html标签

1. 标题(h></h)

标题是通过<h1>-<h6> 等标签进行定义的。

<title>标题</title> </head> 	<style> 		*{ 			background-color: #ccc; 		}
	</style> <body> 	<h1 style="color: cadetblue">This is a heading</h1>
	<h2 style="color: coral">This is a heading</h2> 	<h3
style="color:yellow">This is a heading</h3> 	<h4
style="color:skyblue">This is a heading</h4> 	<h5
style="color:orange">This is a heading</h5> 	<h6
style="color:#6887FF">This is a heading</h6> </body> </html>

在这里插入图片描述

2.段落

段落是通过<p> 标签定义的。

<p>This is another paragraph</p>

3.段落

段落折行（br /）换行

4. 分割线hr

多用于段落之间的分割

5.显示原文本文字（pre >< /pre）

6.文本

	<i>i:斜体字</i> 
	<em> em:斜体字，表示强调</em>
	<b>b:粗体字</b> 
	<strong>strong:粗体字，表示强调(语⽓更强)</strong> 
	<del>del:删除的⽂本 </del>
	<ins>ins:插⼊的⽂本</ins>
	<small>small:⼩号字体</small> 
	<br/>
	<sub>sub:下标字</sub>
	<p>H<sub>2</sub>O</p>
 
	<sup>sup:上标字</sup> 
	<p>x<sup>2</sup></p>
	
	<!-- 中⽂注⾳，h5新增 -->
	<ruby>
 		ruby:拼⾳<rt>rt:pinyin</rt>
	</ruby

在这里插入图片描述

7.容器（div and span）

1.HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<div> 元素可用于对大的内容块设置样式属性。
<div></div>
2.<span> 元素是内联元素，可用作文本的容器
<span> 没有特定的含义。<span></span>

8.短语元素标签

都是短语元素，虽然这些标签定义的文本大多会呈现出特殊的样式，但实际上，这些标签都拥有确切的语义。但是如果您只是为了达到某种视觉效果而使用这些标签的话，我们建议您使用样式表，那么做会达到更加丰富的效果。

8.<li>标签、<ol>标签、<ul>标签

<li>标签<li> 标签定义列表项目。
<li> 标签可用在有序列表(<ol>)和无序列表 (<ul>)中。

	<ol>
		<li>further</li>
		<li>further</li>
		<li>further</li>
	</ol>

在这里插入图片描述

	<ul>
		<li>further</li>
		<li>further</li>
		<li>further</li>
	</ul>

在这里插入图片描述

可可鸭~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML+CSS-基础篇

HTML+CSS基础篇（干货）一.基本架构<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><style></style><body&gt
复制链接

扫一扫