博客列表 >HTML知识点学习总结--PHP培训十期线上班

HTML知识点学习总结--PHP培训十期线上班

宋明杰
宋明杰原创
2019年12月23日 14:06:40717浏览

1,HTML—标签总结:

A:基本标签;

A1,<header></header>:页眉标签,主要用在页面的开头。页面中允许出现多次,代替并优于传统标签<div class = 'header'>.
A2,<nav></nav>导航标签,用于导航栏,通常由一个或多个<a></>嵌套在列表标签中组成,代替并优于传统标签<div class = 'nav'
A3,<main></main>主体标签,页面主体,强烈建议,一个页面只出现一次。
A4,<footer></footer>页脚标签,在页面的底部,放友情链接,备案号等内容,,。一个页面中允许出现多次。代替<div class = 'footer>
A5,<article></article内容区块,本义是文档标签,实际包括的内容可以是独立的段落,功能区块(列表,表格),导航等。
A6,<aside></aside>附加区块,本义是旁边的,主要设置与主体内容无关的信息,比如广告位,推荐,阅读排行等。
A7,<section></section>重复区块,本义是部分,片段的意思,特指主体中可以重复定义的区块,在功能上与传统的<div>非常像,基本可以互换。
A8,<div></div>布局标签,通用容器,本身无语义,功能主要是通过属性来定义,例如:class = ‘nav’.

B:文本标签;

B1,<p></p>段落内容,独占一行。
B2,<pre></pre>按源码格式原样显示,也就是说,你放在这个标签里面是什么样式,浏览器就显示什么样式。
B3,<br>换行标签
B4,<span></span>无语义,主要用于行内标签。

C,语义话文本标签

C1,<time>描述日期或时间,
C2,<abbr>缩写
C3,<sub>,<sup>上标,下标,
C4,<address>地址,通常用在<footer>标签中,
C5,<s>/<del>删除线,
C6,<code>显示代码块,
C7,<progress>进度条,
C9,<b>/<strong>加粗,
C10,<i>/<em>斜体,
C11,<mark></mark>高亮标记,默认为黄色背景,
C12,<q>/<blokquote>引用标签,内容加双引号,

D,图像标签

<img src= '' alt = ''....>图片使用标签,
属性:
src:图片来源地址,可以是本地,也可以是网络,
alt:图片描述信息,当图片无法显示时,则提示该信息,
width/height:图片大小,一般宽高只设定一个参数,另一个会等比例缩放,

E,链接标签

<a href = "" target = "" title = ""...>链接标签,主要用于页面和锚点的跳转,
属性:
href = “url”,跳转的目标地址,
href = “mailto:2233@qq.com”打开邮件,发送邮件,
href = “tel:139**“会询问用户是否拨打电话,
href = “demo.rar”浏览器不会解析文档,会直接下载,
target = “self”当前窗口打开,
target = “
blank”新窗口打开,
target = “name”指定名称的窗口打开,
target = “#anchor”跳转到锚点所在位置,

F,列表标签,

F1,<ul><li>...</li></ul>>无序列表
F2,<Ol><li>...</li></Ol>>有序列表
F3,<dl><dt>...</dt><dd>...</dd></dl>>自定义列表

实例:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>基本标签</title>
  6. </head>
  7. <body>
  8. <header>
  9. <nav>
  10. <a href = '#'>我的淘宝</a>
  11. <a href = '#'>购物车</a>
  12. <a href = '#'>登陆</a>
  13. <a href = '#'>活动详情</a>
  14. </nav>
  15. </header>
  16. <main>
  17. <h2>主体页面</h2>
  18. <div class = ''>
  19. <h5>今日热点</h5>
  20. <p>页面,页面好的很</p>
  21. </div>
  22. <section>
  23. <span>我爱PHP</span>
  24. <h5>是真的哦</h5>
  25. </section>
  26. <aside>
  27. <h2>侧边栏</h2>
  28. <ul>
  29. <li>
  30. <a href = '#'>广告招商</a>
  31. </li>
  32. <li>
  33. <a href = '#'>广告招商1</a>
  34. </li>
  35. <li>
  36. <a href = '#'>广告招商2</a>
  37. </li>
  38. <li>
  39. <a href = '#'>广告招商3</a>
  40. </li>
  41. </ul>
  42. </aside>
  43. </main>
  44. <footer>
  45. <h2>页脚</h2>
  46. <a href = '#'>友情链接</a>
  47. <span>备案号:
  48. <a href = '#'>3794739473294</a>
  49. </span>
  50. </footer>
  51. </body>
  52. </html>

