HTML结构
<DOCTYPE html> <---声明这一行代码的意思是：下面的文档标签将以html5规范去解析-->
<html>
<head> <--!头部，主要来完成一个网站的相关设置-->
<meta charset="UTF-8"> <--！汉字编码-->
<meta name="keywords" content=" "> <--!设置一个网站的搜索关键字-->
<meta name="description" content=“ ”> <!--网站的标题>
</head>
<body> <!--用来写网站内容的地方-->
</body>
</html>
基本标签
<div> 标签 它是 可用来组合其他html元素的容器
1. 可用于对大的内容快设置样式属性
2.文档布局。它取代了使用表格定义布局的老式方法
<hx> 标签
x可以是1，2，3，4，5，6.标题从一级到六级。1级标题最大，6级最小，会自动加粗。<hx>标签会独占一行，他是块级标签
<p>标签
表示段落，相当于一个回车
<br>标签
br元素 会在浏览器插入一个简单的换行符，它属于一个单标签
<hr> 标签
hr标签是定义HTML 页面中的主题变化(比如话题的转移),并显示为一条水平线。
它属于一个单标签。
<a>标签
a标签是用来设置超文本链接的可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档的某个部分
常用属性
title : 给a标签加上这个属性，当鼠标移动至上面时会提示文字title内容。
target： 设置跳转方式，常用的跳转方式由target=“-blank” 表示从新的窗口打开网页
<img> 标签
用来加载外部图片，图像。src:用来设定加载的图片会图像的路径。
常用属性：
alt= “ ” ： 当图片加载不出来的时候，或者路径不存在的时候会提示文字
title=“ ” ： 当鼠标移动至图片上时会显示文字
<span> 标签
作用与div一样，都是用来布局的，不同的是div会独占一行，而span不会。span标签用于行内布局
<ul > <ol > 标签
ul标签是无序列表，ol是有序列表 ，他们列表内容都是用li标签
<!-- 注释-->
注释标签 用于让别人能看懂你的代码，浏览器不会解析你的注释。
标签属性
1.通常用属性名=属性值 组成
2.起附加信息的作用
3.不是所有标签都有属性，比如br标签。
文本格式化标签
文本格式化标签：就是通过标签来美化外观的。
<b> <strong > 标签
b和strong标签都有加粗作用，但strong 除了加粗还有强调作用，强调主要用于SEO时，便于提取对应的关键字，而且都是行级标签不会自动换行。
<i> <em> 标签
这两个标签都能使文本倾斜，em具有强调作用，如果只是简单的倾斜效果，用i标签就可以，比如添加图标
<pre> 标签
pre 标签 可定义预格式化文本，被包围在pre标签元素中的文本通常会保留空格和换行符而文本也会呈现等宽字体（它是块级标签）
<small> 和 <big> 标签
前者让文字缩小一号后者让文字放大一号，big在html5中已经淘汰了但并没有删除。在开发中尽量不要使用淘汰了的标签（行级标签）
<sub>和<sup>标签
用来设置文本为下标和上标，用来调整文本正常显示的基线，且文字会自动小一号
单双标签
单标签：指的是由一个标签组成：
比如
换行符: <br/>
水平线：<hr/>
图片标签:<img/>
文本标签：<input/>
link标签: <link/>
元信息标签 : <meta/>
2.双标签
由“开始标签”和结束标签两部分构成，必须成对使用
如：
<p></p>段落标签 ，其中<p>是开始标签表示一个段落的开始，</p>是结束标签
HTML 块级元素和行内元素
块级元素：（相当于执行display：block；操作）
块级元素会独占一行，其宽度自动填满父级元素宽度一般情况下，块级元素可以设置width和height属性，一般用来搭建网站结构，布局，承载内容......
[独占一行，宽度和高度是可控的，如果没有设置其宽度，将默认铺满整行]
行内元素：（相当于执行display：inline；操作）
行内元素不会独占一行，相邻的元素占同一行，知道占满，会自动掉到下一行，宽度和高度是不可控的，其内只能包含行级元素。
标签嵌套规则
1.块级元素可以包含内联元素（行级元素）或某些块元素，单内联元素却不包含块级元素，它只能包含其他内联元素。
（内联元素不能包含块级元素）
2.块级元素不能放在<p>标签里面
<p><li><li></p> 这显然是不对的
<p><div><div></p> 这也是不对的
3.有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：
<h1> , <h2>,<h3>,<h4>,<h5><h6>,<p>,<dt>
4.块级元素与块级元素并列，内联元素与内联元素并列。
<div><h2><h2><p></p></div> 这样嵌套是没有问题的
<div><a href="#"></a><span></span></div> 这样嵌套也是没有问题的
企业官网文件命名规范
项目开发时，项目中文件或目录名中不能出现汉字和空格其他的符号，文件和目录名一般以字母和下划线开头，其后可以出现字母，数字，下划线
常用文件名：
index.html(首页)
product.html(产品页)
about.html(公司介绍)
news.html（新闻列表）
news_details.html(新闻详情页)
contact.html(联系我们)
课堂小结：
1.html是一种超文本标记语言，它不属于编程语言
2.html时2014年推出的，他是下一代公认的web语言，是重要的网络推手
3.html具有简易性，可扩展性，平台无关性和通用性的特点
4.网页分文静态网页和动态网页
5.五大浏览器 ie（edge），火狐(firefox) ,chrome(谷歌浏览器)，opera（欧鹏浏览器），safari（苹果自带浏览器）
6.浏览器内核由渲染和js引擎两部分组成
内核：ie（trident内核），firefox（gecko内核），safair（webkit） ，chrome（blink内核），opera（blink内核）
国内大多的浏览器采用的是双核驱动(trident和webkit)或（trident和blink内核）
7常用的开发工具
1、 Sublime
Sublime全称为Sublime Text，是一个代码编辑器，早由程序员Jon Skinner于2008年1月开发出来。Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图、功能插件等。Sublime text还是一个跨平台的编辑器，支Windows、linux、Mac等操作系统。
2、 Visual Studio Code
Visual Studio Code(简称“VS Code”)是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器， 可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言(例如C++，C#，Java，Python，PHP，Go)和运行时(例如.NET和Unity)扩展的生态系统。
3、 Webstorm
WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“强大的HTML5编辑器”、“智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。
4、 Dreamweaver
Dreamweaver简称DW(中文译为“梦想编织者”)，是美国MACROMEDIA公司开发的集网页制作和网站管理于一身的“所见即所得”网页编辑器，2005年被Adobe公司收购。DW是套针对非专业网站建设人员的视觉化网页开发工具，利用它可以轻而易举地制作网页。
5、 Hbuilder
HBUilder是DCloud推出的一款支持HTML5的Web开发软件。“快”是BUilder的优势，通过完整的语法提示、代码输入法以及代码块等，HBuilder可以大幅提升HTML、JavaScript的开发效率。
以上就是我通过学习bilibili视频《web前端90天学完就业》p1--p22 总结的笔记https://www.bilibili.com/video/BV1i7411Z7d8?p=1
这里是hacker言 QQ：1430061968
我的座右铭是:
种一棵树最好的时间是十年前，其次是现在！
746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
