基础前端三件套 HTML CSS Javascript
本文主要是为了总结自己在前端学习过程中所学到的知识与遇到的问题,其次是能给小白,作为一些知识总结参考, 本系列会从基础的HTML开始总结,记录平时开发中常用到的标签和属性,后续会更新 css,JavaScript的总结,以及框架的总结。
(当然,我也是个小白😂),仅供参考,如果有不对的地方欢迎指正,希望能坚持更新。
基础一:HTML(房屋骨架)
标签
标签分为块级标签和行级标签:
行级标签顾名思义就是在行内的元素不会独占一行,在css样式中不能设置宽度和高度。 例如:
<input> <img> <span> <a>
块级标签和行级元素就相反,独占一行,可以设置宽度和高度。
<div> <p> <h1> <ul> <li>
块级元素和行内元素之间也可以进行变换
块级元素变为行内元素:设置元素的 CSS样式为 display:inline;
行级元素变为块级元素:设置元素的 CSS样式为 display:block,也可以设置为display:inline-block:表示为行内块元素,这样可以对行元素设置宽高。
页面标签合集:
1. <html><html>
此元素可告知浏览器其自身是一个 HTML 文档,该标签作为元素的根元素。
2. <head></head>
标签用于定义文档的头部,它是所有头部元素的容器,在其中可以引入脚本(js)文件也可以引入样式文件(css)
3. <div></div>
作为前端最常用的到块级元素。
4. <body></body>
文档中展示个用户的内容部分,在其中我们可以进行页面布局,设计页面。
5. <header></header>
在布局中使用的语义化标签,header,用来表示此为页面布局的头部,文档的页眉。
语义化标签作为H5 标准引入的概念相关 的标签还有 <airtle> <footer> <aside> <main> <nav>...
语义化:每个元素都已自己的实际意义。
语义化就是为了文档结构更加清晰完整,便于代码的解读,使得搜索引擎更快的解析页面。
6. <form></form>
表单标签,用来网页上的信息提交。该标签中常用的属性为 method:提交类型分为 get 、post ,action: 提交到何处。
7. <input> 标签
用于用户输入或选择的标签。
标签会根据其属性 type 的值进行不同的类型变换:
button | 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
checkbox | 定义复选框。
file | 定义输入字段和 "浏览"按钮,供文件上传。
hidden | 定义隐藏的输入字段。
image | 定义图像形式的提交按钮。
password | 定义密码字段。该字段中的字符被掩码。
radio | 定义单选按钮。
reset | 定义重置按钮。重置按钮会清除表单中的所有数据。
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。
text | 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。
8. <button>
按钮标签
9. <ul> <li>
无序列表标签,这俩组合使用
10. <table></table>
表格标签,其中还有标签<th></th> 表格的表头,<tr></tr> 表格的行,<td></td> 表格的列。
例子:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
11. <p></p>
定义文本段落
12. <style></style>
样式标签,用来在HTML文档中书写样式文件。存在于<head></head> 标签中
例子:
<style>
div{
height: 10px;
width: 10px
}
</style>
13. <script></script>
该标签可以用来引入脚本文件,也可在其中直接书写js,一般存在于文档的最后,放在最后是为了保证文档中的元素加载完成,使得js 中的方法执行时不会找不到 DOM元素。