Skip to content

Commit 5fdcfff

Browse files
wenyongdawenyongda
committed
提交
1 parent 10de6bc commit 5fdcfff

File tree

6 files changed

+182
-132
lines changed

6 files changed

+182
-132
lines changed

‎.idea/.gitignore

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/html-css-course.iml

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/modules.xml

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/vcs.xml

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎starter/03-CSS-Fundamentals/index.html

Lines changed: 111 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<title>The Basic Language of the Web: HTML</title>
6-
</head>
73

8-
<body>
9-
<!--
4+
<head>
5+
<meta charset="UTF-8" />
6+
<title>The Basic Language of the Web: HTML</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
10+
<body>
11+
<!--
1012
<h1>The Basic Language of the Web: HTML</h1>
1113
<h2>The Basic Language of the Web: HTML</h2>
1214
<h3>The Basic Language of the Web: HTML</h3>
@@ -15,132 +17,109 @@ <h5>The Basic Language of the Web: HTML</h5>
1517
<h6>The Basic Language of the Web: HTML</h6>
1618
-->
1719

20+
<header>
21+
<h1>📘 The Code Magazine</h1>
22+
23+
<nav>
24+
<a href="blog.html">Blog</a>
25+
<a href="#">Challenges</a>
26+
<a href="#">Flexbox</a>
27+
<a href="#">CSS Grid</a>
28+
</nav>
29+
</header>
30+
31+
<article>
1832
<header>
19-
<h1>📘 The Code Magazine</h1>
20-
21-
<nav>
22-
<a href="blog.html">Blog</a>
23-
<a href="#">Challenges</a>
24-
<a href="#">Flexbox</a>
25-
<a href="#">CSS Grid</a>
26-
</nav>
33+
<h2>The Basic Language of the Web: HTML</h2>
34+
35+
<img src="img/laura-jones.jpg" alt="Headshot of Laura Jones" height="50" width="50" />
36+
37+
<p>Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>
38+
39+
<img src="img/post-img.jpg" alt="HTML code on a screen" width="500" height="200" />
2740
</header>
2841

