HTML学习笔记--1

最新推荐文章于 2024-09-18 13:55:16 发布

sinat_36651044

最新推荐文章于 2024-09-18 13:55:16 发布

阅读量269

点赞数

分类专栏：学习笔记文章标签： html

本文链接：https://blog.csdn.net/sinat_36651044/article/details/75675635

版权

学习同时被 2 个专栏收录

124 篇文章 1 订阅

订阅专栏

笔记

124 篇文章 0 订阅

订阅专栏

工具：Sublime Text 3 + Chrome 浏览器

写文章太费劲了，多花两三个小时，天啊，还写不出什么有价值的东西。

Markdown编辑器和HTML语法好像是一样一样的，
天啊，< html>不加空格打不出来，

HTML 参考手册
天啊，我用HTML的a标签真的添加了w3school网站的 HTML参考手册超链接。

更多的内容等flask学差不多了再系统学习，先学这点儿基础知识。

1 新建文件

在SublimeText 中新建test.html文件，保存在桌面就可以。
在sublimeText中输入< ht ，就会出现html选项，点击Enter键：

这里写图片描述

2 基本框架

上面代码修改一下，就是html的基本框架了（第一行多了一个< ,head、body标签应该比html标签低一级）：

<!DOCTYPE html>   #标记文档类型是HTML5
<html>           
    <head>     
        <title></title>
    </head>
    <body>

    </body>
</html>


(The text between <html> and </html> describes the web page, and the text between < body> and < /body> is the visible page content. The markup text "<title>This is a title</title>" defines the browser page title.)

用浏览器打开test.html，发现什么也没有。

这里写图片描述

4 title，body

在title ，body 标签中间添加内容，重新加载页面，发现有了变化：

这里写图片描述

5 h1~h5，p，br

h1到h5标签是标题标签，字号逐渐变小。
p标签是段落标签
br是换行符

<!DOCTYPE html>
<html>
    <head>
        <title>FengWeilei</title>
    </head>
    <body>
      <h1>Title One</h1>
      <h2>Title Two</h2>
      <h3>Title Three</h3>
      <h4>Title Four</h4>
      <h5>Title Five</h5>
      <p>p for paragraph</p>
      <!-- This is a comment. br for break，do not permit any embedded content-->
      <br>
      <p>second paragraph</p>
    </body>
</html>

这里写图片描述

5 div

div 可定义文档中的分区或节（division/section）。
div 标签可以把文档分割为独立的、不同的部分。

<!DOCTYPE html>
<html>
    <head>
        <title>FengWeilei</title>
    </head>
    <body>
      <div>
        <h1>Title One</h1>
         <h2>Title Two</h2>
         <h3>Title Three</h3>
         <h4>Title Four</h4>
         <h5>Title Five</h5>
      </div>
      <div>
        <p>p for paragraph</p>
        <!-- This is a comment. br for break，do not permit any embedded content-->
        <br>
        <p>second paragraph</p>
      </div>
    </body>
</html>

这里写图片描述

6 a

a 标签定义超链接，用于从一张页面链接到另一张页面。
a 元素最重要的属性是 href 属性，它指示链接的目标。

<!DOCTYPE html>
<html>
    <head>
        <title>FengWeilei</title>
    </head>
    <body>
      <div>
        <h1>Title One</h1>
         <h2>Title Two</h2>
         <h3>Title Three</h3>
         <h4>Title Four</h4>
         <h5>Title Five</h5>
      </div>
      <div>
        <p>p for paragraph</p>
        <!-- This is a comment. br for break，do not permit any embedded content-->
        <br>
        <p>second paragraph</p>
        <a href="https://en.wikipedia.org/wiki/HTML">HTML From Wikipedia</a>
      </div>
    </body>
</html>