前言
前言：首先非常抱歉，因为目前是上班族，在公司上班，12-19号下午分给我8个项目，20号上午有是2个，两周左右必须上线，客户催得紧，时间赶得紧，手抄本先不写，用代码敲出来大概总结一下，前端html，css基础知识已掌握，在公司每天都在写，因公司项目紧急，时间原因，望体谅
分享两个我最近做的网站吧
海思莱生物科技有限公司
郑州长鑫耐火材料有限公司HTML介绍
HTML 是用来描述网页的一种语言。其英文全称为（Hyper Text Markup Language）
它不能和php，java，c等语言混为一谈，它是一种标记语言
组成为【标签对】
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></head><body></body></html>
鉴于SEO优化，其文档结构为
<!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标签：定义一个表格
表格由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 centerbgcolor属性：规定表格的背景颜色colorname:颜色值为颜色名称的背景颜色background属性：规定表格的背景图像border属性：规定表格边框的宽度cellspacing属性：规定单元格之间的间距cellpadding属性：规定单元格边界与单元格内容之间的间距,默认为0frame属性：规定外侧边框的那个部分是可见的colspan属性:规定单元格横跨的列数valign属性:规定单元格内容的垂直水平对齐方式nowrap属性:规定单元格内容不换行
以上TABLE属性均为我经常用到的属性
Img标签（行级元素）
两个重要的属性
1.src 属性：图片的地址2.alt 属性：图片不显示是现实的文字
完整用法：
<img src="图片地址" alt="没找到图片时显示得内容" title="鼠标放上去现实的内容">
form表单（算是预习吧）
输入框类型
<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>
