2018/09/27渡课
2024-05-06 18:08:10
目录
- 一.关键字
- 二.使用Table标签和Form表单元素完成一个个人简历的网页编写
- 三.使用form完成一篇带目录导航的文章编写
- 四.题目
- a.Table页面布局和Div布局的区别和为什么要使用Div布局？
- b.表单标签中nam属性和value属性各代表的含义?
一.关键字
| 关键词 | 英文 | 解释 |
|---|---|---|
| ul | 无序列表 | |
| ol | 有序列表 | |
| div | 一个容器 | |
| span | 写文本 | |
| 块级标签 | Block-level tags | 独占一行 |
| 行级标签 | Row-level label | 挤在一行 |
| frame | 框架 | 一个页面打开多个网页 |
| iframe | 内联框架 | 可以把页面放在一个页面里面 |
| form | 表单 |
二.使用Table标签和Form表单元素完成一个个人简历的网页编写
<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body><table cellspacing="0" border="1px"><tr><td colspan="7" align="center" style="font-size: 20px;font-weight: bold;background-color: gray;">个人性息表填写</td></tr><tr><td rowspan="2">姓名</td><td colspan="2">(中)<input type="text" name="中文名"></td><td>性别</td><td colspan="2"><input type="radio" name="性别" value="男">男<input type="radio" name="性别" value="女">女</td><td rowspan="4"><img src="666.jpg" style="width: 100px;"><br/><input type="file" name="文件上传"></td></tr><tr><td colspan="2">(英)<input type="text" name="英文名"></td><td>民族</td><td colspan="2"><input type="text" name="民族"></td></tr><tr><td>政治面貌</td><td colspan="2"><select><option value="自由群众">自由群众</option><option value="共青团员">共青团员</option><option value="共产党员">共产党员</option></select></td><td>身份证号码</td><td colspan="2"><input type="text" name="身份证号码"></td></tr><tr><td>出生日月</td><td colspan="2"><input type="text" name="出生年月日"></td><td>出生地</td><td colspan="2"><input type="text" name="出生地"></td></tr><tr><td>婚姻状况</td><td colspan="2"><input type="radio" name="婚姻状况" value="已婚">已婚<input type="radio" name="婚姻状况" value="未婚">未婚<input type="radio" name="婚姻状况" value="其他">其他</td><td>兵役</td><td colspan="3"><input type="radio" name="兵役状况" value="已役">已役<input type="radio" name="兵役状况" value="未役">未役<input type="radio" name="兵役状况" value="免役">免役 原因:<input type="text" name="免役原因"></td></tr><tr><td colspan="7">兴趣爱好:<input type="checkbox" name="游泳">游泳<input type="checkbox" name="做饭">做饭<input type="checkbox" name="读书">读书<input type="checkbox" name="打篮球">打篮球<input type="checkbox" name="跑步">跑步<input type="checkbox" name="做家务">做家务<input type="checkbox" name="志愿者">志愿者<input type="checkbox" name="打游戏">打游戏<input type="checkbox" name="睡觉">睡觉</td></tr><tr><td colspan="7" align="center" style="font-size: 18px;font-weight: bold;background-color: LightGray;">联系信息</td></tr><tr><td colspan="4">目前居住通信地址:<input type="text" name="目前居住通信地址"></td><td colspan="3">户籍所在地地址:<input type="text" name="户籍所在地地址"></td></tr><tr><td>邮箱</td><td colspan="2"><input type="text" name="邮箱"></td><td>本人手机号</td><td><input type="text" name="本人手机号"></td><td>紧急联系人手机号</td><td colspan="2"><input type="text" name="紧急联系人手机号"></td></tr><tr><td colspan="7" align="center" style="font-size: 18px;font-weight: bold;background-color: LightGray;">个人介绍 </td></tr><tr><td colspan="7"><textarea></textarea></td></tr></table></body>
</html>
三.使用form完成一篇带目录导航的文章编写
<!DOCTYPE html>
<html>
<head><title>目录</title>
</head>
<body><h1>0926慕课第二天</h1><ul><li><a href="0926渡课第二天.html#h1" target="daohang">关键字</a></li><li><a href="0926渡课第二天.html#h2" target="daohang">使用Table标签完成一个课程表的编写</a></li><li><a href="0926渡课第二天.html#h3" target="daohang">回答问题</a></li><li><a href="0926渡课第二天.html#h4" target="daohang">描述A标签和IMG标签</a></li></ul></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>0926慕课第二天</title><link rel="stylesheet" href="https://stackedit.io/style.css" />
</head><body class="stackedit"><div class="stackedit__html"><h1><a name="h1" id="_0"></a>一.关键字</h1><table>
<thead>
<tr>
<th>关键词</th>
<th>英文</th>
<th>解释</th>
</tr>
</thead>
<tbody>
<tr>
<td>SEO</td>
<td></td>
<td>搜索引擎优化</td>
</tr>
<tr>
<td>拓展名</td>
<td>extension</td>
<td>用不同方式打开文件</td>
</tr>
<tr>
<td>合并列</td>
<td>colspan</td>
<td>左右单元格合并</td>
</tr>
<tr>
<td>合并行</td>
<td>rowspan</td>
<td>上下单元格合并</td>
</tr>
<tr>
<td>表格</td>
<td>table</td>
<td></td>
</tr>
<tr>
<td>元素</td>
<td>element</td>
<td>标签</td>
</tr>
<tr>
<td>属性</td>
<td>property</td>
<td>设置标签</td>
</tr>
<tr>
<td>样式</td>
<td>style</td>
<td></td>
</tr>
</tbody>
</table><h1><a name="h2" id="Table_16"></a>二.使用Table标签完成一个课程表的编写</h1>
<pre><code> <table border="1px"><thead><tr><td></td><td></td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td></tr></thead><tbody><tr><td rowspan="3">上午</td><td>1</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>2</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>3</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td rowspan="3">下午</td><td>1</td><td></td><td rowspan="2"></td><td></td><td rowspan="2"></td><td></td></tr><tr><td>2</td><td></td><td></td><td></td><td></td></tr><tr><td>3</td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table>
</code></pre>
<h1><a name="h3" id="_84"></a>三.回答问题</h1>
<h2><a id="a_HTML_86"></a>a. 什么是HTML的标签语义化？</h2>
<blockquote>
<p>语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。<br>1.语义化有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。<br>2.在没有CSS的时候能够清晰的看出网页的结构，增强可读性。<br>3.便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。<br>4.支持多终端设备的浏览器渲染。</p>
</blockquote>
<h2><a id="bSEOHTML_93"></a>b.什么是SEO优化，在HTML标签中如何体现？</h2>
<blockquote>
<p><strong>什么是SEO</strong>？<br>
SEO，简称搜索引擎优化（网站优化）。就是通过对网站优化，迎合搜索引擎的标准，得出的一个自然的优化。搜索引擎竞价优化，就是付费给搜索引擎，根据搜索引擎的关键字的竞价，得出一个网站优化。网站的关键字你出价越高，可能就会排到前面。有些很热的关键字，每次的点击价格高得吓人。所以根据企业网站的需要，可以选择SEO,也可以选择搜索引擎竞价优化。当然我个人还是比较喜欢SEO，觉得SEO对于网站长远发展也有一定的优势。</p>
<p><strong>SEO优化之HTML代码优化最重要的5个标签</strong><br>
1.Title 标签<br>
标签能够告诉用户和搜索引擎网页页面的主题思想是什么，一直是搜索引擎的抓取重点。通常，搜索引擎抓取Title标签出于两个目的：作为影响网页排名的重要因素和作为搜索结果页面的显示信息。不管是哪一个目的，对我们做SEO来说都非常重要。<br>
一般来说，Title标签中的单词最好保持在3~6个左右，最好包含关键字。但Title标签中的单词不要全部都是关键字，因为这样可能会造成页面关键字堆砌，导致过度优化。所选单词应简洁明了、具有描述性，要与网页内容具有很大的相关性，并且每个不同的页面都应该包含Title标签。<br>
2.Meta Description标签<br>
对Title标签优化之后，接下来就是对Meta Description标签的优化。Meta<br>
Description标签可以说是对Title标签的进一步解释，可以是一句话或者是包含十几个单词的短语。每个页面都该有其自己的Meta<br>
Description标签，并且Meta<br>
Description标签还可包含一些与网站内容相关但Title标签中未提及的信息。与Title标签要求相似，该部分内容也应具有描述性，与网页内容具有相关性，可包含关键字，但不可过多。<br>
3.Heading标签<br>
Heading标签包含了H1、H2、H3等等，是搜索引擎识别页面信息的重要标记。合理使用H1、H2、H3等不同级别的标签能够使得页面结构更加清晰，有利于搜索引擎的抓取。H1、H2、H3等标签是按照重要程度来排名的。一般一个页面按照需求程度来适当添加该标签：从H1开始，依次往下添加。但不可添加太多Heading标签，否则会适得其反。<br>
4.Strong和B标签<br>
相信大多数朋友都知道Strong和B标签都有加粗的意思，但是很多人并不清楚两者具体有什么区别。其实B标签就是单纯地将文字加粗，而Strong标签不仅是对文字加粗，并且这种形式的加粗会告诉搜索引擎该部分文字比较重要。所以两者从搜索引擎优化的角度来看，是有很大的区别的。<br>
上文中所提到的Heading标签页具有加粗效果，那么这三种标签到底该怎么用？其实，Heading标签一般用于文章大标题以及每段的小标题，而Strong标签一般用于文章段落中的重点词汇，而B标签一般只是强调一种视觉效果。<br>
5.ALT标签<br>
ALT标签是一种图片标签，它将图片的信息以文本的形式展现。对ALT标签的使用没有太多要求，只要在网页中出现图片的部分添加上该属性即可，但其标签内容应与相应页面内容具有相关性，长度不得过长，一般1~5个单词即可。</p>
</blockquote>
<h2><a id="C_113"></a>C.什么是浏览器的兼容问题？</h2>
<blockquote>
<p>浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计，浏览器对标准的更好兼容能够给用户更好的使用体验。</p>
</blockquote>
<h1><a name="h4" id="AIMG_115"></a>四.描述A标签和IMG标签</h1>
<h2><a id="HTML_a__116"></a>HTML< a >标签</h2>
<p>< a > 标签定义超链接，用于从一张页面链接到另一张页面。</p><table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>herf</td>
<td>网址</td>
<td>链接的目标</td>
</tr>
<tr>
<td>target</td>
<td>_blank</td>
<td>在新窗口打开（默认在本页面）</td>
</tr>
<tr>
<td>title</td>
<td>文字提示</td>
<td>鼠标停留在a上有文字提示</td>
</tr>
</tbody>
</table><h2><a id="HTML_img__123"></a>HTML< img >标签</h2>
<p>< img > 标签定义向网页中嵌入一幅图像。</p><table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>alt</td>
<td>文字</td>
<td>图片不显示时替代的文本</td>
</tr>
<tr>
<td>src</td>
<td>路径或网址</td>
<td>图片地址</td>
</tr>
<tr>
<td>height</td>
<td>数字px</td>
<td>图片高度</td>
</tr>
<tr>
<td>widh</td>
<td>数字px</td>
<td>图片宽度</td>
</tr>
<tr>
<td>title</td>
<td>文字</td>
<td>文字提示</td>
</tr>
</tbody>
</table></div>
</body></html><!DOCTYPE html>
<html>
<frameset cols="25%,75%"><frame src="目录.html"><frame src="0926渡课第二天.html" name="daohang">
</frameset>
</html>
四.题目
a.Table页面布局和Div布局的区别和为什么要使用Div布局？
table布局比较局限，div 比较开放，设计样式比较多，效果美观，table好处是所有浏览器都兼容div缺点是兼容性很麻烦
div布局的优点是比较方便简洁，代码比较少，制作和维护也比较容易
b.表单标签中nam属性和value属性各代表的含义?
name
①在单选按钮中，name值相同的单选按钮被归为一组，在该组中只有一个按钮的checked属性为true。
②总的来说，input的name属性用于提交一个form表单数据时，对数据的引用：
如用GET方式发送数据时，你能在URL地址中看到xxx.html?atext=123
③可以用于CSS中设置该类name值的元素的样式。
④通过js的document.getElementsByTagName(“atext”)和jQ的$(".atext")等可以获取name属性值为atext的元素对象。
value
HTML 标签 定义和用法value 属性为 input 元素设定值。对于不同的输入类型，value 属性的用法也不同。
①type=“button”, “reset”, “submit” - 定义按钮上的显示的文本。
② type=“text”, “password”, “hidden” - 定义输入字段的初始值。
③ type=“checkbox”, “radio”, “image” - 定义与输入相关联的值 。
④注释： 和 中必须设置 value 属性。注释：value 属性无法与 一同使用。
2018/09/27渡课相关推荐
- 2018/09/25渡课
课程关键字 关键词 英文*解释 浏览器 browser 解析器 resolver 服务器 server web前端 设计网站 Java 制作整个软件 UI 交互设计 HTML 超文本标记语言(不是编程 ...
- 2018/11/27渡课
目录 一.完成自学部分内容,并撰写一篇关于 Eclipse 使用的博客,包括常用的 Eclipse 快捷键. 二.使用 Eclipse 进行开发,验证今日课堂上的知识点,完成对应作业. 三.写至少5个 ...
- 2018/09/29渡课
目录 一.使用CSS美化之前HTML构建的个人简介页面,包括表格边框,表格单元格背景,字体,输入框样式等,要求在外部CSS文件中定义样式,并尝试如何优化类选择器的定义.(不能实现的样式,参考样式手册查 ...
- 2018/9/28 渡课学习第四天
目录 重要标签 作业完成汇报 今日学习总结 重要标签 标签 描述 实例 <!--...--> 定义注释 <!--这是一段注释.注释不会在浏览器中显示.--> <!DOCT ...
- 【跃迁之路】【599天】程序员高效学习方法论探索系列（实验阶段356-2018.09.27）...
@(跃迁之路)专栏 实验说明 从2017.10.6起,开启这个系列,目标只有一个:探索新的学习方法,实现跃迁式成长 实验期2年(2017.10.06 - 2019.10.06) 我将以自己为实验对象. ...
- python课程与c+课程有什么不同-南通渡课少儿编程：python和C的区别是什么？
南通渡课少儿编程:python和C的区别是什么? 2020-10-30 | 南通 | 点击87次 | 信息编号:20146414213238622002263449 视频:南通渡课少儿编程:pytho ...
- 2021.09.27 MySQL笔记
2021.09.27 MySQL笔记 文章目录 2021.09.27 MySQL笔记 一.展示当前存在的所有数据库 二.使用(选中)一个数据库 三.创建一个数据表 四.查询并展示该数据库内的所有数据表 ...
- 2018.09.22 上海大学技术分享 - An Introduction To Go Programming Language
老实说笔者学习 Go 的时间并不长,积淀也不深厚,这次因缘巧合,同组的同事以前是上海大学的开源社区推动者之一,同时我们也抱着部分宣传公司和技术分享的意图,更进一步的,也是对所学做一个总结,所以拟定了这 ...
- java开发工程师培训费,南通渡课Java开发工程师培训费用是多少
本页是南通渡课教育为您整理关于南通Java培训费用的详情页面,南通Java培训费用,就选南通渡课教育,教育培训知名品牌,名师执教.通俗易懂.深受广大学员所欢迎. Java是一种可以撰写跨平台应用软件的 ...
最新文章
- mac中用命令行运行mysql
- Wince 隐藏TASKBAR的方法
- Hlg 1407 【最小点权覆盖】.cpp
- api与implementation的区别
- 解决IE6下，给图片加上line-height属性不起作用的方法
- 动手实现一个适用于.NET Core 的诊断工具
- 项目总结（3.28）
- Python学习---面向对象的学习[深入]
- 记忆化搜索 codevs 2241 排序二叉树
- elasticsearch问题解决之分片副本UNASSIGNED
- [分享]Professional Windows Phone 7 Game Development: Creating Games using XNA Game Studio 4
- 打开chm文件c语言,chm格式,手把手教你chm文件怎么打开
- java接口服务编排_Netflix Conductor : 一个微服务的编排器
- JVM8(4)java虚拟机内部结构
- 【模拟集成电路】宽摆幅压控振荡器（VCO）设计
- 赛码网输入输出整理（Java）
- 安装制作工具开源软件
- 智慧楼宇篇 1 —— 室内定位技术（一） - RFID室内定位技术
- 高校俱乐部参会成员餐票领取安排及第二届研讨会邀请信
- nolo手柄配对不上_nolo手柄怎么纠正