运行结果:

图片案例:

  1. <img src = 'img/sea1.jpg' alt = '这是' width = '300'>
  2. <img src = 'img/sea15.jpg' alt = '这是码头' width = '300'>

运行结果:

  1. <div>
  2. <h2>有序列表</h2>
  3. <ol>
  4. <li>有序列表1</li>
  5. <li>有序列表2</li>
  6. <li>有序列表3</li>
  7. <li>有序列表4</li>
  8. </ol>
  9. <br />
  10. <h2>无序列表</h2>
  11. <ul>
  12. <li>无序列表1</li>
  13. <li>无序列表2</li>
  14. <li>无序列表3</li>
  15. <li>无序列表4</li>
  16. </ul>
  17. <br />
  18. <h2>定义列表</h2>
  19. <dl>
  20. <dt>PHP中文网</dt>
  21. <dd>这里有:PHP学习</dd>
  22. <dd>这里有:HTML学习</dd>
  23. <dd>这里有:CSS学习</dd>
  24. <dt>电影《冰与火之歌》</dt>
  25. <dd>主演:kdjfklj,dfd </dd>
  26. <dd>几季:8季</dd>
  27. </dl>
  28. </div>

运行结果:

G,表格标签,

表格—数据标签:
G1,<table>定义表格,必选,
G2,<tr>定义表格中的行,必选,
G3,<th>定义表格头部中的单元格,必选,
G4,<td>定义主体中的单元格,必选,
表格—结构标签,
G4,<option>定义表格标题,可选
G5,<thead>定义表格头格,只需定义一次,可选
G6,<tbody>定义表格主体,可多次定义,可选
G7,<tfooter>定义表格底,只需定义一次,可选
表格—常用属性,
G9,border,所属<table>标签,定义:添加表格框,
G10,cellpadding,所属<table>标签,定义:单元格内边距,
G11,cellspacing,所属<table>标签,定义:单元格边框间歇,
G12,align,不限标签,定义:设置单元格内容水平居中,
G13,bgcolor,不限标签,设置背景色,
G14,隔行间色,

实例:

  1. <div>
  2. <table border = '1' cellpadding = '3' cellspacing = '0' align = 'center' width = '600'>
  3. <caption>
  4. <h3>商品销售单</h3>
  5. </caption>
  6. <thead bgcolor = '#FFFF00'>
  7. <th>序号</th>
  8. <th>类别</th>
  9. <th>品名</th>
  10. <th>单价</th>
  11. <th>数量</th>
  12. <th>小计</th>
  13. </thead>
  14. <tbody align = 'center'>
  15. <td>1</td>
  16. <td rowspan = '2'>服装</td>
  17. <td>衣服</td>
  18. <td>5.00</td>
  19. <td>100</td>
  20. <td>500.00</td>
  21. <tr />
  22. <td>2</td>
  23. <td>裤子</td>
  24. <td>5.00</td>
  25. <td>300</td>
  26. <td>1500.00</td>
  27. <tr />
  28. <td>3</td>
  29. <td>电器</td>
  30. <td>手机</td>
  31. <td>5.00</td>
  32. <td>500</td>
  33. <td>250.00</td>
  34. </tbody>
  35. <tbody align = 'center'>
  36. <td colspan = '4'>合计</td>
  37. <td>900</td>
  38. <td>2250.00</td>
  39. </tbody>
  40. </table>
  41. </div>

运行结果:

H,表单标签,

