发表于： 2018-10-16 00:49:37
1 783
今天完成的事情：
1、下载编辑器Sublime Text及Chrome
2、初步了解网页由文本、图像、动画、声音、视频、表格和表单等元素组成
HTML是网页内容的载体，它是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。CSS样式是表现，用来改变内容外观。JavaScript是用来实现网页上的特效效果，比如有动画的，有交互的。
3、HTML 的关键是标签，其作用是指示将出现的内容。网页都是由html标签组成的，标签由英文尖括号<和>括起来，如<html>就是一个标签。html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。
4、常用标签
- <html></html>称为根标签，所有的网页标签都在<html></html>中。
- <head> 标签用于定义文档的头部，它是所有头部元素的容器。
- san在<body>和</body>标签之间的内容是网页的主要内容，如标题标签<h1>、段落标签<p>、链接标签<a>、图像标签<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
- 加入强调语气，使用<strong>和<em>标签
- 使用<br>标签分行显示文本
- <hr>标签，添加水平横线
- 使用<span>标签为文字设置单独样式
- 使用<div> 元素为HTML 布局
- <q>标签，短文本引用
- <address>标签，为网页加入地址信息
- <ul>-<li>是没有前后顺序的信息列表，<ol>标签来制作有序列表来展示
- table标签<table>、<tbody>分段显示、<tr>表格的一行、<th>表格表头、<td>表格的一个单元格
- caption标签，为表格添加标题和摘要
- 使用<a>标签，链接到另一个页面
- 使用表单标签，与用户交互
例子：要求：慢跑、登山和篮球复选框要与各自的复选项用for属性关联。效果图如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>你对什么运动感兴趣</title>
</head>
<body>
<form>
你对什么运动感兴趣：<br />
<label for="jog">慢跑</label>
<input type="checkbox" name="sports" id="jog" />
<br />
<label for="climb">登山</label>
<input type="checkbox" name="sports" id="climb" />
<br />
<label for="basketball">篮球</label>
<input type="checkbox" name="sports" id="basketball">
</form>
</body>
</html>
问题：这里的name属性是不是要不一致，因为name一样的值是起到单选作用，与要求是复选框不符，但是我这样写一样的属性运行结果也是可以复选的，不知道为什么
明天计划的事情：学习CSS概念语法选择器、学习盒子模型概念-盒子模型、学习浮动-float、viewport
遇到的问题：
<label>标签究竟有什么用，资料上是这么解释的：label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）
搜索他人相关问题帮助理解，理解能力差不知道对不对，比如上面那个你对什么运动感兴趣的例子，有<label>标签，则鼠标点击文本慢跑这两个字，不需要选中后面的选择框就可以选中这个选项，如果没有这个标签，则必须要选中后面的选项框才能选中。
收获：了解了网页的组成及其生成原理，HTML常用标签及用法
返回列表
评论