前端学习 html学习笔记
Posted 猛男Banana君
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端学习 html学习笔记相关的知识，希望对你有一定的参考价值。
这段时间在学前端，跟着一个up主的视频边学边敲，整理了一下笔记。
感觉学前端难的不是知识的深度，而是背单词，像在学英语一样……
废话不说，切入正题。
一、html基本元素
<!DOCTYPE html> <!--每个html文档都要以这个为开头-->
<html lang=en"> <!--文档中html部分的开始-->
<head> <!--提供有关文档内容和标注信息的-->
<meta charset="UTF-8"> <!--mata元数据（编码）提供给浏览器多次的功能访问-->
<title>Title</title> <!--title很重要，有head就要有title-->
</head>
<body>
<a href="" target="_blank">徐大虾nb</a> <!--blank是创建一个新的标签页，如果targrt后面没有blank等类型，默认为self-->
<h1>我的第一个标题</h1> <!--标题-->
<p>我的第一个段落</p> <!--段落-->
<b>徐大虾nb</b> <!--这两个都是粗体-->
<strong>徐大虾nb</strong>
<i>徐大虾nb</i> <!--这两个都是斜体-->
<em>徐大虾nb</em>
<u>徐大虾nb</u> <!--下划线，不常用-->
<s>徐大虾nb</s> <!--这两个都是删除线-->
<del>徐大虾nb</del>
这个是<sup>上标</sup> <!--上标-->
这个是<sub>下标</sub> <!--下标-->
<br/> <!--换行-->
<hr/> <!--创建水平线-->
</body>
</html> <!--文档中html部分的结束-->
二、html列表元素
<!--<ol>：有序列表-->
<!--属性：type(设置样式)、reversed(降序)-->
<!--<ul>：无序列表-->
<!--<li>：表示列表中的项 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表元素</title>
</head>
<body>
<ol>
<li>a</li>
<li>a</li>
<li>a</li>
</ol>
<ol reversed> <!--降序-->
<li>a</li>
<li>a</li>
<li>a</li>
</ol>
<ol type="a"> <!--字母升序（a. b. c. ...）-->
<li>a</li>
<li>a</li>
<li>a</li>
</ol>
<ol type="I"> <!--罗马数字升序-->
<li>a</li>
<li>a</li>
<li>a</li>
</ol>
<ol>
<li>题目</li>
<ol type="a"> <!--套娃，类似开目录-->
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ol>
</ol>
<ul> <!--无序列表-->
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
</body>
</html>
三、html表单元素
<!--表单是HTML中获取用户输入的手段-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<input type="text"> <!--创建一个单行文本框（如果没有输入type，默认type=text类型-->
<br/><br/> <!--换行-->
<input type="text" value="梅乃丹nb"> <!--赋值-->
<br/><br/>
<input type="text" placeholder="徐大虾nb"> <!--占位，文本是虚的-->
<br/><br/>
<input type="text" placeholder="徐大虾nb" maxlength="9"> <!--最大能输入的字符，限制输入-->
<br/><br/>
<input type="text" placeholder="徐大虾nb" size="50"> <!--拓宽单行文本框-->
<br/><br/>
<input type="text" value="徐大虾nb" readonly> <!--只读模式，不能对框内文本进行修改-->
<br/><br/>
<input type="password" placeholder="请输入密码"> <!--密码模式，文本以点的形式展现-->
<br/><br/>
<textarea>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</textarea> <!--多行文本框-->
<br/><br/>
<textarea rows="20">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</textarea> <!--限制文本框的行距，不过还是没有完全限制，可以调整-->
<br/><br/>
</form>
<form>
<input type="button" value="按钮"> <!--跟js合作并且作为绑定事件的-->
<button>按钮</button> <!--与上面的效果不太一样，但这个适用范围更广，用得比较多-->
<input type="submit" value="提交"> <!--提交表单至服务器-->
<br/><br/>
<input type="range" min="-100" max="100"> <!--滑杆，可设置最大最小值，不过chrome显示不出来-->
<br/><br/>
<input type="range" min="-100" max="100" step="20" value="-100"> <!--step将滑杆分了步长，后面的value是起始位置-->
<br/><br/>
<input type="number" min="-100" max="100" value="0"> <!--手动输入数字，可调节-->
<br/><br/>
<input type="checkbox">选择 <!--可选择可取消（多选）-->
<input type="radio">选择 <!-- 选择后不能取消（单选）-->
<br/><br/>
<input type="radio" name="a" checked>选择 <!--加了check就默认选了这个-->
<input type="radio" name="a">选择
<input type="radio" name="a">选择
<br/><br/>
你最喜欢的水果是啥？
<select> <!--选择框-->
<option>苹果</option>
<option>香蕉</option>
<option>西瓜</option>
</select>
<input type="text" list="datalist"> <!--和上面的对比，这个是带了文本框的-->
<datalist id="datalist">
<option>苹果</option>
<option>香蕉</option>
<option>西瓜</option>
</datalist>
<br/><br/>
</form>
<form>
<input type="email">
<input type="tel">
<input type="url">
<input type="hidden"> <!--生成隐藏的数据项，在浏览器中没有任何效果，但在用户提交表单时会发送出去-->
<input type="date"> <!--获取日期-->
<input type="color"> <!--获取颜色-->
<input type="search"> <!--跟普通文本框一样，只是用来规范是搜索框吧-->
<br/><br/>
<input type="image" src=".idea/mnd.jpg"> <!--导入图片（将图片放在html同个文件夹中）-->
<input type="image" src=".idea/mnd.jpg" width="80"> <!--width控制图片尺寸-->
<br/><br/>
<input type="file"> <!--导入文件-->
<input type="file" multiple> <!--multiple是可以导入多个文件-->
</form>
</body>
</html>
四、html表格元素
<!--表格三大元素：<title> <tr> <td>-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建表格</title>
</head>
<body>
<table border="1px"> <!--创建表格（边框），不建议使用，太捞了-->
<thead> <!--表头-->
<tr>
<th>姓名</th> <!--th是让该行文字加粗且居中，一般是表格头使用的-->
<th>学号</th>
<th>年级</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>001</td>
<td>大一</td>
</tr>
<tr>
<td>小红</td>
<td>0000002</td>
<td>大三</td>
</tr>
<tr>
<td>小张</td>
<td>0003</td>
<td>大二</td>
</tr>
</tbody>
<tfoot> <!--表脚-->
<tr>
<td>姓名</td>
<td>学号</td>
<td>年级</td>
</tr>
</tfoot>
</table>
<br>
<table border="1px">
<tr>
<th rowspan="2">aaaa</th> <!--合并行单元格-->
<th>aaaa</th>
<th>aaaa</th>
<th>aaaa</th>
</tr>
<tr>以上是关于前端学习 html学习笔记的主要内容，如果未能解决你的问题，请参考以下文章
[vscode]--HTML代码片段（基础版，reactvuejquery）
附全部代码+图片使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记