目录
1,HTML概览与基本语法
HTML,即超文本标记语言,是网页的基础构建语言,允许网页中包含图片、链接、声音和视频等多种媒体内容。通过HTML标签,浏览器能够解析并呈现网页。
基本结构:
Html
1<html>
2<head>
3 <!-- 头部信息 -->
4</head>
5<body>
6 <!-- 主体内容 -->
7</body>
8</html>
头部标签:<title>
定义网页标题,<meta>
提供元信息,<link>
用于引入外部资源如图标。
常用标签与属性
- 标题:
<h1>
至<h6>
用于不同级别的标题。 - 段落:
<p>
用于段落。 - 列表:
<ul>
无序列表,<ol>
有序列表。 - 超链接:
<a>
用于链接,如<a href="http://www.sohu.com">搜狐</a>
。 - 图像:
<img>
用于插入图片,如<img src="image.jpg" alt="描述">
。
表格:<table>
用于表格,<tr>
定义行,<th>
定义表头,<td>
定义单元格。
表单:<form>
用于收集用户输入,<input>
用于文本输入、密码、文件上传等,<textarea>
用于多行文本输入。
CSS概述与基本语法
CSS,层叠样式表,用于控制HTML文档的外观和布局,使内容与表现分离。
行内样式:直接在HTML标签中使用style
属性。
1<p style="color:red;">红色文本</p>
内嵌样式:在<head>
中使用<style>
标签。
1<style>
2 p {
3 color: blue;
4 font-size: 16px;
5 }
6</style>
外部样式:使用<link>
标签引入独立的.css
文件。
CSS选择器与属性
选择器:标签选择器div {}
,类选择器.class {}
,ID选择器#id {}
。
文本样式:color
,font-size
,font-family
,text-align
等。
背景:background-color
,background-image
,background-repeat
等。
列表:list-style-type
,list-style-image
等。
伪类::hover
,:active
,:focus
等。
透明度:opacity
。
盒子模型与布局
盒子模型:由内容、内边距、边框、外边距组成。
布局方式:block
块级,inline
行级,inline-block
行级块。
浮动:使用float
属性,如float: left;
。
定位:position
属性,包括static
静态,relative
相对,absolute
绝对,fixed
固定定位。
实例展示
HTML示例:创建一个简单的网页,包括标题、段落、链接和图像。
1<!DOCTYPE html>
2<html>
3<head>
4 <title>我的第一个网页</title>
5 <link rel="icon" href="favicon.ico">
6</head>
7<body>
8 <h1>欢迎来到我的网站</h1>
9 <p>这是一个段落。</p>
10 <a href="https://www.sohu.com">访问搜狐</a>
11 <img src="logo.png" alt="Logo">
12</body>
13</html>
CSS示例:为上面的网页添加样式。
1body {
2 font-family: Arial, sans-serif;
3 margin: 20px;
4}
5
6h1 {
7 color: navy;
8}
9
10p {
11 text-align: justify;
12}
13
14a {
15 color: darkblue;
16 text-decoration: none;
17}
18
19a:hover {
20 text-decoration: underline;
21}
22
23img {
24 max-width: 100%;
25 height: auto;
26}