29-
<article>
30-
<header>
31-
<h2>The Basic Language of the Web: HTML</h2>
32-
33-
<img
34-
src="img/laura-jones.jpg"
35-
alt="Headshot of Laura Jones"
36-
height="50"
37-
width="50"
38-
/>
39-
40-
<p>Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>
41-
42-
<img
43-
src="img/post-img.jpg"
44-
alt="HTML code on a screen"
45-
width="500"
46-
height="200"
47-
/>
48-
</header>
49-
50-
<p>
51-
All modern websites and web applications are built using three
52-
<em>fundamental</em>
53-
technologies: HTML, CSS and JavaScript. These are the languages of the
54-
web.
55-
</p>
56-
57-
<p>
58-
In this post, let's focus on HTML. We will learn what HTML is all about,
59-
and why you too should learn it.
60-
</p>
61-
62-
<h3>What is HTML?</h3>
63-
<p>
64-
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
65-
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
66-
language that web developers use to structure and describe the content
67-
of a webpage (not a programming language).
68-
</p>
69-
<p>
70-
HTML consists of elements that describe different types of content:
71-
paragraphs, links, headings, images, video, etc. Web browsers understand
72-
HTML and render HTML code as websites.
73-
</p>
74-
<p>In HTML, each element is made up of 3 parts:</p>
75-
76-
<ol>
77-
<li>The opening tag</li>
78-
<li>The closing tag</li>
79-
<li>The actual element</li>
80-
</ol>
81-
82-
<p>
83-
You can learn more at
84-
<a
85-
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
86-
target="_blank"
87-
>MDN Web Docs</a
88-
>.
89-
</p>
90-
91-
<h3>Why should you learn HTML?</h3>
92-
93-
<p>
94-
There are countless reasons for learning the fundamental language of the
95-
web. Here are 5 of them:
96-
</p>
97-
98-
<ul>
99-
<li>To be able to use the fundamental web dev language</li>
100-
<li>
101-
To hand-craft beautiful websites instead of relying on tools like
102-
Worpress or Wix
103-
</li>
104-
<li>To build web applications</li>
105-
<li>To impress friends</li>
106-
<li>To have fun 😃</li>
107-
</ul>
108-
109-
<p>Hopefully you learned something new here. See you next time!</p>
110-
</article>
111-
112-
<aside>
113-
<h4>Related posts</h4>
114-
115-
<ul>
116-
<li>
117-
<img
118-
src="img/related-1.jpg"
119-
alt="Person programming"
120-
width="75"
121-
width="75"
122-
/>
123-
<a href="#">How to Learn Web Development</a>
124-
<p>By Jonas Schmedtmann</p>
125-
</li>
126-
<li>
127-
<img src="img/related-2.jpg" alt="Lightning" width="75" heigth="75" />
128-
<a href="#">The Unknown Powers of CSS</a>
129-
<p>By Jim Dillon</p>
130-
</li>
131-
<li>
132-
<img
133-
src="img/related-3.jpg"
134-
alt="JavaScript code on a screen"
135-
width="75"
136-
height="75"
137-
/>
138-
<a href="#">Why JavaScript is Awesome</a>
139-
<p>By Matilda</p>
140-
</li>
141-
</ul>
142-
</aside>
143-
144-
<footer>Copyright &copy; 2027 by The Code Magazine.</footer>
145-
</body>
146-
</html>
42+
<p>
43+
All modern websites and web applications are built using three
44+
<em>fundamental</em>
45+
technologies: HTML, CSS and JavaScript. These are the languages of the
46+
web.
47+
</p>
48+
49+
<p>
50+
In this post, let's focus on HTML. We will learn what HTML is all about,
51+
and why you too should learn it.
52+
</p>
53+
54+
<h3>What is HTML?</h3>
55+
<p>
56+
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
57+
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
58+
language that web developers use to structure and describe the content
59+
of a webpage (not a programming language).
60+
</p>
61+
<p>
62+
HTML consists of elements that describe different types of content:
63+
paragraphs, links, headings, images, video, etc. Web browsers understand
64+
HTML and render HTML code as websites.
65+
</p>
66+
<p>In HTML, each element is made up of 3 parts:</p>
67+
68+
<ol>
69+
<li>The opening tag</li>
70+
<li>The closing tag</li>
71+
<li>The actual element</li>
72+
</ol>
73+
74+
<p>
75+
You can learn more at
76+
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">MDN Web Docs</a>.
77+
</p>
78+
79+
<h3>Why should you learn HTML?</h3>
80+
81+
<p>
82+
There are countless reasons for learning the fundamental language of the
83+
web. Here are 5 of them:
84+
</p>
85+
86+
<ul>
87+
<li>To be able to use the fundamental web dev language</li>
88+
<li>
89+
To hand-craft beautiful websites instead of relying on tools like
90+
Worpress or Wix
91+
</li>
92+
<li>To build web applications</li>
93+
<li>To impress friends</li>
94+
<li>To have fun 😃</li>
95+
</ul>
96+
97+
<p>Hopefully you learned something new here. See you next time!</p>
98+
</article>
99+
100+
<aside>
101+
<h4>Related posts</h4>
102+
103+
<ul>
104+
<li>
105+
<img src="img/related-1.jpg" alt="Person programming" width="75" width="75" />
106+
<a href="#">How to Learn Web Development</a>
107+
<p>By Jonas Schmedtmann</p>
108+
</li>
109+
<li>
110+
<img src="img/related-2.jpg" alt="Lightning" width="75" heigth="75" />
111+
<a href="#">The Unknown Powers of CSS</a>
112+
<p>By Jim Dillon</p>
113+
</li>
114+
<li>
115+
<img src="img/related-3.jpg" alt="JavaScript code on a screen" width="75" height="75" />
116+
<a href="#">Why JavaScript is Awesome</a>
117+
<p>By Matilda</p>
118+
</li>
119+
</ul>
120+
</aside>
121+
122+
<footer>Copyright &copy; 2027 by The Code Magazine.</footer>
123+
</body>
124+
125+
</html>

‎starter/03-CSS-Fundamentals/style.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
h1, h2, h3, h4, p, li {
2+
/* 指定字体 为 无衬线 */
3+
font-family: serif;
4+
}
5+
6+
h1 {
7+
/* 指定字体颜色 */
8+
color: blue;
9+
/* 指定字体大小 */
10+
font-size: 26px;
11+
/* 指定字体转换 转换为大写字母 */
12+
text-transform: uppercase;
13+
/* 指定字体样式 斜体 */
14+
font-style: italic;
15+
}
16+
17+
h2 {
18+
font-size: 40px;
19+
}
20+
21+
h3 {
22+
font-size: 30px;
23+
}
24+
25+
h4 {
26+
font-size: 20px;
27+
text-transform: uppercase;
28+
/* 指定文本对齐方式 居中 相对于父元素 */
29+
text-align: center;
30+
}
31+
32+
p {
33+
font-size: 22px;
34+
/* 指定行高 字体大小的1.5倍 */
35+
line-height: 1.5;
36+
}
37+
38+
li {
39+
font-size: 20px;
40+
}

0 commit comments

Comments
 (0)