前端学习笔记HTML篇
HTML篇
开发工具选择
新手阶段使用VSCODE作为开发工具 安装后需要安装以下扩展:
- LiveServer(网页实时预览)
- HTML CSS Support
- Auto Rename Tag(自动重命名对应标签)
基础知识
HTMl(超文本语言) 结构为
<!--文档源信息--><!DOCTYPE html><html lang="en"><head> <!--文档源信息--> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOCMENT</title> <!--链接外部样式以及脚本--> <link rel="stylesheet" type= "text/css" href= "style.css"> <script src= "script.js"></script></head><body> <!--页面内容--></body><!--其他内容--></html>常用的标签
| 标签名 | 含义 | 标签名 | 含义 | 标签名 | 含义 |
|---|---|---|---|---|---|
h1-h6 | 标题标签 | table | 表格根元素 | from | 表单标签 |
p | 段落标签 | tr | 行 | input | 输入标签 |
b(strong) | 字体加粗 | td | 列 | label | 标记标签 |
i | 斜体 | th | 表格标题 | ||
u | 下划线 | br | 换行 | ||
s | 删除线 | hr | 水平分割线 | ||
ul | 无序列表 | img | 图片标签 | ||
li | 列表元素 | div | 块级标签 | ||
ol | 有序列表 | span | 行内元素标签 |
使用案例
<!--border为table的属性,添加厚度为1的边框--> <table border=1> <tr> <th>列标题 1</th> <th>列标题 2</th> <th>列标题 3</th> </tr> <tr> <td>元素 1</td> <td>元素 2</td> <td>元素 3</td> </tr> </table>HTML属性
用于定义元素的行为以及外观以及其他元素的关系
语法:
<开始标签 属性名="属性值">每个HTML元素可以具有不同的属性,属性名不区分大小写,但属性值大小写敏感.
常见属性值
以常见的a标签举例
<a herf="链接地址" target="属性值">以上内容会创建一个可点击的文本,点击后跳转herf值中的链接地址,target有以下四种属性
| 属性 | 打开位置 |
|---|---|
| _self | 当前页面 |
| _blank | 新标签/窗口 |
| _parent | 上一页,没有则当前页 |
| _top | 最顶层窗口，跳出全部 iframe |
IMG标签
<img src=”文件地址“ alt=”图片替代文本“ width=”100“ height=”100“>文件地址如果图片和文件同级则直接输入文件名称如logo.png,也可以填入图片的链接地址,alt为当图片无法加载时显示的文本,后面两个属性则为设置图片的宽度和高度(像素).
HTML区块
块元素(block)
块元素用于组织布局页面主要结构和内容,将内容分隔成逻辑块,块元素通常会从新行开始,并占据整行的宽度,因此它们会在内容上呈现一块独立的内容块,可以包含其他块元素和行内元素.
行内元素(inline)
用于添加文本样式和文本中的一部分应用样式,可与在文本中插入小的元素,超链文本,强调文本等.
行内元素通知在同一行呈现不会独占一行,只占据内容所需的宽度而不是整行的宽度,不能包含其他行内元素以及块元素.
标签使用
div标签
简介: 这是一个块级标签通常用于创建一个可以包含其他html元素的容器块,没其他语义,用创建页面布局结构
下面是创建一个导航栏和内容区域
<body><!--导航栏区域--> <div class="nav"> <a href="#">链接 1</a> <a href="#">链接 1</a> <a href="#">链接 1</a> <a href="#">链接 1</a> </div><!--内容区域--> <div class="content"> <h1>文章标题</h1> <p>文章标题</p> <p>文章标题</p> <p>文章标题</p> <p>文章标题</p> </div></body>可以使用.类名快速创建含有类属性的标签
span标签
简介<相当于没有特殊元素的a标签或者img标签>,作用是让文本使用css样式以及js行为,不会独占一行,只占用内容所需宽度,所以这是一个内联样式化文本的一个标签.
使用案例:
<span>点击此处跳转<a href="#">点击跳转</a></span>HTML表单
先看代码:
<body> <form action=”#“> <label for="account">账号:</label> <input type="text" id="account" placeholder="请输入账号"><br> <label for="pwd">密码:</label> <input type="password" id="pwd" placeholder="请输入密码"><br> <label>性别:</label> <input type="radio" name="gender">男 <input type="radio" name="gender">女 <input type="radio" name="gender">沃尔玛购物袋<br>
<label>爱好</label> <input type="checkbox" name="hobby">唱歌 <input type="checkbox" name="hobby">跳舞 <input type="checkbox" name="hobby">RAP <input type="checkbox" name="hobby">篮球<br>
<input type="submit" value="登录"> </form></body>代码解析:
表单类似于表格，最常见用于登录。这里使用 label 标签来绑定 input 标签，绑定方式为 label 的 for 属性填写 input 标签的 id。 正常来说像账号这种可以明文显示，如果是密码的话可以将 input 标签的 type 属性的值改为 password，就可以切换密码密文显示。 其次是 placeholder 属性，通常用于提示，如：在输入框内半透明显示请输入账号/密码等。 如果我们添加 value="默认值"，则输入框会有默认填充的内容。 - type="radio"：表示这是一个单选 - type="checkbox"：表示多选 - type="submit"：通常用作登录提交按钮，使用 value="默认值" 可更改提交按钮的内容 搭配 form 标签中的 action 以及后端提供的 api 来完成登录。
| 属性 | 作用说明 |
|---|---|
| label for | 和 input 的 id 绑定，点击文字可以选中输入框 |
| type=“text” | 明文文本输入（账号） |
| type=“password” | 密码密文输入 |
| placeholder | 输入框灰色提示文字 |
| value | 输入框 / 按钮默认值 |
| type=“radio” | 单选框 |
| type=“checkbox” | 多选框 |
| type=“submit” | 表单提交按钮 |
| form action | 指定表单提交的后端 API 地址 |
form标签action的属性值为url类型,需要后端提供api
结语
以上为html部分的学习笔记,如果有错误内容请及时评论区留言,本人会第一时间修正.
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或打赏支持！