当前位置: 首页 > Web前端 > HTML

Week1--Introduction to HTML5

时间:2023-04-02 15:27:29 HTML

基础的HTML知识1.首先以<!doctype html>声明开头如若不以此声明开头,那么浏览器会以quirky mode处理,关于<!doctype html>doctype与html无论大小写均可,在保证doctype与html之间留有一个空格的前提下,html后面可以打多个空格,演示以下情况:<!DOCTYPE html><!Doctype HTML><!DocType html ? ? ? ? ? ?>均可2.主要结构<!doctype html><html><head><meta charset="utf-8"><title> </title></head><body></body></html>下面依次解释:关于tag,html由tag组成,所有tag均有开始标签,部分以</tag>结束,并非要求所有都有结束标签。首先一个html文档包含<head>与<body>,1.<title>与</title>之间可以填充任意字符,表示你网页的名字,即浏览器最上方的网页名字栏显示的内容2.<meta>的charset="utf-8"是指该网页编码为utf-8,对于标签的属性,其属性值是以单引号或者双引号包含的3.<body>部分则显示网页的主界面3.flow 与 phrase主要讲HTML5讲以前的block元素与inline元素归类为flow与phrase,常见的两个代表:<div> 块级元素:每个<div>均会换行<span> 行内元素:元素全部显示在一行内,不换行 注意:在<span>里面包含<div>是错误的,如<span><div></div></span>4.simantic-elements为了便于人们的理解,许多标签具有simantic的含义,也就是根据标签名能大致推断标签的作用,比如:<head><body><section><article><footer>等等5.list想要在网页中显示类似于清单的效果,例如:可以使用<tag>: My typical dinner shopping list: <ul> <li>Milk</li> <li>Donuts</li> <li>Cookies <ul> <li>Chocolate</li> <li>Sugar</li> <li>Peanut Butter</li> </ul> </li> <li>Pepto Bismol</li> </ul>以<ul>开启一个清单,其中的子项是<li>描述,清单可以嵌套清单除了使用<ul>与<li>外,还可以使用<ol>与<li> <ol> <li>Open box</li> <li>Take out cookie</li> <li>Make a Double Oreo <ol> <li>Peel off the top part</li> <li>Place another cookie in the middle</li> <li>Put back the top part</li> </ol> </li> <li>Enjoy!</li> </ol><ol>,<li>则有自动排序编号的效果6.Entities Reference如果想在网页中显示一些<>之类的,但不想被HTML当作源码编译,就得使用entities reference,比如以下含义等价:<:&amplt;&gt:&ampgt;&:&ampamp;相当于如果你想在你的网页上显示<div>,而不是将<div>编译,可以写成&amplt; div &ampgt;&quto;显示为"引号,比较有用的一个是&ampnbsp;nbsp的意思是no broken space,我们知道,当我们把浏览器页面的宽度缩小,段落间的一些单词就会换行,如果你想让某三个单词之间不换行,或是换行时仍然在一起而不被分割,在第一个单词与第二个单词之后加&ampnbsp;吧victory&nbsp;nor&nbsp;defeat.7.链接跳转标签&lta&gt可以实现连接跳转,只需在&lta href="你要跳转的链接"&gt,即可,可以是外部链接,也可以是内部链接,即.html后缀的文件,与当前html文件在同一个文件夹下<!doctype html><html><head> <meta charset="utf-8"> <title>Links</title></head><body> <h1 id="top">Links to Sections of The Same Page</h1> <section> <ul> <!-- Link to every section in the page --> <li><a href="#section1">#section1</a></li> <li><a href="#section2">#section2</a></li> <li><a href="#section3">#section3</a></li> <li><a href="#section4">#section4</a></li> <li><a href="#section5">#section5</a></li> <li><a href="#section6">#section6</a></li> </ul> </section> <section id="section1">将一个tag的id指定为某个值,在href里面加上前缀#,则可实现点击跳转到该部分,类似于目录导航8.图片显示使用标签<img src="图片链接,与上文中的跳转链接别无他样" width='' height=''>,展示图片时最好加上width与height属性,这样你可以提前告知浏览器你所要呈现的图片大小,如果不设置width和height,那么加载图片时会突然跳出来,体验不好<img>是inline element