html个人简介css_HTML和CSS简介

最新推荐文章于 2024-04-29 22:00:56 发布

weixin_26737625

最新推荐文章于 2024-04-29 22:00:56 发布

阅读量2.7k

点赞数 1

文章标签： python html vue css ViewUI

原文链接：https://medium.com/swlh/an-introduction-to-html-css-4084c798e5f

版权

html个人简介css

A beginners guide to web development

Web开发初学者指南

At the heart of any general website or web page are lines of code in HTML and CSS. HTML, the web development language to render content and CSS, which styles the content.

任何一般网站或网页的核心都是HTML和CSS中的代码行。 HTML，一种用于呈现内容的Web开发语言，以及一种CSS，用于对内容进行样式设置。

HTML, the acronym representing Hypertext Markup Language, is the language the web browser reads to generate textual content onto browsers. This type of language is made up of components called tags. Tags define particular elements in the document and is human-readable. For example, “p” referncing paragraph, “img” referencing image, and “li” referncing list item. HTML files are saved with a .html file extension.

H TML，代表超文本标记语言的首字母缩写，是Web浏览器读取以在浏览器上生成文本内容的语言。这种语言由称为标签的组件组成。标签定义文档中的特定元素，并且易于阅读。例如， “ p”引用段落， “ img”引用图像和“ li”引用列表项。 HTML文件以.html文件扩展名保存。

With that out of the way, let’s dive into creating our first web page to render it onto the browser using HTML!

有了这种方式，让我们开始创建第一个网页，以使用HTML将其呈现到浏览器中！

入门 (Getting Started)

When building anything, there are specific set of tools required. In relation to web development, the software tools to build a website are:

构建任何东西时，都需要特定的工具集。关于Web开发，用于构建网站的软件工具为：

Code Editor (i.e. NotePad++, eclipse, atom, etc.)
代码编辑器(即NotePad ++，eclipse，atom等)
Understanding of Basic HTML
基本HTML的理解
Understanding of Basic CSS
基本CSS理解

HTML简介 (Intro to HTML)

Using a code editor, create a file named index.html where you will store your webpage’s code.

使用代码编辑器创建一个名为index.html的文件您将在其中存储网页代码的位置。

Your basic structure in creating a webpage using html will represent a sandwich like structure.

使用html创建网页的基本结构将代表类似三明治的结构 。

The first line of code will specify the document type to the browser that the file is a html document. The html tags can be treated like the 2 buns in a sandwich and the head and body tags can be thought of as the meat of the sandwich.

代码的第一行将向浏览器指定该文件是html文档的文档类型。可以将html标签视为三明治中的2个小圆面包，并且可以将head和body标签视为三明治的肉。

<!DOCTYPE html><html>
     <head>
          <title>An Intro to HTML<title>
     </head>     <body>
     </body>
</html>

Note : data between the head tags are not directly displayed on the the screen. The title tag is displayed on the tab bar of the website and external files such as .css and script files are placed between head (which work in the background and bring out action or style to the page). Any tags or text in between the body tags are displayed onto the screen.

注意：head标签之间的数据不会直接显示在屏幕上。标题标签显示在网站的标签栏上，外部文件(例如.css和脚本文件)放置在文件头之间(该文件在后台运行，并为页面显示动作或样式)。正文标签之间的所有标签或文本都会显示在屏幕上。

Type the above html code in a text editor and save the file.

在文本编辑器中键入上面的html代码，然后保存文件。

Once saved, double click the file and see what appears on the screen:

保存后，双击文件，然后查看屏幕上显示的内容：

Image for post — Notice the title bar with “An Intro to HTML”

Though there is an empty webpage, notice the tab with the title.

尽管网页为空，但请注意带有标题的标签。

Now, let’s add text to the body of the web page. Add the following code to the body:

现在，让我们将文本添加到网页的正文中。将以下代码添加到正文中：

<body>     <h1>An Introduction to HTML and Web Content</h1>     <p>This is my first webpage where I will display some content to the webpage. </p>     <p>Below are the web languages I am trying to learn: </p>     <ul>         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>     </ul></body>

一些热门标签 (Some Popular Tags)

paragraph : <p></p>
段落：<p> </ p>
image : <img>
图片：<img>
ordered list : <ol></ol>
有序列表：<ol> </ ol>
unordered list : <ul></ul>
无序列表：<ul> </ ul>
list item : <li></li>
清单项目：<li> </ li>
divider : <div></div
分隔线：<div> </ div
anchor : <a></a>
锚点：<a> </a>
heading : <h1></h1> (up to h6)
标题：<h1> </ h1>(最多h6)

We have added some of the above tags to our html document.

我们已经将一些上述标记添加到了html文档中。

If your file is open on the web browser, refresh the page and notice what is displayed:

如果您的文件在Web浏览器上打开，请刷新页面并注意显示的内容：

The content typed onto the webpage is displayed and notice the content is displayed in different forms depending on the tag(s) used.

显示键入到网页上的内容，并注意根据所使用的标签，内容以不同的形式显示。

