前端书写编辑器
前端编辑器有很多，比如说Sublime Text,Vs code,Notepad++等等，其中前端程序员最常用的就是Vscode，号称宇宙最强编辑器。
附上Vscode的下载网址
Visual Studio Code - Code Editing. Redefined
初始HTML
HTML:超文本标记语言（Hyper Text Markup Language）值得注意的是HTML不是一门编程语言，而是一门标记语言，是网页制作必不可少的一门语言。
HTML的基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
（直接在vscode上敲！+Tab键自动生成，这是通过Emmet语法实现的，Emmet是一个能大幅度提高前端开发效率的工具，能够实现 HTML、CSS 的快速编写。vscode已经集成了该语法）
下面就来介绍一下HTML的基本结构
- <!DOCTYPE> 是 Document Type Declaration 的简称，只是用来声明文档，也就是告知 web 浏览器当前页面使用了哪种?HTML 版本编写代码，此处使用的是?HTML 5?的版本。声明文档必不可少，而且必须位于?HTML 文档的第一行；
- <html> 表示页面编写的代码都是 HTML 代码。它是成对出现的标签，直到?</html> 结束。除了声明文档外的所有代码都必须写在 <html></html> 中间；
- <head> 表示页面的"头部"，页面的 title（标题）一般写在 <head></head> 中间；
- <meta charset="UTF-8">是告知浏览器此页面属于什么字符编码格式，UTF-8也称“万国码”，可以显示世界上绝大部分国家和地区的文字，是前端程序员最常用的字符集；
- <title> 表示页面的标题；
- <body> 表示页面的"身体"，页面中的绝大部分内容都可以写在 <body></body> 之间。
HTML的常用标签?
- <br/>（break打破的意思，强制换行）换行标签，是单标，在需要换行时添加。备注：单标签的“/”都是在后面。
- <hr/>(水平线标签，单标签) <hr size=”厚度值”?? noshade（用来去掉3D效果）? width=”宽度值”? align”对齐方式，比如center” color=”颜色”/>
- <>尖括号内的所有内容都不会在网页内显
- <p>段落标签，双标签，使用方式：<p>内容</p>，p标签有align属性，可以通过设置align的属性来设置对齐方式，使用方式：<p align=center></p>。换行标签，和<br/>标签的区别为：段与段之间的间距更大，<p>标签的属性是align，属性值为：left;right;center。
- <center>，居中标签，双标签，使用方式：<center>网页内容</center>。
- <h1></h1>是一级标题：字体最大，只能使用一次。<h2></h2>至<h6></h6>，h2至h6可以重复使用。标签标题hn有6个等级。
- <b></b>bold（加粗）。<strong></strong>（强调加粗）strong是具有优先级。
- <i></i>( italic斜体)斜体标签。
- <cite></cite>（cite，引用）斜体引用标签。
- <em></em>（emphasized，强调的意思）斜体强调标签。
- <u></u>下划线标签。
- <styike></styike>、<s></s>、<del></del>(这三个都是删除线)。
- <font></font>，HTML中使用<font>标签的使用方式：<font color=”颜色” size”数字”></font>。
- <pre>该标签内可以识别空字符，比如空格或换行（回车）
- <table></table>(定义单元格标签)。<caption></caption>）。<tr></tr>（行标签，代表一行表格，t是table的缩写，r是row的缩写：行的意思）。<th></th>（表格表头标签，表头标签有加粗居中的效果）。<td></td>（定义一个单元格的标签）。例子：<table width="400px"（设置表格的宽度）height="200px"(设置表格的高度) align="center"（设置表格的水平对齐）border="1"(设置表格的表框) cellspacing="0"（设置表格表框与边框的距离）cellpadding="20"（设置表格中文字与边框的距离）bordercolor="blue"（设置表格边框颜色）background="路径"（设置表格背景图片）bgcolor=”red”（设置表格背景颜色）valign=”top、middle、bottom”（设置表格内容垂直对齐方式）type=”solid;边框样式实线，dotted;边框样式点状，dashed;边框样式虚线”。
- img（插入图片标签）使用方法：<img src（来源的意思）=”图片路径” alt=”图片显示不出的提示文字，有给搜索引擎看的用意” title=”鼠标移动到图片上显示的文字提示” width=”属性值” height=”属性值” border=”属性值” bordercolor=”边框颜色/>。注：如果图片路径和HTML文件位于同一级，则如<img src="ahh.gif"/>,如果位于HTML文件的上一级，则如img src="images/ahh.gif"/>,如果位于HTML文件的上一级，则如img src="../ahh.gif"/>
- <a href=”#” target="_self在原窗口中打开，为默认值。_blank在新窗口打开”>
- <form></form>表单标签，标签对内的是控件。
|