网站建设进度图,wordpress博客好吗,建筑公司网站能显示二级建造师报名吗,搭建大数据平台费用希望你开心#xff0c;希望你健康#xff0c;希望你幸福#xff0c;希望你点赞#xff01; 最后的最后#xff0c;关注喵#xff0c;关注喵#xff0c;关注喵#xff0c;大大会看到更多有趣的博客哦#xff01;#xff01;#xff01; 喵喵喵#xff0c;你对我真的… 希望你开心希望你健康希望你幸福希望你点赞 最后的最后关注喵关注喵关注喵大大会看到更多有趣的博客哦 喵喵喵你对我真的很重要 目录
前言
内容来源书籍
总论
HTML基础
HTML文档结构
基本结构
头部
元信息
主体body
body标记属性
body标记属性-属性表
body标记属性-颜色表示方法
表示换行
表示水平分隔线。
属性语法
注释
HTML文档命名规则
HTML文档类型
HBuilder软件
使用前奏
课后习题
制作美家装饰产品简介首页
应用元信息meta标记。
熟悉body元素属性的使用。
熟悉文本修饰标记的应用。记一下还是很实用的
熟悉拼音注释及段落缩进标记的应用。
制作“教育信息化十三五规划报告”网页界面。
总结 前言 这又是计算机基础大盘的一块来来来我们开始吧喵~ 内容来源书籍 这个专栏的内容以这本书为根据。 总论 《Web 前端开发技术 》 是软件工程专业应该掌握的重要技术是软件工程专业的 开发类核心课程 。 Web前端开发技术是 创建网页界面呈现给用户的过程 实现互联网产品的用户界面交互 Web 前端开发 。 Web 前端开发技术 主要包括 HTML 、 CSS 、 JavaScript 、 AJAX 、 jQuery 以及衍生出来的其他插件技术。同时它也是服务器端 后端 开发技术 JSP 等的基础。 HTML基础
HTML文档结构 基本结构 HTML 文档由头部 head 和主体 body 两个部分组成。在头部 head 标记中可定义标题、样式等在主体 body 标记中可定义段落、标题字、超链接、脚本、表格、表单等元素主体内容是网页要显示的信息。 html head/head body/body /html !doctype html//文档类型
html//开始标签 html元素headmeta charset“UTF-8” title网页标题/title/headbodyp align“center”主体内容/p//align属性/body
/html//结束标签 头部head l HTML 文档的头部标记主要包含页面标题标记、元信息标记、样式标记、脚本标记、链接标记等。头部标记所包含的信息一般不会显示在网页上。 页面标题title /title l 基本语法 title标题信息显示在浏览器的标题栏上/title l 语法说明 title标记是双标记title是开始标记/title是结束标记两者之间的内容为显示在浏览器的标题栏上的信息。 !-- edu_2_2_1.html --
!doctype html
htmlheadmeta charset“UTF-8”title 页面标题 /title/headbody页面标题显示在浏览器的标题栏上 /body
/html运行效果 元信息meta l META 标记用来 描述一个 HTML 网页文档的属性 也称为 元信息 meta-information 这些信息 并不会显示在浏览器的页面中 。例如作者、日期和时间、网页描述、关键词、页面刷新等。 1.meta标记 l 基本语法 meta name content meta http-equiv content l 属性说明 meta属性主要分为两组。 l name 属性与 content 属性 name属性用于描述网页name属性的值所描述的内容(值)通过content属性表示便于搜索引擎机器人查找、分类。其中最重要的是description、keywords和robots。 关键词声明 meta namekeywords contentHTML5, CSS3, JavaScript / 页面描述声明 meta namedescription contentThis is a tutorial about HTML5, CSS3, jQuery / 搜索引擎会根据meta标签中的name和content属性来索引网页。 l http- equiv 属性与 content 属性 http-equiv属性用于提供HTTP协议的响应头报文http-equiv属性的值所描述的内容(值)通过content属性表示通常为网页加载前提供给浏览器等设备使用。 charset提供字符编码信息 refresh刷新与跳转页面 no-cache页面缓存 expires网页缓存过期时间。 主体body 主体body是一个Web页面的主要部分其设置内容是读者实际看到的信息在主体body标记中可以放置的是页面中所有的内容如图片、图像、表格、文字、超链接等元素。 body标记 l 基本语法 body… /body l 语法说明 body是开始标记/body是结束标记。两者之间所包括的内容为网页上显示的信息。 body标记属性 l 设置 body 标记属性可以改变 Web 页面显示效果。 body 标记主要属性有 text 、 bgcolor 、 background 、 link 、 alink 、 vlink 、 topmargin 、 leftmargin 。 l 基本语法 body leftmargin50px topmargin50px text#000000 bgcolor#339999 linkblue alinkwhite vlinkred backgroundbody_image.jpg body标记属性-属性表 body标记属性-颜色表示方法 在网页设计中HTML提供了4种颜色设置方法 l 使用 RGB R G B 其中 R 、 G 、 B 为 0 255 的整数 l 使用 RGB R% G% B% 其中 R 、 G 、 B 为 0 100 的整数 l 使用 3 位或 6 位十六进制数 #RGB 或 #RRGGBB R 、 G 、 B 为十六进制数 例如红色为#FF0000 或者 #F00。 l 使用颜色英文名称 如 red 表示红色 green 表示绿色 blue 表示蓝色等。 br/表示换行hr、hr/表示水平分隔线。 属性语法 l 基本语法 标记名称 属性1“属性值1” 属性2“属性值2” … 属性n属性值n l 基本语法 属性应在开始标记首标记内定义并且和标记名之间有一个空格分隔。 hr size3 colorred aligncenter 注释 HTML代码中添加注释的方法有2种 l !-- 注释信息 -- l comment 注释信息 /comment 1.!-- 注释信息 -- l 基本语法 !-- 显示一个段落 -- l 语法说明 以左尖括号和感叹号组合开始!--以右尖括号--结束。 2.comment /comment标记 l 基本语法 comment显示一个段落/comment l 语法说明 comment标记是成对标记以comment开始以/comment结束。标记包围的信息为注释内容,但在高版本的浏览器中均显示在页面上建议不使用此注释标记。 comment显示一个段落/comment HTML文档命名规则 l 1. 文档的扩展名为 html 或者 htm 建议统一用 html 作为文件名的后缀。 l 2. 文档名中只可由英文字母、数字或下划线组成建议以字母或下划线开始。 l 3. 文档名中不能包含特殊符号如空格、 $ 、 等。 l 4. 文档名区分大小写。 l 5.Web 服务器 主页 一般是 index.html 或 default.html 。 HTML文档类型 !DOCTYPE标记 l 基本语法 !DOCTYPE element-name DTD-type DTD-name DTD-url l 语法说明 !DOCTYPE :表示开始声明DTDDocument Type Definition文档类型定义其中DOCTYPE是关键字。 element-name:指定该DTD的根元素名称。PUBLIC表示是标准公用的SYSTEM则表示私人制定的。 DTD-name:指定该DTD的文件名称。 DTD-url:指定该DTD文件所在的URL地址。 HTML5的DTD定义!doctype html HBuilder软件 我们的操作平台是这个软件需要安装包的佬佬来私信Q喵喵。 使用前奏 上来先建立一个文件夹用来放你建立的项目方便你找它。 然后就i是创建项目 在DW中创建一个名为“mysite_2”的项目站点 操作步骤如下 打开HBuilder软件选择文件/新建/项目在打开的对话框中选择“普通项目”选择网站的保存路径将站点名称命名为mysite_2选择“空项目”模板。单击创建按钮创建项目完成。 创建HTML 整出来就这样就可以开始做题喽吼吼吼 课后习题 来来来上链接都别跑,喵~ 制作美家装饰产品简介首页 网页使用的字符集为utf-8网页主体内容显示如下图所示“产品介绍”为标题二。网页的内容描述为美家装饰销售产品近30种注册用户遍及全国32个省市自治区和直辖市。我们的宗旨是“温馨家庭美家开始”。该网页的关键字为美家装饰网上购物在线支付电子商务网页标题为美家装饰产品介绍 !DOCTYPE html
htmlheadmeta charsetutf-8metatitle美家装饰产品介绍/title/head meta namekeywordscontent美家装饰网上购物在线支付电子商务/bodyh1产品简介/h1p 本公司主要生产橱柜、桌椅、卧室床、阶梯椅、剧场椅、屏风、办公家具等各类产品:使用于家庭、政府机关、学校、宾馆、酒店、医院、银行等公司拥有高校的团队科学的管理先进的设备完美的设计结合优质的材料
........./p/body
/html应用元信息meta标记。 网页使用的字符集为utf-8网页的显示效果如下图所示网页的作者信息为www.edu.cn网页的内容描述为中国教育网中国教育和科研计算机网是中国最权威的教育门户网站是了解中国教育的对内、对外窗口。网站提供关于中国教育、科研发展、教育信息化、CERNET等新闻动态、最新政策并提供教师招聘、高考信息、考研信息、教育资源、教育博客、教育黄页等全面多样的教育服务。该网页的关键字为中国教育网,中国教育,科研发展,教育信息化,CERNET,CERNET2,下一代互联网,人才,人才服务,教师招聘,教育资源,教育服务,教育博客,教育黄页,教育新闻,教育资讯网页标题为中国教育和科研计算机网CERNET !DOCTYPE html
htmlheadmeta charsetUTF-8title中国教育和科研计算机网CERNET/titlemeta namekeywords content中国教育网,中国教育,科研发展,教育信息化,CERNET,CERNET2,下一代互联网,人才,人才服务,教师招聘,教育资源,教育服务,教育博客,教育黄页,教育新闻,教育资讯meta namedescription content中国教育网中国教育和科研计算机网是中国最权威的教育门户网站是了解中国教育的对内、对外窗口。网站提供关于中国教育、科研发展、教育信息化、CERNET等新闻动态、最新政策并提供教师招聘、高考信息、考研信息、教育资源、教育博客、教育黄页等全面多样的教育服务。meta namecopyright contentwww.edu.cnmeta nameauthor contentwww.edu.cn/headbody这是中国教育和科研计算机网的头部部分标记的应用/body
/html 熟悉body元素属性的使用。
网页的显示效果如下图所示 !DOCTYPE html
htmlheadmeta charsetutf-8titlebody属性应用/titlemeta namegenerator contentHBuilderXmeta nameauthor content储久良stylediv{background: #99cccc;width: 500px;height: 150px;}/style/headbody text#000 bgcolor#f0f0f0 background link#00ff00 alinkwhite vlinkred topmargin60px leftmargin60pxdiv id classp欢迎访问我们的站点我们为您提供网站地图。/p网站导航a hrefhttp://www.baidu.com百度/aa hrefhttp://www.163.com网易/aa hrefhttp://wwww.sina.com.cn新浪/aa hrefhttp://www.sohu.com.cn搜狐/a/div/body
/html 熟悉文本修饰标记的应用。记一下还是很实用的
网页的显示效果如下图所示 !DOCTYPE html
htmlheadmeta charsetutf-8title文本修饰标记应用/titlestyle*{text-align: center;}/*所有标记的内容居中显示*//style/headbodyh3 aligncenter文本修饰标记应用/h3hr size2 colorred!--修饰标记应用--b软件工程专业全国就业最好/bbri软件工程专业全国就业最好/ibru软件工程专业全国就业最好/ubrdel软件工程专业全国就业最好/delbrXsup2/sup2X50brXsub1/sub2brsmall软件工程专业全国就业最好/smallbrbig软件工程专业全国就业最好/bigbrstrong软件工程/strongem软件工程/em/body
/html 熟悉拼音注释及段落缩进标记的应用。
网页的显示效果如下图所示 !DOCTYPE html
htmlheadmeta charsetutf-8title注释与块引用标记的应用/titlestyleruby{font-size: 58px; font-family: 黑体; text-align: center;}/style/headbodyh5注释ruby标记-标注读音/h5p aligncenterruby智rtzhì/rt慧rthuì/rt地rtdì/rt球rtqiú/rt/ruby/ph5段落缩进标记的应用/h5hr colorgreenp这行文字没有缩进/pblockquote这行文字行首缩进5个字符的位置/blockquoteblockquoteblockquote这行文字行首缩进10个字符的位置/blockquote/blockquote/body
/html 制作“教育信息化十三五规划报告”网页界面。 网页使用的字符集为utf-8网页标题为教育信息化十三五规划报告网页主体中第一行为文字为二级标题第一条水平分隔线宽100%高3红色第二、三条水平分隔线宽100%高1颜色#000fff“报告导读”和“郑重声明”为四级标题其余效果参看下图所示 !DOCTYPE html
htmlheadmeta charsetutf-8title教育信息化十三五规划报告/title/headbodyh2 aligncenter2016-2021年教育信息化行业深度分析及“十三五”发展规划指导报告/h2hr width100% size3 colorredpre细分报告教育信息化市场研究报告 教育信息化市场调查报告 教育信息化前景预测报告教育信息化市场分析报告 教育信息化市场评估报告 教育信息化重点企业报告教育信息化发展前景报告 教育信息化投资规划报告 教育信息化深度研究报告教育信息化投资前景报告 教育信息化项目调研报告/prehr width100% size1 color#000fffh4报告导读/h4pnbsp;nbsp;nbsp;nbsp;本报告从国际教育信息化发展、国内教育信息化政策环境及发展、研发动态、进出口情况、重点生产企业、存在的问题及对策等多方面多角度阐述了教育信息化市场的发展并在此基础上对教育信息化的发展前景做出了科学的预测最后对教育信息化投资潜力进行了分析。/ph4郑重声明/h4blockquote本报告由中国报告大厅出版发行报告著作权归宇博智业所有。本报告是宇博智业的研究与统计成果有偿提供给购买报告的客户使用。未获得宇博智业书面授权任何网站或媒体不得转载或引用否则宇博智业有权依法追究其法律责任。如需订阅研究报告请直接联系本网站以便获得全程优质完善服务。/blockquotehr width100% size1 color#000fffp aligncenterCopyrightcopy;中国报告大厅 京ICP备11010674号-2 京公网安备11010502024380/p/body
/html 主体内容参照下图所示该网页的具体要求为 字符集utf-8网页标题美家装饰服务指南网页关键字美家装饰服务指南网页内容描述美家装饰销售产品近30种注册用户遍及全国32个省市自治区和直辖市。我们的宗旨是“温馨家庭美家开始”。网页主体内容“服务指南”为一级标题其余标题为二级标题。“服务宗旨”为微软雅黑、5号、红色字体。水平分隔线颜色为#FF6600其余效果参看下图所示 !DOCTYPE html
htmlheadmeta charsetutf-8title美家装饰服务指南/titlemeta namekeywords content美家装饰销售产品近30种注册用户遍及全国32个省市自治区和直辖市。我们的宗旨是温馨家庭美家开始。/headbodyh1 aligncenterruby服rtfú/rt务rtwù/rt指rtzhǐ/rt南rtnǎn/rt/ruby/h1hr color#ff6600h2拍下的商品想要退货退款怎么办/h2pnbsp;nbsp;nbsp;nbsp;我想要购买本店的商品想咨询一下拍下的商品申请退货退款的流程。/ph2解决方案/h2pnbsp;nbsp;nbsp;nbsp;A活动期间成功付款的所有活动商品不支持7天无理由退换货。如果消费者有退换货需求在符合《美家装饰处理规范》的相关规定的情况下所有活动商品只支持退货不支持换货交易双方另有约定的从其约定。/ppnbsp;nbsp;nbsp;nbsp;B非活动期间成功付款的所有交易按照正常退货退款流程处理查看如何申请退款。/ph2font face微软雅黑 color#FF0000 size5服务宗旨/font/h2blockquote服务宗旨br/卓越品质br/服务创新br/文化传承/blockquotehr color#FF6600/p aligncenterCopyright copy; 2017 ICP备10011111号/p/body
/html !DOCTYPE html
htmlheadmeta charsetutf-8title传统美德故事:铁杵磨成针/titlestylediv {text-align:center;}p {text-align: left;text-indent: 2em;margin: 3px;}strong,em {color: red;}img{height: 300px;}/style /headbody bgcolor#FEFEFE leftmargin100px rightmargin100px h2 aligncenter传统美德故事:铁杵磨成针/h2 hr size1 colorred width100%/div id class div styletext-align: center;img srcimage-2-8-1.jpg /divp唐朝大诗人李白小时候不喜欢读书。一天乘老师不在屋悄悄溜出门去玩儿。他来到山下小河边见一位老婆婆在石头上磨一根铁杵。李白很纳闷上前问“老婆婆您磨铁杵做什么”老婆婆说“我在磨针。”李白吃惊地问“哎呀铁杵这么粗大怎样能磨成针呢”老婆婆笑呵呵地说“只要天天磨铁杵总能越磨越细还怕磨不成针吗” /p p聪明的李白听后想到自己心中惭愧转身跑回了书屋。从此他牢记strong“只要功夫深铁杵磨成针”/strong的道理发奋读书最后成为有名的大诗人。/p pemu“书山有路勤为径学海无涯苦作舟”/u /em。中华民族自强不息的精神在勤奋读书方面表现得格外突出。不论是善于治国的政治家还是胸怀韬略的军事家不论是思维敏捷的思想家还是智慧超群的科学家他们之所以在事业上不同凡响都是与他们从小的远大抱负分不开的。俗话说“有志者立常志无志者常立志”立志贵在少年。 /p hr size1 colorred width100%/ /div /body
/html 总结 介绍了HTML文件的基本结构。HTML文档包含3个主要标记其中 l html/html 分别表示一个 HTML 文件的开始和结束 l head/head 分别表示文件头部的开始和结束 l body/body 分别表示文件主体的开始和结束。 body标记常用属性有 text、bgcolor、background、link、vlink、alink、topmargin、leftmargin等。 希望你开心希望你健康希望你幸福希望你点赞 最后的最后关注喵关注喵关注喵大大会看到更多有趣的博客哦 喵喵喵你对我真的很重要
