I hope you are happy, I hope you are healthy, I hope you are happy, I hope you like it!
Finally, follow meow, follow meow, follow meow, you will see more interesting blogs! ! !
Meow meow meow, you are really important to me!
Table of contents
body tag attributes-attribute table
Body tag attribute-color representation method
Represents a horizontal dividing line.
Make the homepage of Meijia Decoration Product Introduction
Applies meta information meta tags.
Be familiar with the use of body element attributes.
Be familiar with the application of text modification tags. (Remember it, it’s still very practical)
Be familiar with the application of pinyin annotations and paragraph indentation marks.
Create a web interface for the "Thirteenth Five-Year Plan Report on Educational Informatization".
Preface
This is another piece of computer basics. Come on, come on, come on, let’s get started! Meow~
Content source books
This column is based on this book.
Summary
"Web Front-end development technology " is an important technology that software engineering majors should master. Development core courses for engineering majors.Web front-end development technology is the process of creating a web interface to present to users , realizing user interface interaction of Internet products (< a i=3>Web Front-end development).Web Front end opening technology Main inclusion HTML , < /span> AJAX< /span>, etc.) ) basis. JSP), opening technology (back end and other reported technologies. At the same time, it is also the clothing equipment end (jQuery, , JavaScript, CSS
HTMLBasic wall
HTMLtext structure
basic structure
HTML The document consists of head head and body body It consists of two parts. In the head <head> tag, you can define titles, styles, etc.; in the body <body> In the tag, elements such as paragraphs, title words, hyperlinks, scripts, tables, forms, etc. can be defined. The main content is the information to be displayed on the web page.<html>
<head></head>
<body></body>
</html>
<!doctype html>//文档类型 <html>//开始标签 html元素 <head> <meta charset=“UTF-8”> <title>网页标题</title> </head> <body> <p align=“center”>主体内容</p>//align属性 </body> </html>//结束标签
头部<head>
l HTML The header tag of the document mainly includes page title tag, meta information tag, style tag, script tag, link tag, etc. The information contained in the header tag is generally not displayed on the web page.Page title<title> </title>
l Basic language<title>Title information is displayed on the browser's title bar</title>
l 语法说明title tag is a double tag, <title> is a start tag, </title> is the closing tag, and the content between the two is the information displayed on the title bar of the browser.
<!-- edu_2_2_1.html --> <!doctype html> <html> <head> <meta charset=“UTF-8”> <title> 页面标题 </title> </head> <body> 页面标题显示在浏览器的标题栏上 </body> </html>running result
Original information<meta>
The l META tag is used to describe a HTML< /span> . For example, author, date and time, web page description, keywords, page refresh, etc. will not be displayed on the browser page), this informationmeta-information (meta-information, also called Attributes of web documents1.<meta>label
l Basic Language<meta name="" content="">
<meta http-equiv="" content="">
l Attribute descriptionmetaAttribute main divisions.
l name attribute content attributeThe name attribute is used to describe a web page, name the content described by the value of the attributecontent and keywords, description represent, which is convenient for search engine robots to find and classify. The most important of them are Attributespass)value(
Keyword declaration
<meta name="keywords" content="HTML5, CSS3, JavaScript" />
Page description statement
<meta name="description" content="This is a tutorial about HTML5, CSS3, jQuery" />
搇歾中的中name和contentAttribute to index 网页.
l http- equiv 属性与 content 属性The http-equiv attribute is used to provide the HTTP protocol The response header message of the http-equiv attribute describes the content(value)passcontentAttribute representation, usually provided to browsers and other devices before the web page is loaded.
charsetprovides character encoding information,
refreshRefresh and jump the page,
no-cachePlease save the page,
expiresWeb page cache expiration time.
bodybody
Bodybody is the main part of aWeb page , the setting content is the information actually seen by the reader. What can be placed in the bodybody tag is all the content on the page, such as pictures, images, Elements such as tables, text, hyperlinks, etc.
bodylabel
l Basic language<body>… </body>
l 语法说明＜body> is the start tag, ＜/body> is the closing tag. The content included between the two is the information displayed on the web page.
bodylabel attribute
l Configuration body Registration attribute change Web< /span> text, bgcolor, background, link, alink, vlink, topmargin,leftmargin. body The results shown on the screen.l Basic language:<body leftmargin="50px" topmargin="50px"
text="#000000" bgcolor="#339999"
link="blue" alink="white" vlink="red"
background="body_image.jpg">
bodylabel attribute-attribute table
bodylabel attribute-face color display method
In web design, HTML provides4 How to set colors:
l use RGB ( R , G , B ), among them B integer; 255～0为, G, Rl use RGB ( R% target integer;100〜0为 B, G, R), Among themB%, G% ,l use 3 position 6 Sixteenth system numberB, G, R,#RRGGBBor#RGB Sixteenth placeExample: 纺colored为#FF0000 #F00 .
l Used color English name ，Like red display Red, green display green, blue display blue, etc.
<br/>Display line,<hr>,<hr/>Display horizontal separation line.
Property syntax
l Basic language<Name attribute1=“Attribute name1” Attribute2=“Attribute 值2” … n">Attributes〼n="Attributes
l Basic languageThe attribute should be defined within the opening tag (first tag) and separated from the tag name by a space.
<hr size="3" color="red" align="center">
Comment
HTMLThere are2 ways to add comments in the code:
l <!-- Notes -->l <comment> 注释信息 </comment>1.<!-- Notes -->
l Basic language<!-- Show one paragraph -->
l 语法说明starts with a left angle bracket and an exclamation mark (<!--) and ends with a right angle bracket (-->) end.
2.<comment> </comment>标记
l Basic language<comment>Display a paragraph</comment>
l 语法说明comment tags are paired tags, starting with <comment> and ending with , < /span>. It is recommended not to use this comment tag, but it is displayed on the page in higher version browsers,End. The information surrounded by tags is comment content</comment>
<comment>Show a paragraph</comment>
HTMLDocument Naming Rules
l 1. Literature's exhibition name html htm 、 Construction one use html After writing the subject.l 2. The document name can only consist of English letters, numbers or underscores. It is recommended to start with letters or underscores.l 3. Bunka name middle impossible inclusion special sign, nuvacative case, $ etc. & ,l 4. Text name division large and small copy.l 5.Web Clothing equipment Main page General policy< /span> . default.htmlor index.html
HTMLText type
<!DOCTYPE>Sign
l Basic language<!DOCTYPE element-name DTD-type DTD-name DTD-url>
l 语法说明<!DOCTYPE >: indicates the beginning of the declarationDTD (Document Type DefinitionDocument type definition), whereDOCTYPE is the keyword.
element-name:Specifies the root element name of thisDTD. PUBLIC means that it is a public standard, and SYSTEM means that it is privately developed.
DTD-name:Specified nameDTD subject name.
DTD-url:specifiedDTDtext locationURLLand.
HTML5targetDTDdefined：<!doctype html>
HBuilderSoftware
Our operating platform is this software. If you need to install the package, please send a private message to Q Miaomiao.
Use prelude
First, create a folder to store the project you created so that you can find it easily.
Then just create the project:
Create a project site named "mysite_2" in DW
The steps are as follows:
Open the HBuilder software, select File/New/Project, in the opened dialog box, select "Normal Project", select the website Save the path and name the site as: mysite_2, Select" empty Project"template. Click the Create button to complete the project creation.
Create HTML
That's it, you can start doing the questions, ho ho ho!
After-school exercises
Come on, come on, link up! ! ! Don't run away, meow~
Make the homepage of Meijia Decoration Product Introduction
- The character set used by the web page is: utf-8
- The main content of the web page is displayed as shown in the figure below, with "Product Introduction" as the second title.
- The content of the web page is described as: Meijia Decoration sells nearly 30 types of products, with registered users in 32 provinces, cities, autonomous regions and municipalities across the country. Our aim is "A warm family begins with a beautiful home".
- The keywords of this webpage are: Meijia decoration, online shopping, online payment, e-commerce
- The title of the webpage is: Introduction to Meijia Decoration Products
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta>
<title>美家装饰产品介绍</title>
</head>
<meta name="keywords"content="美家装饰，网上购物，在线支付，电子商务"/>
<body>
<h1>产品简介</h1>
<p> 本公司主要生产橱柜、桌椅、卧室床、阶梯椅、剧场椅、屏风、办公家具等各类产品:使用于家庭、政府机关、学校、宾馆、酒店、医院、银行等，公司拥有高校的团队，科学的管理，先进的设备，完美的设计，结合优质的材料，
.........</p>
</body>
</html>
Applies meta information meta tags.
- The character set used by the web page is: utf-8
- The display effect of the web page is as shown below:
- The author information of the web page is: www.edu.cn
- The content of the webpage is described as: China Education Network (China Education and Scientific Research Computer Network) is China's most authoritative education portal and a window to understand Chinese education internally and externally. The website provides news and latest policies on China's education, scientific research development, educational informatization, CERNET, etc., and provides comprehensive and diverse educational services such as teacher recruitment, college entrance examination information, postgraduate entrance examination information, educational resources, education blogs, and education yellow pages.
- The keywords of this webpage are: China Education Network, China Education, Scientific Research and Development, Education Informatization, CERNET, CERNET2, Next Generation Internet, Talents, Talent Services, Teacher Recruitment, Educational Resources, Educational Services, Educational Blog, Educational Yellow Pages, Education News, educational information
- The title of the webpage is: China Education and Scientific Research Computer Network CERNET
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>中国教育和科研计算机网CERNET</title>
<meta name="keywords" content="中国教育网,中国教育,科研发展,教育信息化,CERNET,CERNET2,下一代互联网,人才,人才服务,教师招聘,教育资源,教育服务,教育博客,教育黄页,教育新闻,教育资讯">
<meta name="description" content="中国教育网（中国教育和科研计算机网）是中国最权威的教育门户网站，是了解中国教育的对内、对外窗口。网站提供关于中国教育、科研发展、教育信息化、CERNET等新闻动态、最新政策，并提供教师招聘、高考信息、考研信息、教育资源、教育博客、教育黄页等全面多样的教育服务。">
<meta name="copyright" content="www.edu.cn">
<meta name="author" content="www.edu.cn">
</head>
<body>
这是中国教育和科研计算机网的头部部分标记的应用
</body>
</html>Be familiar with the use of body element attributes.
The display effect of the web page is as shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>body属性应用</title>
<meta name="generator" content="HBuilderX">
<meta name="author" content="储久良">
<style>
div{background: #99cccc;
width: 500px;
height: 150px;}
</style>
</head>
<body text="#000" bgcolor="#f0f0f0" background="" link="#00ff00" alink="white" vlink="red" topmargin="60px" leftmargin="60px">
<div id="" class="">
<p>欢迎访问我们的站点，我们为您提供网站地图。</p>
网站导航：
<a href="http://www.baidu.com">百度</a>
<a href="http://www.163.com">网易</a>
<a href="http://wwww.sina.com.cn">新浪</a>
<a href="http://www.sohu.com.cn">搜狐</a>
</div>
</body>
</html>Be familiar with the application of text modification tags. (Remember it, it’s still very practical)
The display effect of the web page is as shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本修饰标记应用</title>
<style>
*{text-align: center;}/*所有标记的内容居中显示*/
</style>
</head>
<body>
<h3 align="center">文本修饰标记应用</h3>
<hr size="2" color="red">
<!--
修饰标记应用
-->
<b>软件工程专业全国就业最好！</b><br>
<i>软件工程专业全国就业最好！</i><br>
<u>软件工程专业全国就业最好！</u><br>
<del>软件工程专业全国就业最好！</del><br>
X<sup>2</sup>+2X+5=0<br>
X<sub>1</sub>=2<br>
<small>软件工程专业全国就业最好！</small><br>
<big>软件工程专业全国就业最好！</big><br>
<strong>软件工程！</strong>
<em>软件工程！</em>
</body>
</html>Be familiar with the application of pinyin annotations and paragraph indentation marks.
The display effect of the web page is as shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注释与块引用标记的应用</title>
<style>
ruby{font-size: 58px; font-family: 黑体; text-align: center;}
</style>
</head>
<body>
<h5>注释ruby标记-标注读音</h5>
<p align="center">
<ruby>
智<rt>zhì</rt>
慧<rt>huì</rt>
地<rt>dì</rt>
球<rt>qiú</rt>
</ruby>
</p>
<h5>段落缩进标记的应用</h5>
<hr color="green">
<p>这行文字没有缩进</p>
<blockquote>这行文字行首缩进5个字符的位置</blockquote>
<blockquote><blockquote>这行文字行首缩进10个字符的位置</blockquote></blockquote>
</body>
</html>Create a web interface for the "Thirteenth Five-Year Plan Report on Educational Informatization".
- The character set used by the web page is: utf-8
- The title of the webpage is: Education Informatization 13th Five-Year Plan Report
- In the main body of the web page, the first line of text is the secondary title.
- The first horizontal dividing line has a width of 100%, a height of 3, and is red.
- The second and third horizontal dividing lines have a width of 100%, a height of 1, and a color of #000fff.
- “Report Introduction” and “Solemn Statement” are fourth-level headings
- The rest of the effects are shown in the figure below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>教育信息化十三五规划报告</title>
</head>
<body>
<h2 align="center">2016-2021年教育信息化行业深度分析及“十三五”发展规划指导报告</h2>
<hr width="100%" size="3" color="red">
<pre>
细分报告：教育信息化市场研究报告 教育信息化市场调查报告 教育信息化前景预测报告
教育信息化市场分析报告 教育信息化市场评估报告 教育信息化重点企业报告
教育信息化发展前景报告 教育信息化投资规划报告 教育信息化深度研究报告
教育信息化投资前景报告 教育信息化项目调研报告
</pre>
<hr width="100%" size="1" color="#000fff">
<h4>报告导读</h4>
<p> 本报告从国际教育信息化发展、国内教育信息化政策环境及发展、研发动态、进出口情况、重点生产企业、存在的问题及对策等多方面多角度阐述了教育信息化市场的发展，并在此基础上对教育信息化的发展前景做出了科学的预测，最后对教育信息化投资潜力进行了分析。</p>
<h4>郑重声明</h4>
<blockquote>本报告由中国报告大厅出版发行，报告著作权归宇博智业所有。本报告是宇博智业的研究与统计成果，有偿提供给购买报告的客户使用。未获得宇博智业书面授权，任何网站或媒体不得转载或引用，否则宇博智业有权依法追究其法律责任。如需订阅研究报告，请直接联系本网站，以便获得全程优质完善服务。</blockquote>
<hr width="100%" size="1" color="#000fff">
<p align="center">Copyright©中国报告大厅 京ICP备11010674号-2 京公网安备11010502024380</p>
</body>
</html>The main content is shown in the figure below. The specific requirements of this web page are:
- Character set:utf-8
- Web page title: Meijia Decoration Service Guide
- Web page keywords: Meijia decoration, service guide
- Web page content description: Meijia Decoration sells nearly 30 types of products, with registered users in 32 provinces, cities, autonomous regions and municipalities across the country. Our aim is "A warm family begins with a beautiful home".
- The main content of the web page: "Service Guide" is the first-level heading, and the other headings are second-level headings. "Service Purpose" is Microsoft Yahei, size 5, and red font.
- The horizontal divider color is #FF6600
- The rest of the effects are shown in the figure below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>美家装饰服务指南</title>
<meta name="keywords" content="美家装饰销售产品近30种，注册用户遍及全国32个省，市，自治区和直辖市。我们的宗旨是'温馨家庭，美家开始'。">
</head>
<body>
<h1 align="center">
<ruby>服<rt>fú</rt>务<rt>wù</rt>指<rt>zhǐ</rt>南<rt>nǎn</rt></ruby>
</h1>
<hr color="#ff6600">
<h2>拍下的商品想要退货退款怎么办？</h2>
<p> 我想要购买本店的商品，想咨询一下拍下的商品申请退货退款的流程。</p>
<h2>解决方案</h2>
<p> A：活动期间成功付款的所有活动商品，不支持7天无理由退换货。如果消费者有退换货需求，在符合《美家装饰处理规范》的相关规定的情况下，所有活动商品只支持退货，不支持换货，交易双方另有约定的从其约定。</p>
<p> B：非活动期间成功付款的所有交易，按照正常退货退款流程处理，查看如何申请退款。</p>
<h2><font face="微软雅黑" color="#FF0000" size="5">服务宗旨</font></h2>
<blockquote>服务宗旨<br/>
卓越品质<br/>
服务创新<br/>
文化传承</blockquote>
<hr color="#FF6600"/>
<p align="center">Copyright © 2017 ICP备10011111号</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>传统美德故事:铁杵磨成针</title>
<style>
div {text-align:center;}
p {
text-align: left;
text-indent: 2em;
margin: 3px;
}
strong,em {color: red;}
img{height: 300px;}
</style>
</head>
<body bgcolor="#FEFEFE" leftmargin="100px" rightmargin="100px">
<h2 align="center">传统美德故事:铁杵磨成针</h2>
<hr size="1" color="red" width="100%"/>
<div id="" class="">
<div style="text-align: center;">
<img src="image-2-8-1.jpg">
</div>
<p>唐朝大诗人李白，小时候不喜欢读书。一天，乘老师不在屋，悄悄溜出门去玩儿。他来到山下小河边，见一位老婆婆，在石头上磨一根铁杵。李白很纳闷，上前问：“老婆婆，您磨铁杵做什么？”老婆婆说：“我在磨针。”李白吃惊地问：“哎呀！铁杵这么粗大，怎样能磨成针呢？”老婆婆笑呵呵地说：“只要天天磨铁杵总能越磨越细，还怕磨不成针吗？” </p>
<p>聪明的李白听后，想到自己，心中惭愧，转身跑回了书屋。从此，他牢记<strong>“只要功夫深，铁杵磨成针”</strong>的道理，发奋读书，最后成为有名的大诗人。</p>
<p><em><u>“书山有路勤为径，学海无涯苦作舟”</u> </em>。中华民族自强不息的精神，在勤奋读书方面表现得格外突出。不论是善于治国的政治家，还是胸怀韬略的军事家；不论是思维敏捷的思想家，还是智慧超群的科学家，他们之所以在事业上不同凡响，都是与他们从小的远大抱负分不开的。俗话说：“有志者立常志，无志者常立志”，立志，贵在少年。 </p>
<hr size="1" color="red" width="100%"/>
</div>
</body>
</html>Summarize
InterpretationHTMLBasic sentence structure. HTMLtext inclusion3Main title, inside:
l <html></html> represents one HTML The beginning and end of the filel <head></head> represents the beginning and end of the file header respectivelyl <body></body> represents the beginning and end of the file body respectively.bodyCommonly used attributes of tags include:
text、bgcolor、background、link、vlink、alink、topmargin、leftmargin等。
I hope you are happy, I hope you are healthy, I hope you are happy, I hope you like it!
Finally, follow meow, follow meow, follow meow, you will see more interesting blogs! ! !
Meow meow meow, you are really important to me!
