标签:概念 这一 http color 需要 窗口 word 目录 can
以下是我个人的理解,希望得到肯定与指正,在此先感谢各位。
而且不说温故知新,看别人的笔记就相当于复习了,记得更牢固。
向大家安利四个在线编写页面的网站(在写笔记的时候,千万不要在预览的状态下点击链接,原因你懂的!!!!):
jsbin.com
mozilla
codepen.io
jsfiddle.net
1.提交作业的时候,不是有一个 预览 吗?虽然是选填的,但是,可以使用上面的四个网站解决这个问题(无法显示图片,但是可以使用一个神奇的网站解决。想要多大的图片,直接更改 宽x高),我看到有的同学作业,直接使用gitHub显示出来效果来了!我研究研究,然后看看是怎么办到的,再写到笔记里面。
2.推荐 这里效果图我的作业 ————这个是网上的教程。对于会在git上提交作业的我们,只看文章的前半部分就好啦! 如果教程链接失效,根据本页面 田野的提示去搜索就好啦。
Hypertext Markup Language(超文本标记语言)的简写就是HTML。
我们在浏览器中打开的网页,这个网页就是由长的帅的HTML组成的,没有HTML就没有网页。
我们使用这个语言的元素,来进行网页的制作。
从上图(来自《HTML5权威指南》)可以看到<code>元素由开始标签、内容、结束标签组成,我想,这就是为什么也会 有人把元素叫做标签的原因。
推荐 caniuse.com这个网站很好理解,功能就是可以查询HTML标签被 浏览器支持的情况,当然这只是其中一个功能,剩下的还需要各位同学去探索。
可以看到,在这个网站中有些元素已经不推荐使用了,但是像《HTML5权威指南》等出版时间过早的书中并没有说明。
HTML5是说的是HTML的版本,但是字不表意,不是说是从造出来到现在已经第一个版本了,就像QQ2001、QQ2003一样,不是说他两千多个版本了,而是其它的意思,在以后还会有CSS3也是同样的道理,我感觉对于这个大概了解一下就可以了,不必深究,有比它更重要的。
HTML5有一个很重要的概念就是语义化,每个HTML标签都有他的功能,但是在HTML5中为某些标签赋予了一些含义,谁代表什么(<header><main><footer>头部、主要内容、尾部)什么意思。这个字有利于阅读和搜索引擎的抓取,但是HTML5有很多功能现代的浏览器都不支持,低版本的浏览器更不支持了。
下面的代码,是我自己在上课的时候记录的笔记:
<!-->
标签在一对<>中
属性值在双引号中
嵌套缩进
</!-->
<!DOCTYPE html>
<html lang="en">
<head><!-->文档头部</!-->
<meta charset="UTF-8">
<title>Document</title>
<meta name="keywords" content="晚去">
<meta name="description" content="网易">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<style type="text/css">p{color:#999;}</style>
<!--
文档头部做了啥?
charset="UTF-8"是蛤意思?为什么要放在 head标签 中的第一行? 嗯哼
title和谁的内容是唯二会显示出来效果的标签?
name和谁是一对?这对是什么鬼?嗯哼?description 是什么意思?
viewport???
icon是啥?在什么情况下不需要写?
rel?styles?heet?type?又都是什么?
href&src 的区别是什么?
标签和元素是有区别的!
-->
</head>
<body><!-->文档主体</!-->
</body>
</html>
<!-->
文档的基本属性和信息
meta 标签主要分为三种
one charset属性 定义了文档的字符编码,值和文档的内容是要一致的
two keywords
description
主要描述了文档的基本信息 content中的内容主要是给 搜索引擎 用的
three 这一种name为viewport的meta 对移动端浏览器才有效,设置宽高、缩放等等
link 有两个作用
one 引入shortcut icon 在href中引入图片地址,一般不要写,浏览器默认 根目录下的图标进行展示,如果不一样就用显示的引入
two stylesheet引入样式
引入style的两种方式,还有第三种
打 ! 再 tab 会产生基本的HTML页面————emmet插件
command+ / 会产生注释 ————插件的功劳
</!-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性</title>
</head>
<body>
fefsfsfefeffesf3232323fesfefefefsfef
<div id="nav"></div>
<div class="time"></div>
<style type="display:none;"></style>
</body>
</html>
<!-->
di与class的区别
HTML label和 属性名 都建议用小写
属性值用双引号“”引起
对所有label 都有效的property,也称为全局property
</!-->
<!-->
id属性 元素在页面中唯一的标识
class属性 元素的类名 具有统一的功能和样式的元素可以给一个统一的类名 class属性值中间可以用空格隔开!!!
id&class都是给 CSS&JS使用的
style 规定了元素的样式
title 规定了元素的隐藏内容 鼠标hover在不完全显示的内容或者hover在功能图标上想看其意思的时候 会显示hover的值
</!-->
以下标签语义化的表示章节结构,在HTML5之前都是用div标签进行分隔
header 页面头部/标题/logo/搜索表单 等等
nav 任何有导航性质的标签都可以用到,比如页面中的导航,可以有多个
aside 和主要内容不相关的内容,工具内容/广告什么的
article 表示独立的可重复的结构:论坛的帖子/博客的评论
section 表示文档中的一个区域:一般会带一个标题 相临的section之间是有相关性的,article则不相关,是独立的
footer 章节的尾部:版权信息/相关文档/一些独立内容的尾部也可以用到
我在学习中遇到了一些问题,可以帮我解答一下吗?谢谢
<label for="PW">请输入密码:</label>
<input id="PW" placeholder="这是输入框" type="password" maxlength="16" required="required">
标签:概念 这一 http color 需要 窗口 word 目录 can
原文地址:http://www.cnblogs.com/changningios/p/6528144.html