HTML5快速上手

竹某

已于 2022-03-28 17:54:43 修改

阅读量338

点赞数

分类专栏：交互式媒体设计（网页设计）文章标签： html5

于 2022-03-22 13:21:58 首次发布

本文链接：https://blog.csdn.net/weixin_46345928/article/details/123656585

版权

交互式媒体设计（网页设计）专栏收录该内容

2 篇文章 0 订阅

订阅专栏

为了学习交互式编程这门课，需要一些基础的HTML的知识。但是为了节约时间，不可能学习得太深入，只需要学习HTML的一个适宜的子集即可。下面是从老师的ppt和B站上的基础课总结来的，供我做项目和期末时查看。

二.HTML语法特点

三.一个具体的HTML document的例子和对应的website page。

一.HTML简介

简介是为了理解HTML的本质和特点，以便于我记忆HTML的语法和具体使用HTML。下面以罗列的形式说明HTML：

1.HTML是一门标记性语言（markup language），而不是一门编程语言（language）。它的作用是提供网页的基本结构和内容，而不是描述网页的行为。

2.HTML是Hypertext Markup Language。如上所述，只提供网页的基本内容和结构。而对网页的内容的精细化处理需要CSS，网页的行为描述需要JS。

二.HTML语法特点

学习HTML5语法特点的目的是为了方便记忆语法。我们已经知道HTML是为了提供网页的content和structure。所以HTML5的语法肯定是围绕着这个目的来的。

HTML document相当于是website的源代码的最初版（不过HTML5不是编程语言，这只是一个类比。由于后续还需要CSS和JS，所以说是最初版），其具有的结构称之为HTML DOM(Document Object Model)，反映了网页具有的内容和结构。

我们编写网页的第一步，就是要编写HTML document。而涉及网页的第一步就是要设计HTML DOM。HTML document就是根据HTML DOM编写的。

下面是一个HTML document的示例：

html表示网页这个元素，其下有head和body这两个元素，这是网页最基本的结构。而head和body中又有各自内嵌的元素。

直观上，元素对应着网页中的各个部分或称对象。比如，html元素对应着整个网页，head元素对应着网页的头部分，该部分不会被浏览器渲染；而body元素对应网页的具体内容部分，会被渲染。title元素表示标题，h1-h6元素代表一级到六级标题，p元素代表了段落。

语法上，元素由begin tag，content和end tag以此组成。

<p>Welcome</p>

<p>和</p>称之为tag，前者为begin tag，后者称之为end tag。
一个元素必需由begin tag（在前）和end tag（在后）包裹content（可以为空）而成。
元素的content可以为空，为文本，为图片或者是其他元素。

tag的作用是说明这是个什么元素，并且告诉浏览器应该如何组织这个网页的结构。一般由begin tag和end tag组成。不过有些时候只有begin tag（比如img图形元素）。不区分大小写。

content可以为空，文本或者其他元素。

HTML attribute和begin tag一起写在"<>"中，用来说明元素的属性。比如说明文本的字体等等。其形式为name = “value”。注意有双引号。

注释：。

三.一个具体的HTML document的例子和对应的website page。

四.HTML中的基本element介绍

HTML5中有几个基本的元素。一个网页必需含有这些基本的元素。这些基本的元素是：html，head，body和title。

4.1 html

标志着html document的开始和结束，所有其他的tag必需放在<html>和</html>中。

4.2 head

放了文档的一些信息，这些信息不会被渲染到网页里去，比如tilte(网页标题)，base(网页中所有连接的默认地址)等等。这些信息都是网页整体的信息，而不是具体的、需要展示给读者的信息。

上面的这些标签都是只能放入head tag内，展示网站基本信息的tag。

meta tag的详解见HTML meta 标签_ANKG的博客-CSDN博客_html meta

<!DOCTYPE html>
<!--上面这行说明文本的类型为html document-->
<html>    
    <head>
         <!--网页的标题为Essential Elements of HTML5-->
         <title>Essential Elements of HTML5</title>
         <!--为body中的一些元素设定统一的风格/样式-->
         <style>
               body {background-color: powderblue;}<!--把body的背景色属性设置为powdeblue-->
               h1 {color: red;}<!--把h1的color属性设置为red-->
               p {color: blue;}<!--把p的color属性设置为blue-->
         </style>
         <!--link tag用于连接external style sheet,和css相关,暂略-->
         <!--meta tag中设置对于html doc而言比较重要的数据(元数据),比如字符集,放大倍数等等-->
         <meta charset="UTF-8"><!--设置网页的字符集为UTF-8-->
         <!--这个name后面跟的是网页的一个属性,相当于将content中的内容赋给了name中的属性-->
         <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--设置网页观看方式-->
         <meta name="author" content="Bamboo">   <!--设置网页作者-->
         <!--script标签和js有关,暂略-->
    </head>

    <body>
        <h1>This is the header of Level 1!</h1>
        <p>This is a paragraph!</p>
    </body>
