Learn web development html初步

最新推荐文章于 2024-07-30 01:12:00 发布

火车上遇见

最新推荐文章于 2024-07-30 01:12:00 发布

阅读量453

点赞数

分类专栏： web 文章标签： web

本文链接：https://blog.csdn.net/WAN_EXE/article/details/69950639

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

参考文档

第一步是认识web

安装软件

作者说话比较幽默，第一步说需要一台电脑，也可见很细心。

编辑器有很多

Brackets, Atom, Visual Studio Code,

这里选用他推荐的Brackets,

https://github.com/adobe/brackets/releases

有自动补齐功能

浏览器firefox，

图片编辑器选用gimp,

版本控制工具选用git

创建自己第一个html网页

新建一个index.html网页文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

在目录下面建立一个images/firefox-icon.png的图片，

点击右上角的闪电按钮运行。

表明运行成功。

解释什么是html

HTML is not a programming language; it is a markup language, and is used to tell your browser how to display the webpages you visit.

HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way.

The enclosing tags can make a word or an image a hyperlink to somewhere else, can italicize words, and can make font bigger or smaller, and so on.

如果需要显示段落的话，可以使用<p> paragraph表示

<p>My cat is very grumpy</p>

Element 可以有属性attributes

class is the attribute name, and editor-note is the attribute value.

The class attribute allows you to give the element an identifier that can be later used to target the element with style information and other things.

叠加element

<p>My cat is <strong>very</strong> grumpy.</p>

空元素

<img src="images/firefox-icon.png" alt="My test image">

没有内容

展示一个HTML文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

the <html> element. this wraps all the content on the entrie page, and is sometimes known as the root element.

This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers.

This contains all the content that you want to show to web user when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.

<meta charset="utf-8"> — this element sets the character set your document should use to utf-8, which includes most characters from all known human languages

<title></title> — this sets the title of your page, which is the title that appears in the browser tab the page is loaded in, and is used to describe the page when you bookmark/favourite it.

图片

<img src="images/firefox-icon.png" alt="My test image">

src source attribute, which contains the path to our image file.

The key words about alt text are "descriptive text".

制作文本

基本要素

Heading

Heading elements allow you to specify that certain parts of your content are heading - or subheadings - of you content

HTML contains six heading levels, <h1> - <h6>

<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

根据测试是一级比一级字体要小。

段落　paragraph

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

List

A lot of the Web's content is lists and HTML has special elements for these.

Making up list always consist of at least two elements.

Unordered lists are for lists where the order of the items doesn't matter, these are wrapped in a <ul> element.

Ordered list are for lists where the order of the items does matter, these are wrapped in an <ol> element.

Each item inside the lists is put inside an <li> (list item) element.

<p>At Mozilla, we’re a global community of</p>
    
<ul> 
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together ... </p>

Links

Links are very important - they are what makes the Web A WEB.

To add a link, we need to use a simple element --<a> -- the a being short for "anchor".

<a>Mozilla Manifesto</a>

<a href="">Mozilla Manifesto</a>

<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

之前是显示在界面上的内容，前面是该去的链接。

必须加上http:// 或者https://

href stands for hypertext reference.

最终的文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <h1>Mozilla is cool</h1>
    <img src="images/firefox-icon.png" alt="The Firefox logo: a flaming fox surrounding the Earth.">

    <p>At Mozilla, we’re a global community of</p>
    
    <ul> <!-- changed to list in the tutorial -->
      <li>technologists</li>
      <li>thinkers</li>
      <li>builders</li>
    </ul>

    <p>working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>

    <p>Read the <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a> to learn even more about the values and principles that guide the pursuit of our mission.</p>
  </body>
</html>