前端3大模块：HTML/CSS/JS。

HTML：

1.一套浏览器所能识别的规则

 

2.开发者：

  • 熟悉HTML规则
  • 开发后台程序

 

3.本地测试：

  • html文件，直接用浏览器打开
  • vscode下载open in browser/view in browser，打开html文件后右键选择open in browser

 

4.编写HTML文件：

  • doctype声明对应关系
  • html标签（一个html文件只能有1个此标签），标签内可写属性
  • 通常包含head标签和body标签，body中为主要内容
  • 注释方式：<!-- 注释的内容 --> ，vscode快捷方式：选中代码后按“CTRL+/”

 

5.标签分类

  • 自闭合标签

示例：<meta charset = "UTF-8"/>

  • 主动闭合标签

示例：<title> 啊吧啊吧 </title>

PS：另一种分类方式：

  • 块级标签：div,h,p等等，自动占满一行，可调整高度宽度等
  • 行内标签：span,a等等，用多少占多少，不可调整高度宽度

标签之间可以嵌套，行内标签和块级标签通过display可以相互转化

 

6.head中的标签：

  • <meta/>用于编码/跳转/刷新/关键字/描述/IE兼容
  • <title/>
  • <link/>
  • <script>

 

7.body中的标签：

  • 一些特殊字符：&nbsp;     (空格）             &gt;     (>)            &lt;     (<)
  • <p>...</p>       段落，段与段之间有间距
  • <br/>       换行
  • <h1>...</h1>   h系列（h1~h6）对标签下字符进行相应格式的转换，h1字体最大
  • <div>...</div>      应用得最广泛，块级标签
  • <span>...</span>   和div类似，也是一个白板，它是行内标签
  • <input/>      输入标签，有很多种类:<input type = "text" />  输入文本；    

                                                          <input type ="password" />  输入密码；

                                                     <input type ="button" />  点击按钮；

                                              <input type ="submit" />  点击提交；

                                     <input type = "radio"/>  单选框；checked = "checked"代表默认

                          <input type = "checkbox"/>  复选框；checked = "checked"代表默认

                 <input type = "file"/>   提交文件，依赖于form表单的属性：enctype=“multipart/form-data"

           <input type = "reset" />   重置

  • <form>...</form>    把input数据存入表单。可以定义属性action，若提交,可提交到定义的action位置中
  • <textarea> 默认值</textarea>      输入多行数据
  • <select>...</select> 选择 中间可加多行<option>...</option>(option可设value属性方便提交）进行选择（下拉框）。size属性对应有几个选项，mutiple = ”multiple“代表可多选
  • <a>...</a>    跳转：属性href = ”某链接“  ；锚（定位）href = ”#加某标签的id“点击后可跳转当前页面该标签对应的位置 
  • <img/>    图片 src属性：图片根文件   alt属性：图片未加载出时显示   title属性：光标移至图片时显示
  • <ul>...</ul>   无序号列表（带符号），中间为多行<li>...</li>
  • <ol>...</ol>   带序号列表，中间为多行<li>...</li>
  • <dl>...</dl>   无序号列表，中间为<dt>...</dt>（名称）和多行<dd>...<dd>
  • <table>...</table>   表格，包含<thead>...</thead>和<tbody>...</tbody>,border属性代表是否显示边框。中间<tr>代表行</tr> ,<td>代表列</td>，td标签添加属性rowspan="NUM"代表该td标签对应单元格附近的”NUM“行单元格合并；td标签添加属性colspan="NUM"代表该td标签对应单元格附近的“NUM”列单元格合并；
  • <label>...</label>   通过for属性=某个ID，与ID对应的标签进行关联，点击网页中label的内容可在关联的标签获取光标
  • <fieldset>...</fieldset>   一个带缺口的文本框，中间可加上想要的内容，加上<legend>标题</legend>后可将标题显示在文本框的缺口上