HTML基础教程
1.规范
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
网页标题title，body主体，一般在body中添加内容
2.标签
2.1普通标签
<!-- 标题系列 -->
<h1>标题</h1>
<!-- 分段 -->
<p></p>分段
<p>这是第一段</p>
<!-- 换行 -->
<br/>换行
<!-- 分行 -->
<hr/>分行符
<!-- 斜体 -->
<em>斜体</em>
<!-- 加粗 -->
<strong>加粗</strong>
<!-- 注释和特殊标签 -->
空格
> >
< <
" "
@ ©
<!-- 这是注释 -->
2.2图像标签
常见的图片格式：
jpg
png
bmp
gif
导入图片
工程中创建包，命名img，图片复制进去
<img src="img/a.jpg" alt="" title="" width="" hight="">
src为图片路径，alt为图片加载失败或加载中的显示文字，title为鼠标悬停提示，width为宽度，height为高度
2.3链接标签
常见的超链接
<a href="demo02.html" target="_blank">跳转</a>
href为跳转的链接，target默认为_self，即在本届面跳转，可以将其改成_blank，此时在新建页面跳转
锚链接
从A页a的位置，跳转到A页的b位置
<a name="跳转">跳转到别处</a>
<a href="#跳转">跳转页面</a>
从A页a的位置，跳转到B页的位置
b.html页的<div id="test"/>
a.html页的<a href="b.html#test"></a>
iframe元素会创建包含另外一个文档的内联框架（即行内框架）
<iframe src="demo02.html" width="500px" height="236px" name="newPage" /></iframe>
src路径显示另一个网页的内容
iframe显示点击切换不同链接
<p>
<a href="a.html" target="mainFrame">下面显示第一页</a>
<a href="b.html" target="mainFrame">下面显示第二页</a>
</p>
<iframe name="mainFrame" width="600xp" height="150xp" src="demo02.html">
点击切换显示
3.列表，表格，媒体元素
3.1列表
无序列表
<ul>
<li>杨幂</li>
<li>李沁</li>
<li>迪丽热巴</li>
<li>佟丽娅</li>
</ul>
有序列表
<ol>
<li>杨幂</li>
<li>李沁</li>
<li>迪丽热巴</li>
<li>佟丽娅</li>
</ol>
定义列表
<dl>
<dt>女星</dt>
<dd>杨幂</dd>
<dd>李沁</dd>
<dd>迪丽热巴</dd>
<dd>佟丽娅</dd>
</dl>
3.2表格
基本表格
<table>
<tr>
<th>杨幂</th> <th>李沁</th> <th>迪丽热巴</th> <th>佟丽娅</th>
</tr>
<tr>
<td>杨幂</td> <td>李沁</td> <td>迪丽热巴</td> <td>佟丽娅</td>
</tr>
<tr>
<td>杨幂</td> <td>李沁</td> <td>迪丽热巴</td> <td>佟丽娅</td>
</tr>
</table>
table作为主体，tr为行，几个tr就几行
th为列，是标题，几个th就几列，td为列，普通列，几个td就几列
跨列
td中属性colspan
跨行
td中属性rowspan
跨行跨列：
<table>
<tr>
<th>杨幂</th> <th>李沁</th> <th>迪丽热巴</th> <th>佟丽娅</th>
</tr>
<tr>
<td colspan="2">杨幂</td> <td>迪丽热巴</td> <td rowspan="2">佟丽娅</td>
</tr>
<tr>
<td>杨幂</td> <td>李沁</td> <td>迪丽热巴</td>
</tr>
</table>
跨行就删除下一行对应的列，跨列就删除本行的下一个列
3.3媒体元素
video播放视频
<video src="video/video.webm" controls="controls"></video>
<video src="video/video.webm"></video>
不同浏览器，不同版本可能播放不了视频，src是路径，controls为控制
<video controls="controls">
<source src="video/video.webm"></source>
<source src="video/video.mp4"></source>
</video>
这种形式可以添加多种格式，只要有一种符合就能可以
audio播放音频
<audio src="music/music.ogg" controls="controls"></audio>
<audio src="music/music.mp3" controls="controls"></audio>
<audio controls="controls">
<source src="music/music.mp3"></source>
<source src="music/music.ogg"></source>
</audio>
src是路径，controls为控制
4.表单
4.1常用表单
都在<form></form>表单中
文本框
<form>
<input type="text" name="keyword" value="请输入要搜索的东西"/>
</form>
格式：type指定元素的类型，name为key前端中不展示，value为值，输入值后触发，value就会变成会输入的值，后期将name，value这一对值传给后台，后台识别name属性
密码框
<input type="password" name="pwd" /><br />
密码框，输入会变成不可见的小圆点，直接加value="请输入密码"，会变成5个黑点
单选按钮
<input type="radio" name="sex" value="1" />男<br />
<input type="radio" name="sex" value="2" />女<br />
name为同一的名字，汉字男女是前端显示用，做出选择以后传给后端的是name:sex，和value:1/2
<input type="radio" name="sex" value="1" checked="checked" />男<br />
<input type="radio" name="sex" value="1" checked />男<br />
checked为默认选项
复选按钮
<input type="checkbox" name="like" value="1" />杨幂<br />
<input type="checkbox" name="like" value="2" />迪丽热巴<br />
<input type="checkbox" name="like" value="3" />佟丽娅<br />
<input type="checkbox" name="like" value="4" />高圆圆<br />
checked为默认选项，checked="checked" ，或者直接checked
列表框
<select name="女明星">
<option value="1">杨幂</option>
<option value="1">迪丽热巴</option>
<option value="1">高圆圆</option>
<option value="1">佟丽娅</option>
</select><br />
select和option是一组，name属性在select中，value值为选项提供，长度依据最长的选项
<option value="1" select[="select"]>迪丽热巴</option>默认选项
按钮
<form action="demo02.html" method="get">
在最开始的form表单中添加action，method，提交1会跳转，提交2加了事件会跳转
<input type="reset" value="重置" /><br />
<input type="submit" value="提交1" /><br />
<input type="button" value="提交2" onclick="window.location.href='demo02.html'" />
onclick：给某个元素添加事件
submit和button两个作用类似，但是不可互换
button-普通按钮，submit-提交按钮。
submit是button的一个特例，也是button的一种，它把提交这个动作自动集成了，submit和button,二者都以按钮的形式展现,看起来都是按钮，所不同的是type属性和处发响应的事件上。
多行文本域
<textarea rows="3" cols="10" name="要获取的话添加name属性"></textarea>
rows是列，cols是行，要获取值的话添加name属性
文件域
<input type="file" name="file" accept="image/x-png"/>
accept为选择的文件类型限制，选择框根据浏览器的不同显示中文英文不同
4.2表单的高级应用
隐藏域
<input type="hidden" value="1" name="id" />
<input type="text" value="请输入用户名称" name="zs" />
<input type="password" value="" name="123" />
<input type="submit" value="登录" />
可以看到，id属性被隐藏，但是是存在的，某些业务场景不需要可见，只需要后台来操作处理，比如登录，其中的个人id在数据库中是主键，是识别的标识
只读
<input type="text" value="你打我呀" readonly="readonly" />
禁用
<input type="text" value="你打我呀" disabled="disabled" />
4.3表单的初级验证
placeholder
<input type="text" name="fname" placeholder="请输入要搜索的东西" />
就是用placeholder替换了value，在文本框中点击可以直接输入，不需要将原来的内容删掉
required
<input type="text" required="required" /><br />
不输入提交会提示输入字段
pattern
<input type="text" pattern="[AB]" />
按照pattern的规则输入，正则表达式
否则提示
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
