css-html

CSS - HTML

1. 标签

   • 标题标签:h1-h6

   • 水平线:hr

   • 斜体: <em></em>

   • 超链接:<a href=“path” target=“目标窗口位置”>链接文本或图像</a>

     _self:本页面:_blank:新页面

     锚点:<a name=“marker”>乙位置</a><a href="#marker">甲位置</a>

2. 框架

   <iframe src="path" name="mainFrame" frameborder="x" scrolling="yes/no"  width="x" height="y"></iframe>
   

3. 语义标签

   • 区块标签

     article : 一篇博客;一个论坛帖子;一片新闻报道;一个用户论坛

     section : 表示一个主题性的内容分组，通常包含一个头部（header），可能还会有一个尾部（footer）

     nav : 表示页面的导航，可以通过导航连接到网站的其它页面，或当前页面的其它部分。

     aside : 页面的侧边栏;文章引语（内容摘要);广告;友情链接

     header : 一篇文档中可以包含多个header标记,可以为body、article、section、aside标记增加header标记,header标记未必位于页面的顶部

     footer

   • 内容分组标签

     figure : 表示页面中的插图，通常结合figcaption一起使用。

     figcapton

     main

   • 文本级别标签

     time : 表示一个日期、时间，或日期和时间值,可以被搜索引擎、屏幕阅读器等识别。

4. 智能表单

   1. HTML5为了方便排版，可以使Form中的表单元素脱离Form的嵌套

   <form action="" method="post" id="register" >
   </form>
   <input  type="text" name="user" form="register" />
   <button type="submit" form="register" >提交</button>
   

   2. 新增input表单元素类型

   Input表单的type新属性值
   Type=“email”
   Type=“url”
   Type=“date”
   Type=“time”
   Type=“number”
   Type=“range”	产生一个滑动条的表单
   Type=“search”	产生一个搜索意义的表单
   Type=“color”	生成一个颜色选择表单

   <form action="" method="get" enctype="application/x-www-form-urlencoded" name="myform">
       <input type="number" name="number" min=0 max=100 step="5">
       <input type="range" name="range" id="ran" min=0 max=100 step="5" onchange="txt.value=this.value">
       <input type="submit" >
   </form>
   

   3. 新增表单元素属性

   属性	值	说明
   Required	required	表单拥有该属性表示其内容不能为空，必填
   placeholder	提示文本	表单的提示信息，存在默认值将不显示
   Autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
   Pattern	正则表达式	输入的内容必须匹配到指定正则
   autofocus	autofocus	自动聚焦
   novalidate	novalidate	表单不提交

   4. datalist标签实现下拉列表

   <input type="text" name="user_hobby" list="list_hobby">
   <datalist id="list_hobby">
       <option value="1">readme</option>
   </datalist>