关于html第二天基础

1、Html标签结构

！+tab 可以写成html5的结构

2、字符编码

Ascll
Ansi
Unicode
Gbk
Gb2321
Big5
Utf-8 通用编码

3.Meta

关键字

    <meta name="keywords" content="苹果,香蕉,西瓜">
    keywords:关键字

网页描述

    <meta name="description" content="文字内容,文字内容">
    description：描述

网页重定向

  <meta http-equiv="refresh" content="5;http://www.baidu.com">
  refresh:刷新

告诉搜索引擎站点的作者

    <meta name="Author" content="你的名字">
    Author:作者的名字

文件检测

  <meta name="Robots" content="all|none|index|noindex|follow|nofollow">
  设定为all：  文件将被检测，且页面上的链接可以被查询；
  设定为none: 文件将不被检测，且页面上的链接不可以被查询；
  设定为index： 文件将被检测；
  设定为follow： 页面上的链接可以被查询；
  设定为noindex: 文件将不被检测，但页面上的链接可以被查询：
  设定为nofollow:  文件将不被检测，页面上的链接可以被查询：

4link标签

调用外部样式

<link rel="styleshsheet" href="1.css">

调用icon图标

<link rel="icon" href="1.ico">

5、表格

用来存放数据，表格对网页重构（css+div）一个有益补充

<table>
<tr>
<td></td>
</tr>
</table>

表格

<table></table>

行

<tr></tr>

列

<td></td>

5.1属性介绍：

边框

border="1"

宽度

width="500"

高度

height="300"

单元格间距

cellspacing="2"   默认值为2

内容到边框的距离

cellpadding="2"

align left | center | right
如果align放到tr或td里，内容的对齐方式，如果放到table里，表格的对齐方式。

5.2背景颜色

bgcolor="red"

表格标题
<th></th> 用法和td一样

<tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>职业</th>
    <th>性别</th>
</tr>

5.3表头

6、表格的标准结构

<table>
<thead></thead>   头部
<tbody></tbody>   主体
<tfoot></tfoot>  底部
</table>

7、单元格合并

colspan="2"    同一行单元格合并

rowspan="3"  同一列单元格合并

7.1像素表格

主要是利用一个像素的单元格间距来实现，将表格背景和行背景设置为不一样的背景颜色，显示的是颜色为表格背景的一个像素的边框。

8表单

<form action="1.php" method="post">
action:处理信息（把文件交给那个文件处理）
method:get | post 传递信息的方法
get:  通过浏览器地址栏传递信息，安全性低
post:  通过action文件来处理文件，安全性高

表单的作用就是用来收集信息的

9、单行文本输入框

<input type="text" name="username" value="123456" maxlength="6" readonly="readonly" disabled="disabled">


name="文本框的名字"
value="文本呢框的值"
maxlength="最多字符的长度"
readonly="readonly"输入框为只读状态
disabled="disabled"输入框未激活状态

10、密码输入框

<input type="password" name="pwd" maxlength="10">

注意单行文本输入框的所有属性对于密码输入框都适用。

11、单选框

  <input type="radio" name="xb" checked="checked">男
  当将单选框name值设置相同的时候，才能实现单选效果
  Checked="checked"

12、下拉列表

  <select>
  <option>下拉列表选项</option>
  <option selected="selected">下拉列表选项</option>
  </select>
Selected="selected"设置下拉列表默认选中项
multiple="multiple"设置下拉列表多选项
<optgroup label="北京市">
<option>朝阳区</option>
<option>昌平区</option>
<option>海淀区</option>
</optgroup>
<optgroup></optgroup>对下拉列表进行分组
label=""  分组名称

18、多选框

  <input type="checkbox">
  checked="checkbox"设置默认选择项

19、多行文本框

  <textarea></textarea>
  cols="50"输入字符的长度
  rows="10"输入字符的行数

20、上传文件控件

  <input type="file">

21.提交按钮

   < input type="submit">
  实现表单提交效果

22.普通按钮

  <input type="button" value="按钮">
  注意普通按钮不能实现表单信息提交，常配合JS使用

23、重置按钮

  <input type="reset" value="重置信息">
  将表单信息初始化

24、图片按钮

  <input type="image" src="图片地址">
  注意：图片阿牛也可以实现表单信息提交

25、表单信息分组

  <fieldest></fieldeset> 对表单信息进行分组
  <legend></legend> 分组名称

