HTML基础知识
跟着pink老师上课做的笔记，小标题一般对应老师视频的标题。
HTML基础（一）
一、HTML骨架
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
</body>
</html>
创建新的文件之后 ，输入！， 选择第一行， 即可获得骨架。
其中
- en表示英文网页，zh-CN表示中文网页
-
UTF-8是目前最常用的字符集编码方式，charset="UTF-8"这句一定要写，不然会造成乱码的情况
二、常用标签
2.1 标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>一共六级</h3>
2.2 段落标签
<p>这是段落标签，每段之间空隙较大</p>
2.3 强制换行标签
<br />这是强制换行标签，标签后面的内容强制换行，中间没有空隙
2.4 文字标签
我是<strong>加粗</strong>的文字
我是<b>加粗</b>的文字
我是<em>倾斜</em>的文字
我是<i>倾斜</i>的文字
我是<del>删除线</del>
我是<s>删除线</s>
我是<ins>下划线</ins>
我是<u>下划线</u>
三、盒子标签
<div>div标签自己占一行</div>
<div>div标签自己占一行</div>
<span>百度</span>
<span>新浪</span>
<span>搜狗</span>
-
div标签自己占一行
-
span标签和别的span标签一起占一行
四、图像标签
<h4>图像标签的使用：</h4>
<img src="图像标签.jpg"/>
<h4>alt：图像不能显示时的替换文本</h4>
<img src="图像标签1.jpg" alt="这是替换文本"/>
<h4>title：鼠标悬停时显示的文本</h4>
<img src="图像标签.jpg" title="这是鼠标悬停时显示的文本"/>
<h4>width：给图片设定宽度</h4>
<img src="图像标签.jpg" alt="这是替换文本" title="这是鼠标悬停时显示的文本" width="500"/>
<h4>height：给图片设定高度</h4>
<img src="图像标签.jpg" alt="这是替换文本" title="这是鼠标悬停时显示的文本" height="100"/>
<h4>border：给图片设定边框</h4>
<img src="图像标签.jpg" alt="这是替换文本" title="这是鼠标悬停时显示的文本" width="500" border="10"/>
- alt：图像不能显示时的替换文本
- title：鼠标悬停时显示的文本
- width：给图片设定宽度
- height：给图片设定高度
- border：给图片设定边框
五、路径
5.1 相对路径
<h4>这是同一级的图像</h4>
<img src="图像标签.jpg" />
<h4>这是下一级的图像</h4>
<img src="images/下一级.jpg" />
<h4>这是上一级图像</h4>
<img src="../图像标签.jpg" />
5.2 绝对路径
<h4>比如网上的一张图片的绝对路径</h4>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
六、超链接标签（重点）
6.1 外部链接
<h3>1.外部链接</h3>
<h4>默认为在当前页面打开</h4>
点这里可以打开<a href="http://www.baidu.com">百度</a>
<h4>_self为在当前页面打开</h4>
点这里可以打开<a href="http://www.baidu.com" target="_self">百度</a>
<h4>_blank为在新的页面打开</h4>
点这里可以打开<a href="http://www.baidu.com" target="_blank">百度</a>
6.2 内部链接
<h3>2.内部链接</h3>
<h4>内部链接是指网站自己的网页之间的互联</h4>
<a href="01-HTML 第一个网页.html" target="_blank">第一个网页</a>
<a href="html/05-测试上一级图像.html" target="_blank">text</a>
6.3 空链接#
<h3>3.空链接#</h3>
<h4>空链接是还没搭建好的页面</h4>
<a href="#" target="_blank">空空如也</a>
6.4 下载链接
<h3>4.下载链接</h3>
<h4>下载链接一般格式是.exe或.zip</h4>
<a href="图像标签.zip" target="_blank">下载图片</a>
<a href="fcbo -修改.exe" target="_blank">下载exe文件</a>
6.5 网页元素的链接
<h3>5.网页元素的链接</h3>
<h4>网页元素的链接是指点击图片视频等跳转到新的页面</h4>
<a href="https://music.163.com/#/song?id=1407551413" target="_blank"><img src="图像标签.jpg"/></a>
七、锚点链接
<h4>点击可跳转到简介</h4>
<a href="#jianjie">简介</a><br />
<h4>对应的地方要写id</h4>
<h4 id="jianjie">简介</h4>
八、注释及特殊字符
<h4>1.注释</h4>
<h4>注释用ctro+/表示</h4>
<!-- 这是注释 -->
<h3>2.特殊字符</h3>
空 格<br />
大于号><br />
小于号<<br />
HTML基础（二）
一、表格
1.1 表格基本语法
<table align="center" border="1" cellpadding="2" cellspacing="0" width="500" height="200">
<thead>
<tr> <th>姓名</th> <th>性别</th> <th>学号</th> </tr>
</thead>
<tbody>
<tr> <td>赵</td> <td>女</td> <td>30003</td> </tr>
<tr> <td>张</td> <td>女</td> <td>30002</td> </tr>
<tr> <td>王</td> <td>女</td> <td>30001</td> </tr>
<tr> <td>李</td> <td>女</td> <td>20065</td> </tr>
</tbody>
</table>
- 表格是用来展示数据的
- 表头单元格会居中加粗表示
- table表示一个表格，tr表示一行，td表示一个单元格
- thead表示表格的头部 tbody表示表格的身体
1.2 合并单元格
<table align="center" border="1" cellpadding="2" cellspacing="0" width="500" height="200">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
- 合并的步骤：
1.确定是跨行（rowspan）还是跨列（colspan）
2.合并几个单元格就写rowspan=几（写在合并的最上面的单元格上），colspan=几（写在合并的最左面的单元格上）
3.删除被合并的单元格
二、列表
- 列表是为了排版布局的
2.1 无序列表 (重点)
<ul>
<li>小说</li>
<li>电视剧</li>
<li>电影</li>
</ul>
-
ul里面只能写li，不能写其他的东西
-
li里面可以写各种形式
2.2 有序列表（了解）
<ol>
<li>123</li>
<li>456</li>
<li>789</li>
</ol>
- 有序列表里面会自动补上排序
2.3 自定义列表（重点）
<dl>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
-
自定义列表一般是一个头儿带着几个弟弟
-
同上,dl里面只能有dt和dd
三、表单
- 表单主要是用于收集客户信息
- 表单分为了三部分,表单域,表单控件,提示信息
- 表单域就是form标签
格式：
<h4>表单域</h4>
<form action="demo.php" method="POST" name="name1">
</form>
3.1 input输入表单元素
- input是输入标签,必需元素为type
- name定义每个选框的名字,单选按钮和复选框要有相同的name
- value主要是给后台工作人员看的,按理说name和value是每个表单元素必有的
- 单选按钮与复选框可以拥有checked属性,写了这个属性在打开页面的时候就默认选择了这个属性
- label标签一般和input标签一起使用,写了lable标签就会使光标集中在选项上,而不仅仅是填写框那一小小的地方
<form action="xxx.php" method="get">
<label for="xingming">姓名:</label><input type="text" name="name" value="请输入姓名" id="xingming"> <br>
密码:<input type="password" name="password"><br>
性别:
<label for="nan">男</label><input type="radio" name="sex" value="男" id="nan">
<label for="nv">女</label><input type="radio" name="sex" value="女" checked="checked" id="nv"><br>
<!-- radio为单选框,可以实现多选一 -->
爱好:
吃饭<input type="checkbox" name="hobby" value="吃饭">
睡觉<input type="checkbox" name="hobby" value="睡觉" checked="checked">
看小说<input type="checkbox" name="hobby" value="看小说"><br>
<!-- checkbox为复选框,可以实现多选 -->
手机号:<input type="number">
<input type="button" value="获取手机验证码"> <br>
<!-- 普通按钮button,后期结合js搭配适应 -->
上传头像:<input type="file"><br>
<!-- 文件域file,上传文件时使用 -->
<input type="reset" value="重新填写"><br>
<!-- reset表示重置 -->
<input type="submit" value="立即注册"><br>
<!-- submit表示提交到后台服务器 -->
</form>
3.2 select下拉表单元素
<form>
籍贯:
<select>
<option>北极</option>
<option>南极</option>
<option selected="selected">火星</option>
<option>月球</option>
</select>
</form>
- select 里面至少要有一对option
- selected=selected表示默认选项
3.3 textarea文本域表单元素
<form>
留言反馈:
<textarea>
写下你的留言吧~
</textarea>
</form>
- text area元素一般用于用户大量书写的情况,用于需要多行书写的情况
1971
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
