珠峰HTML+CSS视频学习笔记第一天_html-js-css

概述网页的基本组成结构,标签及标签属性,常用的HTML标签,元素和元素内容,元素之块级元素和行内元素特点,标签语义化含义及实用技巧

前端描述：前端对于网站来说，通常是指网站的前台部分，包括网站的结果层和表现层，因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站前台代码实现，包括基本的HTML，CSS和JavaScript，高版本的HTML及CSS！

关于webstorm的安装和使用说明、webstorm的安装和使用示例，这里的编辑器如何使用会在后面完善，现在书写代码工具，建议用的是HBuilderX，讲解网址https://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/35357

#网页的基本组成结构HTML：超文本标记语言，是使用标记标签来描述网页的一种语言，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分；CSS层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化；Js：是一种轻量级的编程语言 #HTML基本结构-HTML简介

超文本标记语言是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分,正因为有规则,浏览器才知道怎样去解读你的文件但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。兼容问题

#HTML基本结构-文档声明为了说明文档使用的超文本标记原因标准，所有的超文本标记语言文档应该以“文档类型声明”<!DOCTYPE>开头，引用一个文件类型描述或者必要情况下自定义一个文件类型的描述<!DOCTYPE>声明必须是HTML文档的第一行，位于<HTML>标签之前<!DOCTYPE>声明不是HTML标签,它是指web浏览器关于页面使用哪个HTML版本进行编写的指令在HTML4.01中，<!DOCTYPE>声明引用DTD，因为HTML4.01基于SGM。DTD标记了语言的规则，这样浏览器才能正确呈现内容HTML5不基于SGML，所以不需要DTD #HTML基本结构-head<head>标签用于定义文档的头部，它是所有头部元素的容器<head>中的元素可以引用脚本，指示浏览器在哪里找到样式表、提供元信息等等文档的头部描述了文档的各种属性和信息，包括文档的标题、在web中的位置以及和其他文档的关系等，绝大多数文档头部包含的数据都不会真正作为内容显示给用户下面这些标题可用在head部分:<link>,<Meta>,<script>,<syle>以及<Title>

补充：视口 vIEwport Meta:vp table键（移动端手机页面开发必须添加的代码）&页面小图标:<link rel="shortcut icon" href="//mat1.gtimg.com/www/icon/favicon2.ico" />

#HTML基本结构-body网页的主体部分body元素定义文档的主体,用户看到的内容都在body内编写body元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）#标签及标签属性

HTML中我们用标签来进行标记,HTML标记标签通常被称为HTML标签( HTML tag)

标签语法:

由成对的尖括号和标签名组成,例如<p></p>
HML通常是成对出现的,第一个是开始标签,第二个是结束标签,例如<div></div>

标签分闭合和空标签①闭合标签由开始标签和结束标签组成，标签之间可以放内容，可以进行标签之间的嵌套②空标签：没有内容的HTML元素被称为空元素。空元素是在开始标签中关闭的，例如<br />

标签一般小写，闭合标签一定要有结束标签，空标签没有结束标签，不要手动去添加闭合标签

HTML标签属性htm标签可以拥有属性,属性提供了有关HTML元素的更多的信息
属性总是以属性名/属性值的形式出现,多个属性名属性值之间用空格隔开;比如:name="value"属性总是在HML元素的开始标签中,标签名后面的内容

例如<img src="http://www.dhnblog.com/images/gravatar.jpg" alt="大灰牛博客" title="大灰牛博客"〉

src=""放图片的路径地址;
alt=″″图片路径加载失败或者图片丢失时,图片的描述说明文字内容;Title=″″鼠标移动到图片上的文字描述说明内容;

href=""超链接要跳转的路径地址 href="JavaScript:;"禁止默认的链接跳转
target="_blank"在新窗口中打开;target="_self"在当前窗口中打开

HTML4版本常见的标签元素/网址:http://www.zhufengpeixun.com/qianduanjishuziliao/qianduanCSSziliao/2016-06-29/456.HTML

HTML5版本新增标签/网址:http://old.zhufengpeixun.cn/qianduanjishuziliao/CSS3heHTML5zhuanti/2016-11-20/665.HTML

#常用的HTML标签完整梳理

60个\参考网址https://www.w3school.com.cn/Tags/index.asp

#元素和元素内容

HTML元素指的是从开始标签( start tag)到结束标签( end tag)的所有代码

注释:开始标签被称为开放标签(opening tag),结束标签被称为闭合标签(closing tag)

HTML元素以开始标签起始HTML元素以结束标签终止元素的内容是开始标签与结束标签之间的内容某些HML元素(空标签)具有空内容( empty content)空元素在开始标签中进行关闭(以开始标签的结束而结束)大多数htm元素可拥有标签属性#元素之块级元素和行内元素特点(面试题)

行内元素:a,button.big,em,i,input,mark,span,select,option,strog,b,sup,sub,textarea,u
块状元素:table,dl-dt-dd,figure,figcaption,div,h1-h6,hr,ul-li,ol-li,nav,p,form
行内块状元素img,input

本身属性为display:block的元素；因为它自身的特点，我们通常使用块级元素来进行结构的搭建布局

块级元素的特点(行内与之相反)

独占一行,每一个块级元素都会从新的一行重新开始排列方式:从上到下依次排布可以直接控制宽度、高度以及盒子模型的相关CSS属性在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度,高度是它本身内容的高度可以嵌套行内元素ul/ol下面只能是li;dl下面只能是dt,dd;p不能包裹其他块级元素包括它本身

元素之间的相互转换
行内元素=> display: inline
块级元素=>display: block
行内块元素=>display: inline- block

#标签语义化含义及实用技巧

标签语义化一含义

合适标签做合适的事情,例如文章段落用p标签,标题用h1-h6标签标签语义化为浏览器和搜索引擎服务

标签语乂化一为什么要遵循标签语义化

利于SE0优化(也就是搜索引擎的抓取,搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重)在样式丢失的时候,还是可以比较好的呈现结构更好的支持各种终端,例如无障碍阅读和有声小说等利于团队开发和维护,W3C给我们定了一个标准,那么团队中都遵循这个标准,那么代码的差异就会缩小,在开发和维护的时候就可以提高效率

标签语义化-日常工作中怎样遵循标签语义化

尽量减少使用无意义标签,例如span和div尽量不使用标签本身的CSS属性,例如b、fonηt、s等标签,如果需要这些样式,那么使用CSS样式来进行添加在需要强调的部分,使用 strong、em,但是样式尽量使用CSS样式来描述表格搭建时,使用<thead>表格头部</thead><tbody>表格身体</tbody><tfoot>表格尾部</tfoot>列表搭建时,使用<ul>无序列表</ul><o|>有序列表</ol><dl>定义列表</dl> 总结

以上是内存溢出为你收集整理的珠峰HTML+CSS视频学习笔记第一天全部内容，希望文章能够帮你解决珠峰HTML+CSS视频学习笔记第一天所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1027617.html