26、Html5表单控件

26.1判断网址控件

  <input type="url"/>

26.2判断邮件控件

< input type="email"/>

26.3日期控件

<input type="date"/>

26.4时间控件

<input type="time"/>

26.5数字控件

 <input type="number"/>

26.6滑块控件

<input type="range" max="100" step="5">

27、标签语义化

好的标签语义化网站：
去掉CSS，结构依然很清晰
优势：

注意：

语义化案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

</head>

<body>
<h2>忆江南</h2>

唐.白居易 
 
<p>江南好，风景旧曾谙。(2) 日出江花红胜火，春来江水绿如蓝，(3) 能不忆江南。</p>

<h4>作者介绍</h4>

<p>白居易(772－846) ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。</p>

<h4>注释</h4>

<p>(1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。(2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。</p>

<h4>品评</h4>

<p>此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进 　行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇漾的境界中。
</p>
</body>
</html>

28、表单案例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<fieldset>

<legend>信息注册</legend>

用户名: <input type="text" /><br />

<br />

密　码: <input type="password" />

<br />

<br />

籍贯： <select name="" id="">

<option value="">北京</option>

<option value="">河北</option>

<option value="">山东</option>

<option value="">河南</option>

</select>

<select name="" id="">

<option value="">张家口</option>

<option value="">洛阳</option>

<option value="">西城区</option>

<option value="">济南</option>

</select>

<select name="" id="">

<option value="">中关村</option>

<option value="">上地</option>

<option value="">西二旗</option>

<option value="">西三期</option>

</select>

<br />

<br />

性别: <input type="radio" name="xb" checked="checked" />男 <input type="radio" name="xb"/>女

<br />

<br />

爱好: <input type="checkbox" /> 打篮球

<input type="checkbox" /> 打游戏

<input type="checkbox" /> 逛街

<input type="checkbox" /> 抽烟，喝酒，烫头

<br />

<br />

请上传帅气的头像: <input type="file" />

<br />

<br />

介绍自己: <textarea name="" id="" cols="30" rows="10"></textarea>

<br />

<br />

<input type="submit" value="提交表单"/>

<input type="reset" value="重新填写"/><br />

<br />

<input type="image" src="im.jpg" />

</fieldset>

</body>

</html>

29、细线表格案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

      <!--  <h1>人员信息表</h1> -->
     <!--   <table  width="300"   height="200"  border="1"  cellpadding="0"  cellspacing="0"   align="center">
            
           <caption>人员信息表</caption>

           <tr>
               <th>姓名</th>
               <th>年龄</th>
               <th>专业</th>
           </tr>
            <tr>
               <td>张三</td>
               <td>23</td>
               <td>挖掘机</td>
           </tr>
            <tr>
               <td>李四</td>
               <td>30</td>
               <td>厨师</td>
           </tr>
       </table> -->


<!-- 
       <table  width="300"  height="200" border="1" cellspacing="0">
         <thead>
                <tr>
                    <td>姓名</td>
                     <td>年龄</td>
                       <td>专业</td>
                </tr>
          </thead>
         
          <tbody>
                <tr>
                     <td>张三</td>
                     <td>28</td>
                     <td>前端与移动</td>
                </tr>
                <tr>
                     <td>李四</td>
                      <td>19</td>
                       <td>php</td>
                </tr>
                <tr>
                     <td>狗蛋</td>
                      <td>23</td>
                       <td>阿斯顿发斯蒂芬</td>
                </tr>
          </tbody>
          <tfoot>
              <tr>
                     <td></td>
                      <td></td>
                       <td></td>
                </tr>
          </tfoot>
          
       </table> -->


<!-- 
       <table  width="300" height="200"  border="0" cellspacing="1" bgcolor="grean" >
            <tr bgcolor="white">
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
            </tr>
            <tr bgcolor="white">
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
            </tr>
            <tr bgcolor="white">
                 <td></td>
                 <td></td>
                 <td></td>
                 <td></td>
            </tr>
       </table> -->



       <table width="800"  height="400" border="0" bgcolor="green" cellspacing="1">

            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
       </table>
</body>
</html>

最后编辑于：2017.12.10 13:52:44

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,547评论 6赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,399评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,428评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,599评论 1赞 274
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,612评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,577评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,941评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,603评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,852评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,605评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,693评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,375评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,955评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,936评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,172评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,970评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,414评论 2赞 342