开学第一周的WEB知识小结-CSDN博客

本文链接：https://blog.csdn.net/qq_45659859/article/details/114603145

开学第一周的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中一些常用的标签的使用还不是特别熟，有时会忘记格式的书写问题，后面的表格和列表掌握的还不是很好，课下还需要复习和加强。