CSS, the acronym representing Cascading Style Sheets, is the language that compliments the content represented in HTML by styling it into more attractive and beautiful presentation.

C SS是表示层叠样式表的首字母缩写，是一种通过将HTML表示的内容样式化为更具吸引力和美观的外观来补充其内容的语言。

The keyword selector is important to understand in relation to CSS. This keyword is used to finding (or “selecting”) the HTML element (tag) you want to style. At the very basic level, when using CSS to style HTML elements, the element tag is typed followed by curly braces.

关键字选择器对于与CSS有关的理解很重要。此关键字用于查找(或“选择”)您要设置样式HTML元素(标签)。在最基本的级别上，使用CSS设置HTML元素的样式时，将键入element标签，后跟花括号。

In between the curly braces is the detail of the specific styling method. Below is an example of CSS used to style the above index.html file.

花括号之间是特定样式方法的细节。以下是用于为上述index.html文件设置样式CSS示例。

h1 {
   color: red;
}ul {
   font-style: italic;
}

The above lines of CSS code will turn the heading (text inside h1 tag) red and the unordered list (ul) content into italicized.

上面CSS代码行将标题(h1标记内的文本)变为红色，并将无序列表(ul)内容变为斜体。

The above code of CSS will not be reflected on the html file until it is linked inside the head tag. First, save the above code into a separate css file titled style.css and link it to the html file with the following code below the title tag:

上面CSS代码在链接到head标签内部之前，不会反映在html文件中。首先，将上面的代码保存到一个名为style.css的单独CSS文件中，并将其链接到html文件，并在title标签下面添加以下代码：

<link rel="stylesheet" href="style.css">

If you click on the index.html file or refresh the page, you will see the following CSS implement onto your index.html file:

如果单击index.html文件或刷新页面，您将在index.html文件上看到以下CSS实施：

ID，类和CSS (IDs, Classes, and CSS)

There are two types of CSS selectors that are important to understand, id and class. When either on of these two selectors are used, it makes specific styling of certain tags much easier than styling by calling HTML tags. For example, there may be a case where you may want to style one item in a list a certain way, while styling rest of the items or a few other items another way.

有两种很重要CSS选择器类型，id和class。当使用这两个选择器中的任何一个时，它使某些标签的特定样式比通过调用HTML标签的样式容易得多。例如，在某些情况下，您可能希望以某种方式为列表中的一个项目设置样式，而以其他方式为其余项目或其他一些项目设置样式。

class : The class attribute does not need to be unique for HTML tags. You can have the same class attributes for multiple HTML tags. Class attributes are defined within HTML tags by typing : class= “…” (In between the parenthesis, type the class name). The syntax in CSS to refer to a class is the dot character (.).
class： class属性对于HTML标签不需要唯一 。您可以为多个HTML标签使用相同的类属性。在HTML标记中，通过键入以下内容来定义类属性：class =“…”(在括号之间，键入类名称)。 CSS中引用类的语法是点字符(。)。
id : The id attribute must be unique for a paritcular HTML element. The id attribute is defined within a particular HTML tag by typing : id= “…” (In between the parenthises, type the id name). The syntax in CSS to refer to an id is the hash character (#).
id： id属性对于同一个HTML元素必须是唯一的。通过在特定HTML标记中键入以下内容来定义id属性：id =“…”(在括号之间，键入id名称)。 CSS中引用ID的语法是井号(＃)。

To implement class and id, let us implement the following HTML and CSS code to our index.html and style.css files.

为了实现类和id，让我们对index.html和style.css文件实现以下HTML和CSS代码。

index.html file :

index.html文件：

In our index.html file, add the following class and id attributes to the list items.

在我们的index.html文件中，将以下class和id 属性添加到列表项。

<li class="basicweblang">HTML</li>
<li class="basicweblang">CSS</li>
<li id="behavior">JavaScript</li>

style.css file :

style.css文件：

h1 {
   color : red;
}.basicweblang {
   font-style: italic;
}#behavior {
   color: blue;
}

Make sure both of your files are saved. Refresh your index.html page or open the file and you will see the following in your browser :

确保两个文件都已保存。刷新index.html页面或打开文件，您将在浏览器中看到以下内容：

摘要 (Summary)

We see that few lines of HTML and CSS codes are at the heart of any basic webpage. HTML is reponsible for the content of the website, whereas CSS is reponsible for styling that HTML content. CSS can select particular HTML tags and change the phsyical appearance as to how the HTML content is presented onto the webpage.

我们看到几乎没有几行HTML和CSS代码是任何基本网页的核心。 HTML负责网站的内容，而CSS负责样式化HTML内容。 CSS可以选择特定HTML标签，并更改HTML内容在网页上的显示方式。

翻译自: https://medium.com/swlh/an-introduction-to-html-css-4084c798e5f

html个人简介css

weixin_26737625

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html个人简介css_HTML和CSS简介

html个人简介cssA beginners guide to web development Web开发初学者指南 At the heart of any general website or web page are lines of code in HTML and CSS. HTML, the web development language to render content and ...
复制链接

扫一扫