</html>

4.3 body

中间放置网页的所有具体内容。

五.HTML5中的一些常用的元素介绍

HTML5中常见的元素有：

heading（1-6级标题），paragraph（段落），image（图片），table（表格），list（列表，分为有序和无序），link（链接），form（表单，要求用户填数据的）

具体的使用看这段代码就明白了，不详细讲了，珍惜时间。为了阅读方便，还是复制过去放在文本编辑器上看好。

5.1示例

<!DOCTYPE html>
<!--Header:不会被浏览器渲染-->
<head>
    <title> HTML CRASH COURSE for Beginners </title>
</head>
<!--Body:会被浏览器渲染-->
<body>
    <!--块状元素,使用时会导致换行,而且占据网页全部的宽度-->
    <h1>Header 1</h1>
    <h2>Header 2</h2>
    <h3>Header 3</h3>
    <h4>Header 4</h4>
    <h5>Header 5</h5>
    <h6>Header 6</h6>
    <!--内联元素em将字体变为斜体,strong将字体变为粗体,a为这段文字设置超链接属性-->   <!--内联元素往往嵌套块状元素内部-->
	<!--内联元素a的属性href为超链接指向的网站地址，而如此设置target属性是为了另外打开一个网页而不关闭本网页-->
    <p>This a <a href = "http://baidu.com" target = "_blank">paragraph! target = "_blank"</a> And there will be a magin between headers!</p>
    <p>There will be a margin between paragraphs as well!</p>
    <p>Lorem, ipsum dolor sit <em>amet consectetur</em> <strong>adipisicing elit.</strong> Blanditiis, perspiciatis dicta qui quam deleniti voluptas ut sequi ab! Tenetur ea voluptates quibusdam blanditiis sint saepe quasi provident quas nostrum recusandae.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi, rem.</p>
    <!--List有两种:ul和ol,前者无顺序,后者有顺序-->
    <ul>
        <li>Item 1</li><!--li是list item的缩写-->
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <ol>
        <li>Item 1</li><!--li是list item的缩写-->
        <li>Item 2</li>
        <li>Item 3</li>
    </ol>
    <!--table:有点套娃，先分出表头thead和表身tbody，表头和表身内部又按照行tr来添加内容。在表头的行中的内容为行标题th，表身中的内容为行数据td-->
    <table>
        <thead>  
            <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Chengzhu</td>
                <td>Ying</td>
                <td>22</td>
                <td>1804357885@qq.com</td>
            </tr>
        </tbody>
    </table>
    <!--form:表单,需要填信息,涉及了js的内容,还有button-->
    <form method="POST">  <!--仔细观察一下，如果不设置method属性的话，当表单内容被提交时，网址里会出现被提交的内容，这个就是为了不出现这些内容-->
        <div><!--划出一个区域放表单的第一个内容-->
            <label>Your student ID:</label>
			<!--input要求输入，输入的类型是文本，显示给用户看的提示符是placeholder中的值，用户输入的值存入name命名的变量中，等待上交-->
            <input type = "text" name = "student ID" placeholder = "enter your student ID">
        </div>
        <div><!--表单的第二个区域-->
            <label>Your password:</label>
			<!--提示用户enter your password，要求输入的数据为文本，存入password变量中-->
            <input type = "text" name = "password" placeholder = "enter your password">
        </div>
		<!--这是个具有提交功能的按钮，type说明它是用于submit的；value是按钮上显示的值，其实也是变量submit1的默认值，可以把form的method属性去了观察一下网址-->
        <input type = "submit" name="submit1" value="submit2">
        <br>
        <hr>
        <button>This is a button and is just a button.</button><!--这是一个没有功能的按钮，需要js为其提供动作才行-->
    </form>
	<!--这个是图片，src就是图片的source，而alt就是图片打不开时显示的alternative-->
    <img src="C:\Users\bamboo\Desktop\html/OIP-C.jpg" alt="this is a picture">

</body>

5.2 内联元素和块状元素

内联元素不会新起一行，而且只占据其需要的宽度。而块状元素会另起一行，并且占据整个网页的宽度。

内联元素常常会放在span容器（其也为内联元素）里，而块状元素往往会放在div容器（其也为块状元素）里。

竹某

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5快速上手

为了学习交互式编程这门课，需要一些基础的HTML的知识。但是为了节约时间，不可能学习得太深入，只需要学习HTML的一个适宜的子集即可。下面是从老师的ppt和B站上的基础课总结来的，供我做项目和期末时查看。一.HTML简介简介是为了理解HTML的本质和特点，以便于我记忆HTML的语法和具体使用HTML。下面以罗列的形式说明HTML：1.HTML是一门标记性语言（markup language），而不是一门编程语言（language）。它的作用是提供网页的基本结构和内容，而不是描述网页的行为。2
复制链接

扫一扫