Correcting teacher:天蓬老师
Correction status:unqualified
Teacher's comments:作业完成的不错的, 但应该按要求完成, 等全部完成再提交, 并无时限, 先退回了哈
前言:首先非常抱歉,因为目前是上班族,在公司上班,12-19号下午分给我8个项目,20号上午有是2个,两周左右必须上线,客户催得紧,时间赶得紧,手抄本先不写,用代码敲出来大概总结一下,前端html,css基础知识已掌握,在公司每天都在写,因公司项目紧急,时间原因,望体谅
分享两个我最近做的网站吧
海思莱生物科技有限公司
郑州长鑫耐火材料有限公司HTML介绍
HTML 是用来描述网页的一种语言。其英文全称为(Hyper Text Markup Language)
它不能和php,java,c等语言混为一谈,它是一种标记语言
组成为【标签对】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 字符编码,防止乱码 -->
<!-- viewport 进行移动界面自适配,并且禁止用户进行修改适配大小 -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimumscale=1,maximum-scale=1,user-scalable=no" />
<title>INDEX 标题</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 字符编码,防止乱码 -->
<!-- viewport 进行移动界面自适配,并且禁止用户进行修改适配大小 -->
<meta name="viewport" content="width=device-width,initial-scale=1,minimumscale=1,maximum-scale=1,user-scalable=no" />
<title>INDEX 标题</title>
<!-- SEO 常用于搜索引擎可进行模糊搜索到该网站的关键字-->
<meta name="Keywords" content="8-12个以英⽂逗号隔开的单词或词语"/>
<!-- description 是网站的相关介绍 -->
<meta name="Description" content="80字以内的⼀段话,与⽹站内容相关"/>
</head>
<body>
</body>
</html>
<a></a>标签——链接元素
<!-- 1、href 属性 : 链接的文件的url-->
<a href="http://www.php.cn">PHP中文网</a> <!-- 它可以跳转到 http://www.php.cn 网站,前提是链接不能写错 -->
<!-- 2、target 属性 : 打开新网页的方式 _self:当前标签页打开(默认值) _balnk:在一个新标签页打开-->
<a href="http://www.php.cn" target="_self">PHP中文网</a> <!-- 它可以在当前标签页打开目标网站,前提链接不能写错 -->
<a href="http://www.php.cn" target="_blank">PHP中文网</a> <!-- 它可以在新标签页打开目标网站,前提是链接不能写错 -->
<!-- 1、资源下载-->
<a href="xxx.rar/zip">下载</a> <!-- 压缩包格式 -->
<!-- 2、电子邮件链接-->
<a href="mailto:电子邮件地址">发送</a> <!-- 前提是机器中必须装有邮件客户端(Foxmail,outlook,...) -->
<!-- 3、返回页面顶部的空链接-->
<a href="#">返回顶部</a>
<!-- 4、链接到Javascript-->
<a href="javascript:;">JS</a>
<!-- 5、打电话-->
<a href="tel:手机号">打电话</a>
<!-- 6、发短信-->
<a href="sms:手机号">发短信</a>
<!-- 7、链接腾讯QQ-->
<a href="tencent://message/?uin=QQ号&Site=Sambow&Menu=yes">在线聊天</a>
<!-- 8、锚点 作用:在html文档中某个位置处做记号 -->
<!-- 两种方式 -->
一、定义锚点
<!-- 1、任何一个元素的id属性可以作为锚点 -->
<div id="name1"></div>
<!-- 2、a 元素 的 name 属性 -->
<a name="name2"></a>
二、链接到锚点
<a href="#锚点名称">链接到锚点</a>
<a href="页面URL#锚点名称">其他页面锚点</a>
表格由table元素以及一个或多个tr(行标签)、th(表头单元格标签)、td(普通单元格标签)
<table border=1>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</table>
表格还包括caption(表格标题)、col(定义列)、colgroup(对表格中的列进行组合)、thead(组合表头的内容)tbody(组合表格的主题内容)、tfoot(组合表格的脚注内容)
<table width="400" border="1">
<caption>表格的标题</caption>
<col align="left"/>
<col align="left"/>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>脚注1</td>
<td>脚注2</td>
</tr>
</tfoot>
</table>
width:规定表格的宽度
height:规定表格的高度
align属性:规定表格相对周围元素的对齐方式 值分三种:left right center
bgcolor属性:规定表格的背景颜色
colorname:颜色值为颜色名称的背景颜色
background属性:规定表格的背景图像
border属性:规定表格边框的宽度
cellspacing属性:规定单元格之间的间距
cellpadding属性:规定单元格边界与单元格内容之间的间距,默认为0
frame属性:规定外侧边框的那个部分是可见的
colspan属性:规定单元格横跨的列数
valign属性:规定单元格内容的垂直水平对齐方式
nowrap属性:规定单元格内容不换行
以上TABLE属性均为我经常用到的属性
1.src 属性:图片的地址
2.alt 属性:图片不显示是现实的文字
<img src="图片地址" alt="没找到图片时显示得内容" title="鼠标放上去现实的内容">
<form action="提交地址" method="get/post">
<!-- 最常用的类型 文本框类型,下拉列表,多选,单选,文本域 -->
<input type="text" name="text" placeholder="text"> <!-- 文本框类型 -->
<!-- 下拉列表 -->
<select>
<option>————请选择————</option>
<option>————河南————</option>
<option>————山西————</option>
<option>————山东————</option>
</select>
<input type="checkbox" name="checkbox" placeholder="checkbox"> <!-- 多选 -->
<input type="radio" name="radio" placeholder="radio"> <!-- 单选 -->
<!-- 文本域 -->
<textarea>您想说点什么...</textarea>