表单元素类型,
H1,<form>,表单容器,所有表单应放在该标签内提交,属性有:action,methdo,
H2,<input>,输入标签,由 type 属性控制输入类型,属性有:type,name,value,placeholder…,
H3,<label>,控件标签,用于控件功能描述与内容关联,属性有:for,
H4,<select>,下拉列表,用于选择预置的输入内容,属性有:name,
H5,<datalist>,预置列表,用于展示预置的内容,属性有:id,与<input list = ''>关联,
H6,<option>,预置选项,与 select,datalist配合使用,属性有:value,label,selected,
H7,<textarea>,文本域,多行文本框,属性有:cols,rows,name…,
H8,<button>,按钮,用于提交表单,属性有:type,name,
公共属性,(并非所有元素都具备)
1,name,元素/控件名称,用做服务器脚步的变量名称,
2,value,提交到服务器端的数据,
3,form,所属表单,与<form name = ''>对应,
4,placeholder,输入框的提示信息,
5,autofocus,页面加载是,自动获取焦点,
6,required,必填/必选项,
7,readonly,该控件内容只读,
8,disabled,是否禁用,

<input>的常用type类型,
1,type = ‘text’,文本框,
2,type = ‘password’,密码框,输入内容显示*,不显示明文,
3,type = ‘radio’,单选按钮,仅允许选择多个默认值中的一个,
4,type = ‘checkbox’,复选框,允许选取多个默认值中的多个,
5,type = ‘hidden’,隐藏域,页面不显示,但数据任会提交,
6,type = ‘file’,文件上传,本地文件上传,有accept,multiple属性,
7,type = ‘submit’,提交按钮,点击后会提交按钮所在的表单,
8,type = ‘reset’,重置按钮,点击后会重置输入控件中的内容为默认值,
9,type = ‘button’,自定义按钮,使用JS脚步定义按钮点击后的行为,

<input>的其他type类型,
1,type = ‘email’,邮箱,输入必需是邮箱格式,
2,type = ‘number’,整数,输入必需是整数,可设置最小,最大范围,
3,type = ‘URL’,URL地址,输入必需是有效的URL格式,
4,type = ‘search’,搜索框,通常与autocomplete配合,
5,type = ‘hidden’,隐藏域,页面不显示,但任会提交数据,
6,type = ‘date’,日期控件
7,type = ‘color’,调色板,可直接选择颜色,
8,type = ‘tel’,电话号码,手机端会弹出数字小键盘,
表单注意事项:
1,添加disabled禁用属性的字段数据不会被提交,但readonly只读属性的字段允许提交。
2,隐藏域的内容不会在HTML页面中显示,但其中的VALUE属性数据会被提交,

I,内联框架与多媒体:

1,<iframe>,内联标签,就是在当前页面中再内嵌另外一个页面,类似画中画,
2,通过<a>/<form>标签的target属性触发和加载,
3,属性,src,被嵌套页面的URL地址。
代码:

  1. <div>
  2. <h3>用户注册</h3>
  3. <form>
  4. <p>
  5. <label for = 'usename'>账号:</label>
  6. <input type = 'text' id = 'usename' placeholder = '请输入电话号码'>
  7. </p>
  8. <p>
  9. <label for = 'password'>密码:</label>
  10. <input type = 'password' id = 'password' placeholder = '请输入6位数字密码'>
  11. </p>
  12. <p>
  13. <label for = 'tel'>电话:</label>
  14. <input type = 'tel' id = 'tel' placeholder = '请输入电话号码'>
  15. </p>
  16. <p>
  17. <label >性别:</label>
  18. <input type = 'radio' name = 'xinbie' id = 'nan' checked><label for = 'nan'></label>
  19. <input type = 'radio' name = 'xinbie' id = 'n'><label for = 'n'></label>
  20. </p>
  21. <p>
  22. <label for = 'xueli'>学历:</label>
  23. <select name = '学历' id = 'xueli'>
  24. <option >小学</option>
  25. <option >中学</option>
  26. <option >大学</option>
  27. </select>
  28. </p>
  29. <p>
  30. <input type = 'submit' value = '注册'>
  31. <input type = 'reset' value = '重置'>
  32. </p>
  33. </form>
  34. </div>

运行结果:

手抄写作业:


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议