编程流程
- 创建文件夹（英文名称）
- 打开VS软件
- file->open folder->之前创建的文件夹
- 在文件夹中创建文档，修改后缀为.html
标签（tag）
- HTML 元素以开始标签起始，以结束标签终止；
- HTML 标签 (HTML tag)：
- HTML 标签是由尖括号包围的关键词，比如 < html >；
- HTML 标签通常是成对出现的，比如 < b >和 < /b >；
- 标签对中的第一个标签是开始标签，第二个标签是结束标签。
- 开始和结束标签也被称为开放标签和闭合标签。
- 大多数 HTML元素可以嵌套，HTML文档由相互嵌套的HTML元素构成
- 举例：
- <title>百度一下，你就知道</title>
- <head><meta charset=“UTF-8”></head>(当前页面的字符编码UTF-8 国际编码的中文 设置编码为中文)
- <body></body>
文档（网页）
- HTML文档描述网页
- HTML文档包含HTML标签和纯文本
- HTML文档也被称为网页
- 网页内容
- 文字
- 图片
- 视频
- 超链接
- 音频
- 网页内容
基础格式
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<title>黄金时代</title>
</head>
<style>
p {color: black;
font-size: 20px;
}
</style>
<body>
<p>
天色微微向晚，天上飘着懒洋洋的云彩。下半截沉在黑暗里，上半截仍浮在阳光中。
那一天我二十一岁，在我一生的黄金时代，我有好多奢望。我想爱，想吃，还想在一瞬间
变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，
奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这
一点。我觉得自己会永远生猛下去，什么也锤不了我。
</p>
</body>
</html>
常用标签举例
空格符号
- 浏览器会将多个空格解析为一个空格：
- 引申：转义符；
换行
<br>
- 单标签可以不用“/”
注释
<!--注释内容-->
- 快捷键：ctrl+/；
文字
<span>文本标签</span>
段落
<p>段落标签</p>
- 会单独占行，相当于前后有一个换行符；
图片
<img src="图片位置" alt="Smiley face" width="42" height="42">
- src：图片位置：除图片路径外，可用base64编码；
- width：宽度属性；
- 百分比：相对于父级标签宽度的百分比；
- 数值：表示像素（单位：px）；
- height：高度属性，使用与宽度属性相似；
- alt：图片加载失败时，告知用户图片大致内容；
- align：对齐方式；
音频
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
</audio>
- 目前，audio元素支持的3种文件格式：MP3、Wav、Ogg；
- autoplay；音频在就绪后马上播放；
- controls：向用户显示音频控件（比如播放/暂停按钮）；
- loop：当音频结束时重新开始播放；
- muted：音频输出为静音；
- preload；规定当网页加载时，音频是否默认被加载以及如何被加载；
- auto
- metadata
- none
- src：规定音频文件的 URL；
视频
<video src="" controls></video>
<video controls>
<source src="movie.mp4"></source>
<source src="movie.ogg"></source>
<source src="movie.webm"></source>
</video>
- 该标签支持三种格式：MP4 ogg webm；
| 属性 | 描述 |
|---|---|
| controls | 显示控制面板 |
| currentSRC | 视频对象的播放资源路径 |
| currentTIME | 当前播放时长 |
| duration | 视频总时长 |
| playbackRate | 播放速度 |
| volume | 音量（0~1） |
| poster | 封面(=“”) |
| autoplay | 自动播放 |
| loop | 循环播放 |
| muted | 静音 |
| 方法 | 描述 |
|---|---|
| play() | 播放 |
| pause() | 暂停 |
列表
- 有序列表
<ol type="a">（*A、1等*） <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> - 无序列表
<ul type=" ">(*none、circle、square等*) <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> - 自定义列表
- 带备注列表
<dl> <dt>coffee</dt> <dd>black and hot drink</dd> <dt>milk</dt> <dd>white and hot drink</dd> <dt>tea</dt> <dd>bitter and hot drink</dd> </dl>
- 带备注列表
- <dl>：定义定义列表；
- <dt>：定义定义项目；
- <dd>：定义定义的描述；
- 嵌套列表
<ul> <li>茶 <ul> <li>红茶</li> <li>绿茶</li> </ul> </li> <li>牛奶</li> <li>咖啡</li> <li>me</li> </ul>
- 嵌套列表
输入框
<p>用户名：<input type=" " placeholder="请输入用户名"></p>
- 举例：
<p>用户名：<input type="text"></p><p>密 码：<input type="password"></p><p>性 别：<input type="radio" name="sex">男<input type="radio" name="sex">女</p><p>兴趣爱好：<input type="checkbox">吃饭<input type="checkbox">睡觉<input type="checkbox">打豆豆</p>- 默认选中：
<input type="checkbox" checked> <input type="checkbox" checked=checked>- 按钮：
<input type="button" value="BUTTON">- value：页面上显示字符；
下拉列表
<select>
<option> 1 </option>
<option> 2 </option>
<option> 3 </option>
<option> 4 </option>
</select>
文本域
<textarea cols=" " rows=" ">文本域里的值</textarea>
- cols：宽，单位为字节；
- rows：高，
- 文本域属性
- readonly：规定文本区为只读；
- required：规定文本区域是必填的；
- wrap：规定当在表单中提交时，文本区域中的文本如何换行；
- hard：默认文本不换行；
- soft：文本换行，且同时必须指定cols属性；
超链接
<a href="url" target=" ">访问网页url</a>
在浏览器中，通常超链接的默认外观是：
- target属性
- _blank：另起一个窗口打开新网页；
- _self：在当前窗口打开新的网页链接（默认）；
- _parent：在当前的父窗口中打开，若无父窗口则等同于self；
- _top：在整个窗口中打开。
- href属性：指向跳转路径；可指向绝对与相对路径；
表格
- colspan属性：值为横跨格数；
- rowspan属性：值为纵跨格数；
- 边框
<table border="1">边框宽度值（数值）为一像素 </table> - cellpadding属性：值为表格边框与内容之间的间距（像素值）；
- cellspacing属性：值为表格；与表格之间间距
- 设置单线边框
style="border-collapse:collapse" - 举例
<!DOCTYPE html> <html> <head> <meta charset=UTF-8"> <title>表格</title> </head> <body> <table border="2px" style="border-collapse:collapse" > <tr> <th colspan="6" align="center">个人简历</th> </tr> <tr> <td align="center" width="100px">姓 名</td> <td width="100px"></td> <td align="center" width="100px">性 别</td> <td colspan="2" width="100px"></td> <td rowspan="6" width="130px"></td> </tr> <tr> <td align="center">年 龄</td> <td></td> <td align="center">出生日期</td> <td colspan="2"></td> </tr> <tr> <td align="center">所在城市</td> <td></td> <td align="center">从事行业</td> <td colspan="2"></td> </tr> <tr> <td align="center">学 历</td> <td></td> <td align="center">民 族</td> <td colspan="2"></td> </tr> <tr> <td align="center">婚姻状况</td> <td></td> <td align="center">毕业学校</td> <td colspan="2"></td> </tr> <tr> <td align="center" height="40px">身份证号码</td> <td></td> <td align="center">计算机能力</td> <td colspan="2"></td> </tr> <tr> <td align="center" height="40px">籍 贯</td> <td colspan="2"></td> <td align="center">户口所在地</td> <td colspan="2"></td> </tr> <tr> <td colspan="6"> </td> </tr> <!--第一部分--> <tr> <td align="center" rowspan="3">家庭成员</td> <td align="center" width="150px">姓 名</td> <td align="center" width="100px">成员关系</td> <td align="center" width="120px">职 务</td> <td align="center" colspan="2" width="100px">工作单位</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td colspan="2"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td colspan="2"> </td> </tr> <tr> <td colspan="6"> </td> </tr> <!--第二部分--> <tr> <td align="center" rowspan="4">工作经历</td> <td align="center" width="150px">起止时间</td> <td align="center" width="100px">公司名称</td> <td align="center" width="120px">职务名称</td> <td align="center" colspan="2" width="110p5x">所属部门</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td colspan="2"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td colspan="2"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td colspan="2"> </td> </tr> <tr> <td colspan="6"> </td> </tr> <!--第三部分--> <tr> <td align="center" rowspan="6">教育情况</td> <td align="center" width="150px">起止时间</td> <td align="center" width="150px">学 校</td> <td align="center" width="130px" colspan="3">所任职务</td> </tr> <tr> <td> </td> <td> </td> <td colspan="3"> </td colspan="2"> </tr> <tr> <td> </td> <td> </td> <td colspan="3"> </td colspan="2"> </tr> <tr> <td> </td> <td> </td> <td colspan="3"> </td colspan="2"> </tr> <tr> <td> </td> <td> </td> <td colspan="3"> </td colspan="2"> </tr> <tr> <td> </td> <td> </td> <td colspan="3"> </td colspan="2"> </tr> <tr> <td colspan="6"> </td> </tr> <!--第四部分--> <tr> <td align="center" rowspan="4">培训经历</td> <td align="center" width="150px">起止时间</td> <td align="center" width="140px">培训机构</td> <td align="center" width="140px" colspan="3">培训内容</td> </tr> <tr> <td> </td> <td> </td> <td colspan="3"> </td colspan="2"> </tr> <tr> <td> </td> <td> </td> <td colspan="3"> </td colspan="2"> </tr> <tr> <td> </td> <td> </td> <td colspan="3"> </td colspan="2"> </tr> <!--第五部分--> </table> </body> </html>
239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
