超文本标记语言

注释

语义标签，比如h1标题，p表示内容、em用于内容的强调

嵌套关系，即存在的父子关系，这点很重要，页面都是由嵌套组成的

了解了以上前提下，
下面说，他的基本结构
首行:用来声明为html文档

<html lang=zh-CN>非必选 <head>文档说明部分，对搜索引擎提供信息或加载css、js等 <title>页面标题 <body> 页面主题内容 <header> <nav> 设置导航 </nav> </header> <main> 表示页面的主要区域 <article> 规定独立的包含内容的区域 <section> 定义一组相似的排列组合 </section> </article> </main> <aside> 用于设置与主要区域无关的内容，比如侧边的广告 </aside> <footer></footer> </body>

说下容器
div是大家使用最多的容器，不过我们应该倾向于语义明确的标签如：article/section/aside/nav等
有些区域这些语义标签不符合情景，这时候可以使用div来表达，比如轮播图效果的内容

下面对基本标签做下具体的说明

标记一段落的内容

原样显示文本内容，包括空格、换行，很神奇

换行
没有语义的标签，常用于对某些文本特殊控制

描述文本

用于设置描述、声明等文本

标签定义日期、时间

标签用于描述一个缩写的内容，专有词汇等

_{用于数字的下标，如h2O中的2

^{如上

表示删除的内容表示现在的内容

和标签效果一样,效果为:XXXXXX中间化一道横线

用于表示任务的进度

强调文本

用于突出文本内容，类似我们生活中使用的马克笔}}


下面说下重点表单和列表

表单标题

调用摄像头

autocomplete属性，设置为on后，显示出该字段中填写的选项
通过设置type的类型还可指定输入的内容

email：输入邮箱

url: 输入URL地址

password：密码

tel:电话号，移动端会调出数字键盘

hidden：隐藏表单

submit：提交表单

radio:单选

checkbox:多选

file：文件上传,

date:日期与时间，规定step=1 min最小时间 max最大时间

week:周选择，规定step=1周

month：月选择，规定step=1月
另外还可通过pattern指定正则验证，也可以使用各种前端验证库，如validator.js和formvalidator.js
复杂情况下，可使用ueditor、ckeditor等

下拉框，可用于多个值的选择
<select>
<multiple>支持多选
<size>列表框高度
<optgroup>选项组
<selected>选中状态
<option>选项值

datalist表单输入值选项列表
<input type="text" list="lesson">
<datalist id="lesson">
  <option value="PHP">后台管理语言</option>
  <option value="CSS">美化网站页面</option>
  <option value="MYSQL">掌握数据库使用</option>
</datalist>

</form>

下面说下列表
有序列表ol和li
无需列表ul和li
描述列表
<dl>
      <dt></dt>
      <dd></dd>
      <dt></dt>
      <dd></dd>
</dl>

>>>
表格与多媒体
<table>
<caption>标题</caption>
<thead>
<tr>
<th>标题</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>

视频
<video>

</video>
音频
<audio>

</audio>
</tbody>
</table>

posted @ 2021-01-28 14:01 StoBe 阅读(198) 评论(0) 收藏举报

刷新页面返回顶部

StoBe

超文本标记语言

公告