HTML
文章目录
Web标准
为什么会有Web标准
Web标准是什么
Web标准的构成
标签
文本类
标题标签、段落标签、换行标签、文本格式化标签
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
............
<p>段落标签</p>
换行标签<br />
文本格式化标签
加粗字体<strong></strong>
倾斜<em></em>
删除线<del></del>
下划线<ins></ins>
div标签 span标签
div定义HTML文档中的一个分隔区,类似于盒子,后面会和CSS结合使用
div和span标签是没有语义,是我们网页布局最主要的2个盒子
图像标签
<img src=“图片路径” 一些属性 />
图像标签包括的属性有 :
属性 | 属性值 | 描述 |
---|---|---|
src | URL | 图像路径 |
alt | 文本 | 图像不能显示时替换的文本 |
title | 文本 | 鼠标悬停显示的内容 |
width height | 像素 | 图像的宽度以及高度 |
border | 数字 | 图像边框的宽度 |
<img src="images/code.png"/>
链接标签
<h3><strong>超链接标签</strong></h3><br />
1.外部链接
target是打开窗口的方式<br /> 默认值是_self 表示在当前页面打开<br />
_blank是新打开一个网页打开窗口<br />
<a href="https://www.bilibili.com" target="_blank">B站</a>
<br />
2.内部链接:网站内部页面之间的相互链接(就是html之间的联系)<br />
<a href="sportnew.html">体育知迅</a>
<br />
3.空链接: # <br />
<a href="#">公司地址</a>
<br />
4.下载链接 :地址链接的是文件.exe或者是zip等压缩包形式
<br />
<a href="img.zip"downlode></a>
5.网页元素的链接
<br />
<a href="http://www.bilibili.com"><img src="code.png"/></a>
<h4><strong>锚点链接</strong></h4>
<a href="AnchorPoint.html">锚点链接的使用</a>
<h5>总结一下</h5>
超链接<a href="①网站②内部的html③压缩文件" targe="_self">名称\图片\音频等等</a>
锚点标签
<h2 id="menu">
菜单:
</h2>
<a href="#kongjian">
你好的空间
</a>
内容.......
<h3 id="kongjian">
你好的空间
</h3>
内容.........
<a href="#menu">返回菜单</a>
表格
表头单元格标签
<table>
<tr>
<td>单元格内的文字</ td>
....
</ tr>
<tr>
<td>单元格内的文字</ td>
....
</ tr>
<tr>
<td>单元格内的文字</ td>
....
</ tr>
</ table>
合并单元格表
特殊情况下,可以把多个单元格合拼为一个单元格,比如简历表
跨列合并 : colspan
跨行合并 : rowspan
<table align="center" border="1" cellspacing="0" cellpadding="0" width="500" height="200">
<!-- 定义表格头部 -->
<thead>
</thead>
<!-- 定义表格的主体 -->
<tbody>
<!-- 下面是跨列合并 -->
<tr>
<td></td><td></td><td></td><td colspan="2"></td>
</tr>
<!-- 下面是跨行合拼 -->
<tr>
<td rowspan="2"></td><td></td><td></td><td></td><td></td></tr>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
</tbody>
</table>
小案例
<table align="center" border="1" cellspacing="0" cellpadding="0" width="500">
<!-- align是表示表格的位置,border是表示有没有边框,cellspacing是表示单元格之间的距离
cellpadding是表示一个单元格中的内容和边框的距离 width是表示表格的宽度 -->
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七天</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="code.png "width="10"></td>
<td>100</td>
<td>123</td>
<td><a href="http://www.bilibili.com" target="_blank">贴吧</a>
<a href="http://www.bilibili.com" target="_blank">百度</a>
<a href="http://www.bilibili.com" target="_blank">CCTV</a>
</td>
</tr>
</table>
列表
无序列表
有序列表
自定义列表
表单
综合案例(登录页面)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合案例2之简单的注册页面</title>
</head>
<body>
<!--
思路:
首先是用一个无框表格进行布局,然后就是填充内容
最后加上一个超链接和列表
-->
<h2>青春不常在,抓住谈恋爱</h2>
<!-- 下面表格布局 两列十行-->
<table width="500">
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" id="man">
<label for="man"><img src="code.png" width="4" height="12"> 男</label>
<input type="radio" name="sex" id="girl">
<label for="girl"><img src="code.png" width="4" height="12"> 女</label>
</td></tr>
<tr>
<td>生日</td>
<td>
<!-- 怎么实现下拉菜单前就有提示 尚未解决 -->
<select>
<option>--请输入年--</option>
<option>2002</option>
<option>2003</option>
</select>
<select>
<option>--请输入月--</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>--请输入日--</option>
<option>1</option>
<option>22</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td>
<input type="text" value="北京思密达" maxlength="100">
</td>
</tr>
<tr>
<td>婚姻状况</td>
<td><input type="radio" name="married" id="wei">
<label for="wei">未婚</label><input type="radio" name="married" id="yi"><label for="yi">已婚</label><input type="radio" name="married" id="li"><label for="li">离婚</label></td></tr>
<tr>
<td>学历</td>
<td>
<input type="text" value="幼儿园">
</td>
</tr>
<tr>
<td>喜欢类型</td>
<td>
<input type="checkbox" id="1"><label for="1">可爱的</label>
<input type="checkbox" id="2"><label for="2">小鲜的</label>
<input type="checkbox" id="3"><label for="3">老辣的</label>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td><textarea>自我介绍</textarea></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="免费注册"></td></tr>
<tr>
<td></td><td><input type="checkbox" id="agree"><label for="agree">我同意注册条款和会员加入标准</label></td></tr>
<tr>
<td></td>
<td><a href="https://www.bilibili.com" target="_blank">我是会员,我是果冻桑,立即登录</a></td></tr>
<tr>
<td></td>
<td><h2>我承诺</h2>
<ul>
<li>年满18岁,单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
<li>我喜欢你重庆妹</li>
</ul>
</td>
</tr>
</table>
<h2>我承诺</h2>
<ul>
<li>年满18岁,单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
<li>我喜欢你重庆妹</li>
</ul>
</body>
</html>
的态度
- 真诚寻找另一半
- 我喜欢你重庆妹
```<h2>我承诺</h2> <ul> <li>年满18岁,单身</li> <li>抱着严肃的态度</li> <li>真诚寻找另一半</li> <li>我喜欢你重庆妹</li> </ul>