| 标签来定义）。
例如：
<!--表格定义-->
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<!--
表格中 tr 表示行 td 表示列/单元格
border 表格边框
width 表格宽度
cellspacing 单元格之间的空隙
cellpadding 单元格内边距/内填充
-->
<table border="1" width="800px" cellspacing="0" cellpadding="0">
<tr>
<!-- th标签中的内容 默认会加粗，居中显示 -->
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
</tr>
<!-- 行 -->
<!-- 合并单元格
colspan 合并列
rowspan 合并行
-->
<tr>
<!-- 列/单元格 -->
<td rowspan="3">1</td>
<td colspan="2">xxx</td>
<td>干饭</td>
</tr>
<tr>
<td>xxx</td>
<td colspan="2">男</td>
</tr>
</table>
</body>
table 定义表格
caption 定义表格标题
th 定义表格的表头
tr 定义表格的行
td 定义表格单元
thead 定义表格的页眉
tbody 定义表格的主体
tfoot 定义表格的页脚
1.6.0.7.表单
form 用于为用户输入创建HTML表单
<form name="表单名称" method="表单提交方式" action="规定当提交表单时
向何处发送表单数据"> </form>
input 根据type属性值的不同，表示多种输入形式
textarea 表示多行文本框
select 表示下拉框，下拉框的条目用option表示
button 表示按钮
<!-- input 输入框， type用来指定其类型
value 用于指定其值 readonly 属性表示只读 disabled禁用
required 必填 placeholder 默认提示文字
-->
文本框：<input type="text" value="123" readonly="readonly" disabled="disabled"/> <br />
密码框：<input type="password" required="required" placeholder="请输入密码"/> <br />
颜色：<input type="color" /> <br />
<!-- 单选或者多选框，通过名称将多个input 绑定成一组 -->
<!-- checked属性，默认选中 -->
单选框：<input type="radio" name="gender"/>男
<input type="radio" name="gender" checked="checked"/>女
<br/>
多选框：<input type="checkbox" name="hobby"/>看书
<input type="checkbox" name="hobby" />打游戏
<input type="checkbox" name="hobby" checked="checked" />写代码
<br />
下拉列表：<select>
<!-- option 是每一个选项 -->
<option>青海省</option>
<option selected="selected">陕西省</option>
<option>山东省</option>
</select>
<br/>
文本域：<textarea cols="20" rows="5"></textarea>
<!-- src 属性用于定义图片的源 title 鼠标悬停显示的文字 alt 图片加载不出来，显示的文字
width/height 指定图片的宽/高,如果只指定一个 图片会等比例进行适应
-->
<img src="kedaya.jpeg" title="可达鸭啊" alt="这是只可达鸭" width="200px" height="500px"/>
<!-- audio表示音频 src 指定音频源 controls播放器控制按钮
autoplay 自动播放 chrome浏览器在新的版本中禁用了网页自动播放
muted 静音
vidio 表示视频
-->
<audio src="zhuiguangzhe.mp3" controls autoplay="autoplay" muted="muted">
</audio>
<video src="01.mp4" controls="controls"></video>
<marquee>弹幕</marquee>
<script>
/*
echarts 使用：
1. 引入 echarts.js 文件
2. 设置 echarts 容器
3. 自定 echarts 配置
4. 设置 echarts 配置
*/
// 获取到 echarts 容器
var div = document.querySelector("#echarts");
// 初始化 echarts
var myChart = echarts.init(div,'macarons');
// 3. echarts 配置
// 指定图表的配置项和数据
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'pie'
}]
};
// 4. 设置 option
myChart.setOption(option);
</script>
<!-- 了解了表格的程序制作，以及柱状图和饼状图的制作及程序使用和转换-->
2.心得体会
通过今天的学习，又了解了一些基本关键词的使用以及程序的运行，学习了在网页之中播放音乐及在网页之中寻找一张图片的地址后，用Hbuild X来进行图片在网页之中的显示等操作，对程序的了解进一步加深，以及学习了对柱状图和饼状图的程序使用。
| 
评论