开学第一周的WEB知识小结
一、HTML重点知识总结
-
<p></p>
:用于展示段落的元素 -
为了将一段 HTML 中的内容置为注释,需要将其用特殊的记号
<!--
和-->
包括起来例如:
注意:HTML不区分标签的大小写,但建议全部使用小写
-
<br>
,<hr>, <input>
的用法如下<!-- 换行 --> <p>我可以<br>换行</p> <!-- 水平分割线 --> <hr> <!-- 输入框 --> <input>
提示::在上面代码中看到
<br>
元素放到<p>
元素之中——这被称作嵌套! -
HTML 提供了从大到小6级标题,分别是:
<h1> ~ <h6>
-
超链接语法 a
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
说明:
1.
href
即为要跳转去的地址URL
target
属性为_blank
表示在新的页面打开超链接(默认是在当前页面打开即_self
)- 超链接标签包含的内容(当前为文字“百度一下”)即为显示在页面上供用户点击的
-
锚点
定义:也称为书签,用于标记页面的某个元素或位置。通过锚点可以轻易的在长页面内实现跳转。
先使用
id
属性生成某元素的锚点,然后再使用超链接指向该锚点即可例如下面的代码:
<!-- 文档其余部分 --> <h2 id="C4">第四章 论零号病人的重要性</h2> <!-- 文档其余部分 --> <a href="#C4">跳到第四章</a> <!-- 文档其余部分 --> ...
注意:
- 元素的
id
值必须是唯一的,也即页面不能再有其它元素的id
值为C4
- 超链接中的地址需要有
#
符号
-
图片及文件路径
img
在页面插入一张图片如下:
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">
说明:
src
属性为要显示图片文件的位置 URL,即图片文件的路径alt
属性当获取图片出现问题时显示的文字(占位符)- 可为图片指定高宽度,但不建议(可能导致图片变形)
-
文件路径
.
表示当前目录,..
表示上一级目录 -
思考题:如何用图片做成一个超链接
(我的代码)
<a href="./photo/yangyang.jpg" target="_blank"><center>点我一下有惊喜</center></a>
-
表格 Table
<table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
代码中,<tr>
表示行, <td>
表示行中的单元, <th>
是表头的单元(将会加粗显示)
-
列表 List
无序列表使用
<ul>
标签,默认使用实心圆点作为每项的标志,其它的标志可以是空心圆circle
,实心方块square
以及不出现标志有序列表使用
<ol>
标签,默认使用数字作为每项的标志,其它的标志可以是大写字母A
,小写字母a
,罗马字母i
等 -
表单 Form
学习代码
<form> <!-- 文本框,注意有 placeholder 提示符 --> 用户名:<br> <input type="text" name="name" placeholder="请输入用户名"><br> <!-- 密码框 --> 密码:<br> <input type="password" name="ps" placeholder="请输入密码"><br> 年龄:<br> <!-- 数字输入框,注意 min 和 value 属性--> <input type="number" name="age" min="18" value="18"><br> <!-- 单选按钮, 注意 checked 属性 --> 性别:<br> <input type="radio" name="gender" value="male" checked> 男<br> <input type="radio" name="gender" value="female"> 女<br> <input type="radio" name="gender" value="other"> 其它<br> <!-- 下拉列表,注意 selected 属性 --> 党派:<br> <select name="party"> <option value="D">民主党</option> <option value="R" selected>共和党</option> <option value="N">无党派</option> </select><br> <!-- 多选框 --> 您有哪些交通工具:<br> <input type="checkbox" name="vehicle1" value="Bike"> 自行车<br> <input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br> <input type="checkbox" name="vehicle3" value="Car"> 轿车<br> <input type="checkbox" name="vehicle4" value="Jet"> 飞机<br> <!-- 日期选择器 --> 您的工作日期:<br> <input type="date"><br> <!-- 文件选择器 --> 上传您的照片:<br> <input type="file" name="photo"><br> <!-- 文本输入区域,注意 rows 和 cols 属性 --> 您的建议:<br> <textarea name="message" rows="5" cols="30"> The cat was playing in the garden. </textarea><br><hr> <!-- 表单提交/重置按钮,将表单中的数据取消或传输给服务器端进行处理 --> <input type="submit" value="提 交"> <input type="reset" value="重 置"> </form>
-
预设格式
pre
标签:pre
标签中的内容将保持格式不变例如展示一首诗:
<pre> 我如果爱你—— 绝不学痴情的鸟儿, 为绿荫重复单调的歌词 </pre>
-
注意,在HTML中不能使用小于号(<)和大于号(>),
<
表示小于符号,>
表示大于符号二、小测试错题
-
可以添加背景颜色的语句是:
<body bgcolor="yellow">
-
*产生粗体字的HTML标签:
<b>
-
产生斜体字的HTML标签:
<i>
-
可以使单元格中的内容进行左对齐的正确的HTML标签:
<td align="left">
-
可以产生下拉列表的语句:
<select>
-
可以产生文本区(
textarea
):<textarea>
-
可以插入背景图像的语句:
<body background="background.gif">
-
XML 和 HTML有什么区别?
回答:HTML 不要求标记的嵌套,配对等,不要求标记间具有一定的顺序,而 XML 则是严格要求嵌套,配对。HTML 不具备扩展性,而XML是原标记语言,可以用于定义新的标记语言,HTML 侧重于如何表现信息,而 XML 是侧重于如何结构化的描述信息。
-
DOM 代表文档对象模型
-
对 于HTML 中的框架(
iframe
、frameset
),使用*指定屏幕的其余部分 -
当前文档和链接文档之间的关系是使用rel属性指定的:
html
的 link 标签是用于当前文档引用外部文档用的,rel 属性用于设置对象和链接目的间的关系 -
“target” 的默认属性值在 HTML 中为_self,默认在当前窗口打开
-
浏览器中未访问链接的默认样式和颜色为下划线和蓝色
-
浏览器中激活链接的默认颜色是red
-
<area>
标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像) -
如果背景图像比屏幕小,它会重复
三、小结
开学第一周的内容相对来说比较简单,主要是关于HTML的书写规范和一些特殊格式的学习。印象最深的知识是如何用图片做成一个超链接,毕竟这是关于该课程的第一个课堂练习.对HTML中一些常用的标签的使用还不是特别熟,有时会忘记格式的书写问题,后面的表格和列表掌握的还不是很好,课下还需要复习和加强。