开始啦
新的学期开始了,终于学到了一直想学的HTML,不得有点小开心。 然后自己想记录一下自己的学习过程 这是开始的代码段:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>这个是标题</title>
</head>
<body>
这是网页显示的内容,通过<body><body/>来表达自己想实现的内容
</body>
</html>
HTML5的基本格式
- <!doctype html>标记:用于向浏览器说明当前文档使用哪种HTML标准规范(只要开头处使用)。
- <html>标记-根标记:用于告知浏览器这是一个HTML文件,标志着文档的开始,而</html>标志着文档的结束
- <head>标记-头部标记:主要封装其他位于文档头部的标记,如<title>,<meta>,<lin>,<style>等等,用来描述文档的关系,一个HTML只能有一对<head>标记
- <body>-主体标记:浏览器中显示的所有文本,图像,音频,视频等信息的必须在<body>标记内,位于<head>之后,与其是并列关系,也是HTML的唯一
HTML5的语法
- 标记不区分大小写
- 允许属性值不使用引号
<input checked=a tyoe=checkbox />
<input checked="a" tyoe="checkbox" />
- 允许部分属性值的属性省略
<input checked="checked" type ="checkbox" />
<input checked type ="checkbox" />
HTML5可以省略部分属性值的属性省略:checked readonly defer ismap nohref noshade nowrap selected disabled multiple noresize
HTML5的标记
双标记与单标记
<!-- 双标记指开始和结束两个标记符组成的标记 -->
<标记名>内容</标记名>
<p>内容</p>
<!-- 单标记也称空标记,指用一个标记符号即可完整描述某个功能的标记 -->
<标记名 />
<hr />
如框内部所描<!-- 注释语句 -->
标记的属性
我们需要HTML显示更多的信息,不一样的感观,所以我们要开始设置不同的属性,使文本更加突出,或者使页面五颜六色的
比如这样,一下一下的:
基本的语法格式为:
<标记名 属性1="属性1" 属性2="属性2" >内容</标记名>
属性1为属性名 "属性1"为属性值
然后还有一种嵌套关系,直接举例子吧
<p>我们可以这样<strong>这是加粗的</strong>嵌套</p>
然后它就会变成这样子,理解的扣三室一厅/手动狗头
HTML5文档头部相关标记
设置页面标题的标记<title>
<title>my html</title>
结束页面的这个
定义页面元信息标记<meta />
下面这个是<meta />常用的设置
<meta name='作者姓名:鲸灵' content='值'>
name是属性值 content就是原来定义name的具体信息
设置字符集
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
用;隔开,用于说明文档类型为html,字符集为utf-8(国际化编码)
引用外部文件标记
在<head>标记中使用<link />标记引用外部外部文件
<link 属性="属性值" />
<link />常用属性
属性名 | 常用属性值 | 描述 |
href | URL | 指定引用外部文档的地址 |
rel | stylesheet | 指定当前文档与外部文档的关系 该属性值通常为stylesheet, 表示定义一个外部样式表 |
type | text/css | 引用外部文档的类型为CSS样式表 |
text/javascript | 引用外部文档的类型为javascript脚本 |
例如,使用<ink>标记引用外部 CSS 样式表:
<link rel-"stylesheet" type-"text/css" href-"style.css"/>
上面的代码,表示引用当前 HTML5 页面所在文件夹中文件名为“style.css”的 CSS 样式表
内嵌样式标记
<style 属性="属性值">样式内容</style>
在HTML5中,<style>相对应的属性值为text/css,表示内嵌的CSS样式
<title>2</title>
<style type="text/css">
h2{color: antiquewhite}
p{color: aqua}
</style>
</head>
<body>
<h2>呼呼</h2>
<p>哈哈哈</p>
</body>
好啦,呼啦啦,下次继续/手动没有表情包