Blogger Information
Blog 3
fans 0
comment 1
visits 2274
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
191220 html学习总结
艾云技术博客
Original
821 people have browsed it

前言

前言:首先非常抱歉,因为目前是上班族,在公司上班,12-19号下午分给我8个项目,20号上午有是2个,两周左右必须上线,客户催得紧,时间赶得紧,手抄本先不写,用代码敲出来大概总结一下,前端html,css基础知识已掌握,在公司每天都在写,因公司项目紧急,时间原因,望体谅
分享两个我最近做的网站吧
海思莱生物科技有限公司
郑州长鑫耐火材料有限公司

HTML介绍

HTML 是用来描述网页的一种语言。其英文全称为(Hyper Text Markup Language)
它不能和php,java,c等语言混为一谈,它是一种标记语言
组成为【标签对】

HTML基本结构
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8"> <!-- 字符编码,防止乱码 -->
  5. <!-- viewport 进行移动界面自适配,并且禁止用户进行修改适配大小 -->
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimumscale=1,maximum-scale=1,user-scalable=no" />
  7. <title>INDEX 标题</title>
  8. </head>
  9. <body>
  10. </body>
  11. </html>
鉴于SEO优化,其文档结构为
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8"> <!-- 字符编码,防止乱码 -->
  5. <!-- viewport 进行移动界面自适配,并且禁止用户进行修改适配大小 -->
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimumscale=1,maximum-scale=1,user-scalable=no" />
  7. <title>INDEX 标题</title>
  8. <!-- SEO 常用于搜索引擎可进行模糊搜索到该网站的关键字-->
  9. <meta name="Keywords" content="8-12个以英⽂逗号隔开的单词或词语"/>
  10. <!-- description 是网站的相关介绍 -->
  11. <meta name="Description" content="80字以内的⼀段话,与⽹站内容相关"/>
  12. </head>
  13. <body>
  14. </body>
  15. </html>

标签总结

<a></a>标签——链接元素

链接元素:
  1. <!-- 1、href 属性 : 链接的文件的url-->
  2. <a href="http://www.php.cn">PHP中文网</a> <!-- 它可以跳转到 http://www.php.cn 网站,前提是链接不能写错 -->
  3. <!-- 2、target 属性 : 打开新网页的方式 _self:当前标签页打开(默认值) _balnk:在一个新标签页打开-->
  4. <a href="http://www.php.cn" target="_self">PHP中文网</a> <!-- 它可以在当前标签页打开目标网站,前提链接不能写错 -->
  5. <a href="http://www.php.cn" target="_blank">PHP中文网</a> <!-- 它可以在新标签页打开目标网站,前提是链接不能写错 -->
链接表现形式:
  1. <!-- 1、资源下载-->
  2. <a href="xxx.rar/zip">下载</a> <!-- 压缩包格式 -->
  3. <!-- 2、电子邮件链接-->
  4. <a href="mailto:电子邮件地址">发送</a> <!-- 前提是机器中必须装有邮件客户端(Foxmail,outlook,...) -->
  5. <!-- 3、返回页面顶部的空链接-->
  6. <a href="#">返回顶部</a>
  7. <!-- 4、链接到Javascript-->
  8. <a href="javascript:;">JS</a>
  9. <!-- 5、打电话-->
  10. <a href="tel:手机号">打电话</a>
  11. <!-- 6、发短信-->
  12. <a href="sms:手机号">发短信</a>
  13. <!-- 7、链接腾讯QQ-->
  14. <a href="tencent://message/?uin=QQ号&Site=Sambow&Menu=yes">在线聊天</a>
  15. <!-- 8、锚点 作用:在html文档中某个位置处做记号 -->
  16. <!-- 两种方式 -->
  17. 一、定义锚点
  18. <!-- 1、任何一个元素的id属性可以作为锚点 -->
  19. <div id="name1"></div>
  20. <!-- 2、a 元素 的 name 属性 -->
  21. <a name="name2"></a>
  22. 二、链接到锚点
  23. <a href="#锚点名称">链接到锚点</a>
  24. <a href="页面URL#锚点名称">其他页面锚点</a>

table标签:定义一个表格

表格由table元素以及一个或多个tr(行标签)、th(表头单元格标签)、td(普通单元格标签)

基本结构:
  1. <table border=1>
  2. <tr>
  3. <th>表头1</th>
  4. <th>表头2</th>
  5. </tr>
  6. <tr>
  7. <td>内容1</td>
  8. <td>内容2</td>
  9. </tr>
  10. </table>

表格还包括caption(表格标题)、col(定义列)、colgroup(对表格中的列进行组合)、thead(组合表头的内容)tbody(组合表格的主题内容)、tfoot(组合表格的脚注内容)

  1. <table width="400" border="1">
  2. <caption>表格的标题</caption>
  3. <col align="left"/>
  4. <col align="left"/>
  5. <thead>
  6. <tr>
  7. <th>表头1</th>
  8. <th>表头2</th>
  9. </tr>
  10. </thead>
  11. <tbody>
  12. <tr>
  13. <td>内容1</td>
  14. <td>内容2</td>
  15. </tr>
  16. </tbody>
  17. <tfoot>
  18. <tr>
  19. <td>脚注1</td>
  20. <td>脚注2</td>
  21. </tr>
  22. </tfoot>
  23. </table>
还有一些属性如:
  1. width:规定表格的宽度
  2. height:规定表格的高度
  3. align属性:规定表格相对周围元素的对齐方式 值分三种:left right center
  4. bgcolor属性:规定表格的背景颜色
  5. colorname:颜色值为颜色名称的背景颜色
  6. background属性:规定表格的背景图像
  7. border属性:规定表格边框的宽度
  8. cellspacing属性:规定单元格之间的间距
  9. cellpadding属性:规定单元格边界与单元格内容之间的间距,默认为0
  10. frame属性:规定外侧边框的那个部分是可见的
  11. colspan属性:规定单元格横跨的列数
  12. valign属性:规定单元格内容的垂直水平对齐方式
  13. nowrap属性:规定单元格内容不换行

以上TABLE属性均为我经常用到的属性

Img标签(行级元素)

两个重要的属性
  1. 1.src 属性:图片的地址
  2. 2.alt 属性:图片不显示是现实的文字
完整用法:
  1. <img src="图片地址" alt="没找到图片时显示得内容" title="鼠标放上去现实的内容">

form表单(算是预习吧)

输入框类型
  1. <form action="提交地址" method="get/post">
  2. <!-- 最常用的类型 文本框类型,下拉列表,多选,单选,文本域 -->
  3. <input type="text" name="text" placeholder="text"> <!-- 文本框类型 -->
  4. <!-- 下拉列表 -->
  5. <select>
  6. <option>————请选择————</option>
  7. <option>————河南————</option>
  8. <option>————山西————</option>
  9. <option>————山东————</option>
  10. </select>
  11. <input type="checkbox" name="checkbox" placeholder="checkbox"> <!-- 多选 -->
  12. <input type="radio" name="radio" placeholder="radio"> <!-- 单选 -->
  13. <!-- 文本域 -->
  14. <textarea>您想说点什么...</textarea>
Correcting teacher:天蓬老师天蓬老师

Correction status:unqualified

Teacher's comments:作业完成的不错的, 但应该按要求完成, 等全部完成再提交, 并无时限, 先退回了哈
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post