10_HTML
HTML
HTML基本结构
<html>
<head>
<thtle> </thtle>
</head>
<body>
</body>
</html>
网页基本信息
注释
快捷键 ctrl + /
<!-- -->
DOCTYPE
告诉浏览器，我们要使用规范(默认html)
基本结构
head标签代表网页头部
title标签代表网页标题
body标签代表网页主体
meta 描述性标签，描述网站的一些信息，一般用来做SEO
网页基本标签
标题标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
段落标签
<p>1 2 3</p>
<p>4 5 6</p>
换行标签
123<br>
456
换行标签相对段落标签紧凑
水平线标签
<hr>
粗体 斜体
<strong>粗体</strong>
<em>斜体</em>
特殊符号
特殊符号以&开头以分号结尾
空 格
空 格
大于号
>
小于号
<
版权符号
©
图像标签
src 图片地址；alt 图像的替代文字；title 鼠标悬停提示文字；width 图像宽度；height 图像高度
<img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="200" height="200">
链接标签
<a href="https://www.baidu.com" target="目标窗口位置">链接文本或图像</a>
<a href="https://www.baidu.com"> <img src="../resources/image/1.jpg" alt="图片名称" title="悬停文字" width="200" height="200">
</a>
target 表示窗口在哪里打开（_blank 在新网页打开 _self 在自己的网页打开）
锚链接
使用id作为标记
<a id="top"></a>
<a href="#top">回到顶部</a>
功能性链接
<a href="mailto:lizhenning2001@163.com">点击联系</a>
列表
有序列表
<ol>
<li>java</li>
<li>python</li>
<li>go</li>
</ol>
无序列表
<ul>
<li>java</li>
<li>python</li>
<li>go</li>
</ul>
自定义列表
<dl>
<dt>语言</dt>
<dd>java</dd>
<dd>go</dd>
<dd>c</dd>
<dt>学科</dt>
<dd>数据结构</dd>
<dd>计算机网络</dd>
</dl>
表格
tr 行 td 列
<table border="1px">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td rowspan="2">2-3</td>
</tr>
<tr >
<td colspan="2">123</td>
<!-- rowspan 跨行 colspan 跨列 -->
</tr>
</table>
视频和音频
src：资源路径
controls：控制条
outplay：自动播放
<video src="../resources/video/123.mp4" controls autoplay></video>
<audio src="../resources/video/12.mp3" controls ></audio>
页面结构
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主部</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
article 独立的文章内容
aside 相关内容或应用（常用于侧边栏）
nav 导航类辅助内容
iframe内联框架
<iframe src="https://www.bilibili.com" frameborder="0"></iframe>
<iframe src="" name="hello" width="800px" height="800px"></iframe>
<a href="我的第一个网页.html" target="hello">点击跳转</a>
表单
action：表单提交的位置，可以是一个网站，也可以是一个请求处理地址
method：post，get 提交方式
get方式可以在url中看到我们提交的信息，不安全，高校
post方式比较安全，可传输大文件
文本输入框：input type="text"
<form action="我的第一个网页.html" method="get">
<p>名字：<input type="text" name="username" value="初始" maxlength="8" size="30"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>性别：
<!-- value：单选框的值 radio：单选框标签 name相同的选项只能选一个 -->
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="sport" name="hobby" checked>运动
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戏
</p>
<!-- button 普通按钮 image 图像按钮 submit 提交按钮 reset 重置按钮 -->
<p>按钮：
<input type="button" name="btnl" value="点击变化">
<input type="image" src="../resources/image/1.jpg" width="500px" height="500px">
</p>
<p>下拉框：
<select name="列表名称">
<option value="China">中国</option>
<option value="US" selected>美国</option>
<option value="Japan">日本</option>
<option value="els">俄罗斯</option>
</select>
</p>
<!-- 文本域-->
<p>反馈：
<textarea name="textarea" cols="10" rows="50">文本内容</textarea>
</p>
<!-- 文件域-->
<p>
<input type="file" name="files">