HTML笔记
2021-09-09 本文已影响0人
键盘已附魔
网页的基本组成
文字、图片、视频、音频、链接
什么是HTML
超文本标记语言
网页除了文字还有图片链接视频音频，所以叫超文本
常用的浏览器
IE、谷歌、火狐、苹果、
Web标准的三大组成部分
HTML、内容
css、表现
js、动作
标签的书写规范
成对出现,带尖括号
<html></html>
<body></body>
<br />
写出HTML的骨架标签
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
安装vscode
安装插件
插件安装按钮，最下面这个
捕获.PNG
在搜索框搜索你想要的插件，安装后重启软件就可以了
- Chinese 中文包
- open in browser 选择浏览器打开
- auto rename tag 自动重命名标签
- css peek 追踪至样式
- js-css-html formatter 保存自动格式化代码
三行重要的代码是什么意思
捕获.PNG
我写完之后运行什么都不出现因为要先保存在运行
常用标签
标题标签
捕获.PNG
捕获.PNG
段落和换行标签
段落标签，<p></p>段落和段落中有空行
换行标签，<br />与本段其他没有空行
文本格式化标签
<strong>加粗 </strong> <b>加粗</b>
<em>倾斜 </em> <i>倾斜</i>
<del>删除</del> <s>删除</s>
<ins>下划线</ins> <u>下划线</u>
<div>独占一行大盒子</div>
<span>123小盒子</span>
图像标签和路径
<h3>图像标签的使用</h3><br/>
<img src="img.jpg" />
<h3>alt是图片无法显示时显示文字</h3><br/>
<img src="img1.jpg" alt="我是个图片" />
<h3>title提示文本</h3><br/>
<img src="img.jpg" alt="我是个图片" title="点我点我点我" />
<h3>width,height宽和高border设置边框</h3><br/>
<img src="img.jpg" alt="我是个图片" title="点我点我点我" width="200" border="15" />
属性写在后面，顺序可以不变，保留空格
- 目录文件夹：项目最大的文件夹
- 根目录：打开文件夹的第一个目录
<h4>图片在同一级目录</h4>
<img src="img.jpg">
<h4>图片在下一级目录</h4>
<img src="imges/img.jpg">
图片在上一级目录
<img src="../img.jpg">
绝对路径
<img src="../img.jpg">
<img src="G:\web\img.jpg">电脑上图片位置
<img src="https://upload.jianshu.io/admin_banners/web_images/5030/a259100d672eebc1c87d2aca136e748630f6d480.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540">网络上图片地址
超链接
<h4>1.外部链接</h4>
<a href="http://www.baidu.com" target="_self">百度一下</a>在当前窗口打开
<a href="http://www.baidu.com" target="_blank">百度一下</a>在新窗口打开
<h4>内部链接</h4>
<a href="段落.html">段落页面</a>
<h4>空链接</h4>
<a href="#">空链接</a>
<h4>下载链接</h4>
<a href="img.rar">下载链接</a>
<h4>网页元素链接</h4>
<a href="段落.html"><img src="img.jpg"></a>
<h4>锚点链接</h4>
<a href="#就是这里">跳转到下面</a>
<h4 id="就是这里">就是这里</h4>
表格标签
<table>
<!-- 表格标签 -->
<tr>
<!-- 行和表头单元格，居中加粗 -->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>周杰伦</td>
<!--单元格-->
<td>男</td>
<!--单元格-->
<td>40</td>
<!--单元格-->
</tr>
</table>
表格属性
<table align="center" border="2" cellpadding="20" cellspacing="0" width="300" height="300"></table>
表格居中,边框,文字和边框距离，边框之间的空白为零,宽度，高度
表格结构标签
<thead></thead>
<tbody></tbody>
合并单元格
<table cellspacing="0" width=“500” height="250" border="1">
<tr>
<td>1</td>
<td colspan="2">1</td><!--跨行合并-->
</tr>
<tr>
<td rowspan="2">1</td><!--跨列合并-->
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
</table>
无序列表
<body>
<ul>
<!--无序列表，ul中只能放li，li中可以放任何标签，-->
<li>中国</li>
<li>美国</li>
<li>俄罗斯</li>
</ul>
<ol>
<!--有序列表，ol中只能放li，li中可以放任何标签-->
<li>中国</li>
<li>美国</li>
<li>俄罗斯</li>
</ol>
<dl>
<!--自定义列表，只能包含dt,dd.dt和dd里面可以包含任何标签-->
<dt>小学</dt>
<dd>一年级</dd>
<dd>二年级</dd>
<dd>三年级</dd>
</dl>
</body>
#### 表单标签form
<body>
<form action="kehu.php" method="GET" name="name">
<!--文本框,元素名称，元素值（后台用）-->
用户名: <input type="text" name="username" value="请输入用户名" maxlength="8"> <br>
<!--密码框-->
密码: <input type="password" name="password"> <br>
<!--单选框,起一样的名字才能单选-->
<label id="sex">男</label> <br> 性别：男
<input type="radio" name="sex" id="sex" value="nan" checked>女<input type="radio" name="sex" value="nv"> <br>
<!--多选框,chacted可以默认选中-->
爱好：吃饭<input type="checkbox" name="hobby" value="chifan" checked> 睡觉<input type="checkbox" name="hobby" value="shuijiao"> 打游戏<input type="checkbox" name="hobby" value="dayouxi"> <br>
<!--提交表单数据给后台-->
<input type="submit" value="提交"> <br>
<!--还原表单元素默认值-->
<input type="reset" value="清空"> <br>
<!--普通a按钮-->
<input type="button" value="获取验证码"> <br>
<!--上传文件用-->
<input type="file"> <br>
</form>
</body>
表单标签，下拉列表，文本域
<body>
<form action="">
<!-- 下拉列表 -->
籍贯： <select>
<option>山东</option>
<option selected=selected >河南</option>
<!-- 默认选中 -->
<option>广东</option>
<option>黑龙江</option>
</select>
<!-- 文本域 -->
评论：
<textarea role="5" rows="6">
发表你的看法吧
</textarea>
</form>
</body>
定位
定位=定位模式+边偏移
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位
