HTML https://blog.csdn.net/weixin_45740811/article/details/122340256?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522172437567716800213037338%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=172437567716800213037338&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-122340256-null-null.142^v100^control&utm_term=%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E7%AC%94%E8%AE%B0&spm=1018.2226.3001.4187
1.基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签</title>
</head>
<body>
<!-- 换行标签br和p标签有区别，段落每行有一定间距 -->
<P> 粗体：<strong>hello</strong> </P>
<p> 斜体: <em>hello</em> </p>
<!-- 水平线标签 -->
<hr/>
<!-- 特殊符号 -->
空 格
>大于号 <br/>
<小于号 <br/>
©版权符号 <br/>
</body>
</html>img标签
<!-- src为路径，alt为没找到图片文字替代，title为鼠标悬停文字显示-->
<img src="../resources/image/01.jpg" alt="没找到图片" title="鼠标悬停显示文字">超链接
<!--target属性为哪个窗口打开默认是在当前窗口打开-->
<a href="https://www.baidu.com" target="_blank">百度</a>列表
<!-- 有序-->
<Ol>
<li>数学</li>
<li>语文</li>
<li>英语</li>
</Ol>
<br/>
<!-- 无序 -->
<ul>
<li>数学</li>
<li>语文</li>
<li>英语</li>
</ul>
<!-- 自定义列表 -->
<dl>
<dt>学科</dt>
<dd>数学</dd>
<dd>语文</dd>
<dd>英语</dd>
<dt>成绩</dt>
<dd>99</dd>
<dd>96</dd>
<dd>55</dd>
</dl>表格table
border:加边框
rowspan跨行
colspan跨列
<!-- 加边框 -->
<table border="1px">
<!-- rowspan跨行 -->
<tr>
<td colspan="3">学科及成绩</td>
</tr>
<tr>
<td>java</td>
<td>python</td>
<td>c++</td>
</tr>
<tr>
<td>99</td>
<td>92</td>
<td>80</td>
</tr>
</table>- 视频和音频视频：video
src为路径，autoplay为播放控制(进度条暂停下载...),autoplay自动播放打开网页后音频：audiosrc为路径，autoplay为播放控制(进度条暂停下载...),autoplay自动播放打开网页后
2.页面结构分析
高级标签
- iframe:内联标签
<iframe src=”https://www.baidu.com” width=”500px” height=”400px”> </iframe>
CSS
1.基础知识
css1.0
css2.0 div + css,html与css分离思想，网页变得简单
css2.1 浮动加定位
css3.0 圆角，阴影，动画，浏览器兼容
练习格式：
1.2简单示例
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>css测试</h1>
</body>
</html>