最近开始学前端技术,陆续更新一些html、css、js的笔记,供同样为初学者的小伙伴入门。
推荐使用vscode并安装插件,教程B站有很多,可以自己搜一下。
新建.html文档,输入英文!然后按回车,即可看到自动生成的最基本的框架,head是头部,内容暂时不用管,只要知道title里是网站上方名字,在body里使用标记语言编程即可。以下是基础知识示例,可以自己运行一下,看一下效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html学习</title>
</head>
<body>
<!-- 标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 段落标签 -->
<p>这是一个段落</p>
<!-- 换行标签 -->
<br>
<!-- 分割线标签 -->
<hr>
<!-- 文本格式化标签 -->
<b>加粗</b> <strong>加粗</strong>
<u>下划线</u> <ins>下划线</ins>
<i>倾斜</i> <em>倾斜</em>
<s>删除线</s> <del>删除线</del>
<hr>
<!-- 图片标签 -->
<img src="#" alt="替换文本,图像显示失败时显示" title="提示文本,鼠标放到图片上,显示的提示文字">
<hr>
<!-- 音频标签 -->
<audio src="#" controls autoplay loop>控件 自动播放 循环播放</audio>
<hr>
<!-- 视频标签 -->
<video src="#" controls autoplay muted loop>控件 静音状态下自动播放 循环播放</video>
<hr>
<!-- 路径 -->
同级./(可省略) 下级/ 上级../
Windows 环境中绝对路径为 \(反斜杠)
<hr>
<!-- 超链接标签 -->
<a href="#" target="">target:链接页面的打开方式,_self当前页面打开(默认值),_blank 新窗口打开</a>
<hr>
<!-- 列表标签 -->
<ul>
<li>无序列表列表项1</li>
<li>列表项2</li>
</ul>
<ol>
<li>有序列表列表项1</li>
<li>列表项2</li>
</ol>
<dl>
<dt>自定义列表名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
<hr>
<!-- 表格标签 -->
<table width="400px" height="200px" align="center" border="1" cellpadding="10" cellspacing="5">
<!-- 头部区域 -->
<thead>
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评价</th>
</tr>
</thead>
<!-- 主体区域 -->
<tbody>
<tr>
<td>张三</td>
<!-- 合并单元格 -->
<td rowspan="2">100</td>
<td>nice</td>
</tr>
<tr>
<td>李四</td>
<td>nice</td>
</tr>
</tbody>
<!-- 脚部区域 -->
<tfoot>
<tr>
<td>总结</td>
<!-- 合并单元格 -->
<td colspan="2">nice</td>
</tr>
</tfoot>
</table>
<hr>
<!-- 表单标签 -->
<form action="url地址" method="提交方式" name="表单域名称">
<!-- input系列标签 -->
姓名:<input type="text" placeholder="蔡徐坤">
<br>
密码:<input type="password" placeholder="jntm">
<br>
性别:<label><input type="radio" name="sex" checked>男</label>
<input type="radio" name="sex" id="women"><label for="women">女</label>
<br>
爱好:<input type="checkbox" checked>唱
<input type="checkbox">跳
<input type="checkbox">rap
<input type="checkbox">篮球
<br>
文件:<input type="file" multiple>
<br>
<input type="submit" value="点此提交">
<input type="reset">
<input type="button" value="按钮">
<br>
<!-- button按钮标签 -->
<button type="submit">提交</button>
<br>
<!-- select下拉菜单标签 -->
<select>
<option>选项1</option>
<option selected>选项2</option>
<option>选项3</option>
</select>
<br>
<!-- textarea文本域标签 -->
<textarea rows="3" cols="20">文本内容</textarea>
<br>
<!-- label标签 -->
年龄:<label><input type="radio" name="age">0-18</label>
<input type="radio" name="age" id="adult" checked><label for="adult">18+</label>
</form>
<hr>
<!-- 无语义布局标签 -->
<div>div区块</div>
<span>span跨度</span>
<!-- 有语义布局标签(移动端使用) -->
<header>header头部</header>
<nav>nav导航</nav>
<footer>footer脚部</footer>
<aside>aside侧栏</aside>
<section>section区块</section>
<article>article文章</article>
<hr>
<!-- 字符实体 -->
空格 空格
<!-- 内联框架 -->
<iframe src="https://www.bilibili.com/" width="70%" height="500px"></iframe>
</body>
</html>