HTML02

后面的内容是分两节课上的,但便于方面查看,我把HTML后面剩的标签全都写在这个文档里面。首先学习了图像和链接,锚点,表格,不规则表格,表格嵌套,结构标记,表单,文本框与密码框,按钮设置。
图像的标签:


hh

链接元素大部分都是<a>:
<a href="" target="">文本</a>
– href 属性:链接 URL – target 属性:
目标,可取值为 _blank、_self 等 – name 属性:锚点名称 <a href="http://www.google.com.hk">To Google</a> <br /> <a href="teacher/teacher.asp" target="_blank"> To other page </a>
alt搜索引擎优化
target 属性有两个值,默认_self,_blank打开一个新的窗口
name属性,作为锚点,可以回到当前标签
下载直接给压缩地址
mailto 调用邮件,发送给后面的对象
定义表格:使⽤用成对的 <table></table>
创建表⾏行:使⽤用成对的 <tr></tr> 标记
创建单元格:使⽤用成对的 <td></td> 标记
表格的常用属性:
<table>元素 – width
设置表格宽度 – height
设置表格高度 – align
设置表格对齐方式(left|center|right) –
border设置表格边框宽度 –
cellpadding设置内边距(单元格边框与内容之间的距离) –
cellspacing设置外边距(单元格之间的距离) –bgcolor设置表格背景颜色
<tr>元素 –
align设置水平对齐方式(left|center|right) –
valign设置垂直对齐方式(top|middle|bottom) <td>元素 –
align设置水平对齐方式(left|center|right) –
valign设置垂直对齐方式(top|middle|bottom) – width设置宽度 –
height,设置高度 –
colspan,设置单元格跨列 –
rowspan,设置单元格跨行
表格标题<caption></caption>
行分组
表格可以划分为3个部分:表头、表主体和表尾
表头行分组:<thead></thead>
表主体⾏行分组:<tbody></tbody>
表尾⾏行分组:<tfoot></tfoot>
不规则表格
设置单元格 <td> 的跨⾏行或者跨列属性
跨列:colspan – ⽔水平⽅方向延伸单元格,值为正整数,代表此单元格⽔水平延伸的单元格数
跨行:rowspan – 垂直⽅方向延伸单元格,值为正整数,代表此单元格垂直延伸的单元格数
结构标记经常使用<div>HTML5为了标记方便通常分为页头部分<div id="herder"></div>
页面的主体部分<div id="main"></div>
页面的结束部分<div id="footer"></div>
表单元素通常用<form></form>标记,表单的控制元素主要有:input元素,textarea元素,select和option元素,
⽂文本框与密码框
文本框:<input type =“text” />
密码框:<input type =“password”/>
主要属性 name:名称
value :由访问者⾃自由输⼊入的任何⽂文本 maxlength :限制输⼊入的字符数
readonly :设置⽂文本控件只读

单选框和复选框
单选框: <input type=“radio”/>
复选框: <input type=“checkbox” />

按钮
提交按钮: <input type=“submit”/>
传送表单数据给服务器端或其它程序处理
重置按钮: <input type=“reset” /> –
清空表单的内容并把所有表单控件设置为最初的默认值 •
普通按钮: <input type=“button” />
用于执行客户端脚本
其他还有<label>元素
选项框有两种:下拉选项框和滚动列表
可能还需要补充的有许多,用的特别不熟,希望自己多练一下,把写出来的,没有写出来的都能运用。下面是用这些标签写的程序:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<table border="1"cellpadding="20" cellspacing="0">
<caption>修改个人信息</caption>
<tr>
<td width="50">姓名:</td>
<td width="300"><input type="text" value="mary"></td>
<td rowspan="7" width="150" valign="top">
<details>
<summary>各项<mark>技能</mark>指数</summary>
<ul type="none">
<li>HTML:<meter max="100" min="0" value="100" title="100%"></meter></li>
<li>CSS3:<meter max="100" min="0" value="90" title="90%"></meter></li>
<li>AJAX:<meter max="100" min="0" value="50" title="50%"></meter></li>
</ul>
</details>

   </td>
  </tr>
  <tr>
    <td>性别:</td>
    <td>
  女士<input type="radio" value="1" name="city">
  男士<input type="radio" value="2" name="city">
    </td>
  </tr>
  <tr>
    <td>学历:</td>
    <td>其他<select name="xueli" size="1" multiple="3"></select></td>
  </tr>
  <tr>
    <td >意向工作城市:</td>
    <td>
    <select name="chengshi" size="5" multiple>
        <option>北京</option>
        <option>上海</option>
        <option>南京</option>
        <option>深圳</option>
      </select>
        </td>
  </tr>
  <tr>
    <td>个人描述</td>
    <td><textarea name="" id="" colos="3" rows="4"></textarea></td>
  </tr>
  <tr>
    <td></td>
    <td>
   <input type="checkbox" name="remeberpassword" id="remeberpassword">
    <label for="remeberpassword">不要公开我的信息</label> 
    </td>
  </tr>
  <tr>
   <td></td>
    <td align="left">  
  
   <input type="submit"="保存">
    <input type="reset">

   </td>
 </tr>
 </table>
 </form>
</body>
</html>

02
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>京东</title>
</head>
<body>
<form>
<div id="header"><img cellspacing src="j01.jpg" alt=""></div>
<table border="1" cellpadding="20" cellspacing="0">
<tr>
<td rowspan="8" width="300"><img width="500" height="500" cellspacing src="j03.jpg" alt=""> </td>
<td width="200"> 用户名/邮箱:</td>
</tr>
<tr>
<td> <input type="text" value="mary@163.com"></td>
</tr>
<tr>
<td>密码</td>
</tr>
<tr>
<td><input type="text" value=""></td>
</tr>
<tr>
<td> <input type="checkbox" name="remeberpassword" id="remeberpassword">
<label for="remeberpassword">自动登陆</label> </td>
</tr>
<tr>
<td align="center">

<input type="submit"="登陆">
  <input type="reset">

</td>

</tr>
<tr>
<td>使用京东合作账号登陆</td>
</tr>
<tr>
<td align="right">
<input type="radio" value="1" name="city" >QQ
<input type="radio" value="2" name="city"
>京东账号
</td>
</tr>
<tr>
<td colspan="2" align="right"> <img cellspacing src="j02.jpg" alt=""></td>
</tr>
</table>
</form>

</body>
</html>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,902评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,037评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,978评论 0 332
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,867评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,763评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,104评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,565评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,236评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,379评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,313评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,363评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,034评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,637评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,719评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,952评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,371评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,948评论 2 341

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,721评论 1 92
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,826评论 3 184
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,219评论 1 41
  • HTML学习笔记(二) 使用列表 使用表格 使用表单 添加多媒体 <a name="1">使用列表</a> ...
    寒桥阅读 678评论 0 1
  • 沈先生啊,一直都是我在对你说,一直都是我一个人的独角戏,我好想听你说话啊,似乎已经很久没有听到你的声音了,可...
    精神脆弱的ABC阅读 302评论 0 0