2018/09/27渡课

目录

  • 一.关键字
  • 二.使用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表单元素完成一个个人简历的网页编写





个人性息表填写
姓名(中)性别
(英)民族
政治面貌身份证号码
出生日月出生地
婚姻状况已婚未婚其他兵役已役未役免役 原因:
兴趣爱好:游泳做饭读书打篮球跑步做家务志愿者打游戏睡觉
联系信息
目前居住通信地址:户籍所在地地址:
邮箱本人手机号紧急联系人手机号
个人介绍

在这里插入图片描述

三.使用form完成一篇带目录导航的文章编写



目录

0926慕课第二天


0926慕课第二天

一.关键字

关键词 英文 解释
SEO 搜索引擎优化
拓展名 extension 用不同方式打开文件
合并列 colspan 左右单元格合并
合并行 rowspan 上下单元格合并
表格 table
元素 element 标签
属性 property 设置标签
样式 style

二.使用Table标签完成一个课程表的编写

	<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>

三.回答问题

a. 什么是HTML的标签语义化?

语义化的HTML就是写出的HTML代码,符合内容的结构化(内容语义化),选择合适的标签(代码语义化),能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
1.语义化有利于SEO,有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效信息,提升网页的权重。
2.在没有CSS的时候能够清晰的看出网页的结构,增强可读性。
3.便于团队开发和维护,语义化的HTML可以让开发者更容易的看明白,从而提高团队的效率和协调能力。
4.支持多终端设备的浏览器渲染。

b.什么是SEO优化,在HTML标签中如何体现?

什么是SEO
SEO,简称搜索引擎优化(网站优化)。就是通过对网站优化,迎合搜索引擎的标准,得出的一个自然的优化。搜索引擎竞价优化,就是付费给搜索引擎,根据搜索引擎的关键字的竞价,得出一个网站优化。网站的关键字你出价越高,可能就会排到前面。有些很热的关键字,每次的点击价格高得吓人。所以根据企业网站的需要,可以选择SEO,也可以选择搜索引擎竞价优化。当然我个人还是比较喜欢SEO,觉得SEO对于网站长远发展也有一定的优势。

SEO优化之HTML代码优化最重要的5个标签
1.Title 标签
标签能够告诉用户和搜索引擎网页页面的主题思想是什么,一直是搜索引擎的抓取重点。通常,搜索引擎抓取Title标签出于两个目的:作为影响网页排名的重要因素和作为搜索结果页面的显示信息。不管是哪一个目的,对我们做SEO来说都非常重要。
一般来说,Title标签中的单词最好保持在3~6个左右,最好包含关键字。但Title标签中的单词不要全部都是关键字,因为这样可能会造成页面关键字堆砌,导致过度优化。所选单词应简洁明了、具有描述性,要与网页内容具有很大的相关性,并且每个不同的页面都应该包含Title标签。
2.Meta Description标签
对Title标签优化之后,接下来就是对Meta Description标签的优化。Meta
Description标签可以说是对Title标签的进一步解释,可以是一句话或者是包含十几个单词的短语。每个页面都该有其自己的Meta
Description标签,并且Meta
Description标签还可包含一些与网站内容相关但Title标签中未提及的信息。与Title标签要求相似,该部分内容也应具有描述性,与网页内容具有相关性,可包含关键字,但不可过多。
3.Heading标签
Heading标签包含了H1、H2、H3等等,是搜索引擎识别页面信息的重要标记。合理使用H1、H2、H3等不同级别的标签能够使得页面结构更加清晰,有利于搜索引擎的抓取。H1、H2、H3等标签是按照重要程度来排名的。一般一个页面按照需求程度来适当添加该标签:从H1开始,依次往下添加。但不可添加太多Heading标签,否则会适得其反。
4.Strong和B标签
相信大多数朋友都知道Strong和B标签都有加粗的意思,但是很多人并不清楚两者具体有什么区别。其实B标签就是单纯地将文字加粗,而Strong标签不仅是对文字加粗,并且这种形式的加粗会告诉搜索引擎该部分文字比较重要。所以两者从搜索引擎优化的角度来看,是有很大的区别的。
上文中所提到的Heading标签页具有加粗效果,那么这三种标签到底该怎么用?其实,Heading标签一般用于文章大标题以及每段的小标题,而Strong标签一般用于文章段落中的重点词汇,而B标签一般只是强调一种视觉效果。
5.ALT标签
ALT标签是一种图片标签,它将图片的信息以文本的形式展现。对ALT标签的使用没有太多要求,只要在网页中出现图片的部分添加上该属性即可,但其标签内容应与相应页面内容具有相关性,长度不得过长,一般1~5个单词即可。

C.什么是浏览器的兼容问题?

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中,做好浏览器兼容,才能够让网站在不同的浏览器下都正常显示。而对于浏览器软件的开发和设计,浏览器对标准的更好兼容能够给用户更好的使用体验。

四.描述A标签和IMG标签

HTML< a >标签

< a > 标签定义超链接,用于从一张页面链接到另一张页面。

属性 描述
herf 网址 链接的目标
target _blank 在新窗口打开(默认在本页面)
title 文字提示 鼠标停留在a上有文字提示

HTML< img >标签

< img > 标签定义向网页中嵌入一幅图像。

属性 描述
alt 文字 图片不显示时替代的文本
src 路径或网址 图片地址
height 数字px 图片高度
widh 数字px 图片宽度
title 文字 文字提示





在这里插入图片描述

四.题目

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 属性无法与 一同使用。


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部