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

开学第一周的WEB知识小结相关推荐

java开学第一周测试自我感想
开学第一周,王建民老师就对我们进行了java测试,对我们说测试题目是基于期末考试的基础难度来出的.我们的考试完全是靠暑假在家自学的基础,如果在家没有自学java,那完全就是看不懂试卷到底要考什么.由于 ...
关于开学第一周的总结
2019/3/2 星期六新学期.新气象,已经开学一周了,在这一周里面过的还算挺好(抛去不开心的,全是开心的...),许久未见的同学.朋友终于可以在一起好好聚聚.谈谈了,想是许久未见了,见面的时候 ...
第一周前端web学习记录
第一周前端web学习记录 #什么是HTML.CSS? 如何写代码以及在哪里写 vs code 的基本使用方法浏览器网站开发 HTML 的结构基础和属性创建标签嵌套 HTML标签设置属性 HT ...
计算机专业开学周记,周记开学第一周
周记开学第一周(一) 开学第一周的升旗仪式便是我们班所主持的.为了这一次能在升旗仪式上有良好的发挥,能给人耳目一新的感觉,我们班的同学们个个献计献策,方法是想了一个又一个,经过斟酌,最终敲定了这套方案 ...
开学第一周，超30所高校系主任选择与百度飞桨联办校赛
经历了一场特殊而漫长的假期,各地校园又恢复了往日的热闹,重新焕发出勃勃生机,师生们在一声声久别重逢的暖心问候中,迎来了2023年春季学期. 以赛促学蔚然成风开学季是校内竞赛策划及启动的最佳时机之一, ...
B计划第四周（开学第一周）
又是一周出始,init(),我自己都不知道下周我还有没有机会在继续写第五周.开学了,本周30题. 1.韩梅梅的抽象画.dfs 2.卡牌游戏.博弈论. 3.分蛋糕.遍历 4.学生排队.写个双向链表. 5 ...
23考研开学第一周学习
简介 23考研党,3-4天没更新周记博文了,更新一下. 开学的课表有: 周一下午:一下午的软件工程周二上午:计算机组成原理周二下午:IT项目管理周三上午:java 周五上午:计算机组成原理看起 ...
研究生开学第一周Week01
10445开学新体验距离8.28号开学已经接近一周时间了,在这一周中我接触了我的室友们,感受到了她们的勤奋.她们真的很热爱学习,同时我们也都很迷茫,在山东这个大环境下,她们实验室的师哥师姐可能都在考 ...
开学第一周acm训练总结
这一周看的算法资料不是很多,主要是复习了一下前缀和与差分并学习了图论的差分约束部分相关知识及题目. 差分约束系统是求解关于一组变量的特殊不等式组的方法,我们的目标是通过给定的不等式求最大或者最小值或者 ...

开学第一周的WEB知识小结

开学第一周的WEB知识小结

一、HTML重点知识总结

二、小测试错题

三、小结

开学第一周的WEB知识小结相关推荐

最新文章

热门文章