博客列表 >HTML基础知识入门学习总结

HTML基础知识入门学习总结

我是郭富城
我是郭富城原创
2020年04月03日 05:18:26818浏览

一 HTML基础知识学习总结

序号 内容 描述 备注
1 网页组成部分 1.1 文本内容:呈现出来的具体内容;1.2 其他文件引用,例如文字视频等;1.3 标记,对上述两项内容的正确阐述
2 HTML设计思想 2.1 基于标签展示和呈现;2.2 超文本语言:包含有超链接的文本;2.3 HTML并不是编程语言
3 HTML页面结构 3.1 <!DOCTYPE html>通知浏览器我是html文档;3.2 <html>...</html>根标签;3.3 <html lang="en"> <html lang="zh-CN">html 文档使用的编写语言;3.4 <head>...</head>供浏览器和搜索引擎使用,用户不感兴趣,不想看到的内容;3.5 <meta>设置页面元素数据;3.6 <meta charset="UTF-8">html 文档编写语言所属的字符编码集,有utf和gbk两种类型;3.7 <meta name="viewport" content="..." /> 其中 name="viewport" 可视区屏幕,例如是否允许缩放这个页面。width=device-width页面宽度应该与显示设备的宽度相匹配,宽带自适应即可。initial-scale=1.0,页面不缩放,1:1呈现;3.8 <title>指定当前页面的标题;3.9 <body>...</body> 页面主体内容;3.10 <!-- 需要注释内容或者代码 -> 推荐全部使用小写字母
4 元素,属性与值 4.1 元素分类非空元素和空元素,非空元素为双标签,例如<a>内容</a>,空元素为单标签,例如图片的引用,<img src="logo.png" alt="我的logo">;4.2 属性和值:属性必须写在元素标签的“起始标签”,有属性名称和值组成;4.3 值包括:字符串<p class="active">...</p>,预定的值<input type="text"> ,指定格式<a href="https://php.cn">...</a>,数值<table width="200">...</table>,布尔值<input type="email" required>;4.4 三大通用属性:id元素的唯一标识,如<div id="wrap">...</div>class给元素添加类样式,如<div class="box">...</div>style设置当前元素样式,如 <div style="...">...</div> 布尔属性的值是可选的
5 层级关系 5.1 元素层级结构中, 必须保持正确的嵌套关系;5.2 元素中允许包含另一个元素,被包含的元素叫做子元素, 子元素又可以继承包含其它元素,依此类推;
6 文本字符 6.1 多个空格,制表符,回车符,换行符,都会被压缩为一个空格;6.2 Unicode极大的缓解了特殊字符的问题,推荐将文档编码设置为utf-8;6.3 常用的转义字符:空格nbsp;,小于<,大于>,&&,双引号",版权©,商标®等等
7 文件与文件夹名称 7.1 使用小写字母;7.2 采用合适的扩展名: .html;7.3 坚持使用连接线-,而不是下划线_分隔多个单词
8 URL 8.1 语法: http(s)://主机名(IP/域名)/路径(目录)/文件名;8.2 绝对 URL:如http://php.cn/courses/1088.html;8.3 相对 URL,../demo2.html表示位于上级目录的相对位置
9 标签语义化的优势 优点:更直观,突出想要展示的内容,且各大浏览器样式一致;有利于 SEO, 得升关键词优化与排名;提高加载速度,也方便代码维护与样式控制;无障碍支持
10 元素的默认样式 如果代码文档中没有自定义的样式,浏览器将会采用默认样式展示;自定义样式优先级别高于默认样式

二 学习总结

通过本节课的学习,基本掌握了HTML的框架和未来学习的注意事项,例如网页是由需要展示的文本内容,引用到的文件资源和标记等组成,元素由不同的标签组成,标签包含着展示内容的属性和值等等。本节课后对HTML有了初步的认识,相信在掌握以上具体内容后,对未来的学习有进一步的提升。


三 学习课堂笔记

第一页
第二页
第三页

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议