HTML5基础内容

最新推荐文章于 2020-12-06 13:49:03 发布

wait_yin

最新推荐文章于 2020-12-06 13:49:03 发布

阅读量386

点赞数

分类专栏： HTML5 文章标签：前端 HTML5 基础

本文链接：https://blog.csdn.net/QB_yin/article/details/82224017

版权

HTML5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、Web标准的概念及组成

web标准是网页制作的标准，它不是一个标准，它是根据网页的不同组成部分生成的一系列标准。这些标准大部分由W3C起草发布，也有部分标准ECMA起草发布。
W3C（World Wide Wed Consortium）万维网联盟，创建于1994年是web技术领域最具权威和影响力的国际中立性技术标准机构。
行为标准：DOM，ECMASCRIPT（ECMA制定的）欧洲电脑场商联合会。

二、HTML5基本结构

  <!DOCTYPE html>命名文档类型
  <html>说明我们写的标记语言
  <head>文件头部
  <meta charset="utf-8">编码格式
  <title></title>文件标题
  </head>
  <body>
  </body>
  </html>

三、HTML基本语法

1、常规标记

  <标记  属性="属性值"  属性="属性值">  </标记>

2、空标记

  <标记  属性="属性值"  />

四、XHTML常用标记

1、文本标题（h1-h6）

  <h1>一级标题</h1>
  <h2>二级标题</h2>
  ......
  <h6>六级标题</h6>

2、段落（p）

  <p>段落文本内容</p>  标识一个段落（段落之间有间距）

3、空格（）

  所占位置没有一个确定的值，这与当前字体字号都有关系。

4、加粗

  <b>加粗内容</b>
  <strong>加粗内容</strong>

5、倾斜

  <em>倾斜内容</em>（emphasized）
  <i>倾斜内容</i>（italic）

6、换行（br）

  <br />    换行是一个空标记（强制换行）

7、水平线

  <hr />    空标记

8、列表（ul，ol，dl）

（1）无序列表（ul）
      <ul>
              <li></li>
              <li></li>
              ......
      </ul>

（2）有序列表（ol）
      <ol  start=""  type="">（start表示开始值；type表示有序列表类型，比如type="a"，则依次为a，b，c，d）
              <li></li>
              <li></li>
              ......
      </ol>

（3）自定义列表（dl）
      <dl>
              <dt>名词</dt>
              <dd>解释</dd>
      </dl>

9、插入图片

<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题">

title的作用：在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的。
alt的作用：alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方。

10、超链接的应用和锚点

（1）超链接

  <a  href="目标路径及全称/连接地址">链接文本/图片</a>
  <a  href="#"></a>  空链接（默认返回到顶部）
  target（页面打开方式）：_self（默认值，在原来页面上打开窗口）/ _blank（打开一个新窗口）

（2）锚点

需要被跳转的地方放一个锚点。锚点也是一个a标签，知识这个a标签没有href属性，只有id属性，这个id属性就是它的标识，别人要跳转过来，就要按照这个标识。

11、数据表格的作用及组成

表格的组成：
      <table>
            <tr>（行）
                   <td>（列）
                   </td>
            </tr>
      </table>

数据表格的相关属性：

（1）width="表格的宽度"
（2）height="表格的高度"
（3）border="表格的边框"
（4）bgcolor="表格的背景颜色"
（5）cellspacing="单元格与单元格之间的间距"
（6）cellpadding="单元格与内容之间的空隙"
（7）align="left / center / right"（水平对齐方式）
（8）valign="top / middle / bottom / baseline"（垂直对齐方式）
（9）colspan="合并单元格的列数"
（10）rowspan="合并单元格的行数"

12、表单

  作用：收集用户信息

（1）表单框

  <form  name=""  method=""  action=""></form>

（2）文本框

  <input  type="text"  value=" "  />

（3）密码框

  <input  type="password"  value=" "  />

（4）提交按钮

  <input  type="submit"  value="按钮内容"  />

（5）重置按钮

  <input  type="reset"  value="按钮内容"  />

（6）单选框 / 单选按钮

  <input  type="radio"  name="ral"  />
  <input  type="radio"  name="ral"  />
  checked="checked"  （默认选中）
  disabled="disabled"   （禁用）

注意：单选按钮里的name属性必须写，同一组单选按钮里的name属性值必须一样。

（7）复选框

  <input  type="checkbox"  name=""  />
  checked="checked"  （默认选中）
  disabled="disabled"   （禁用）

（8）下拉菜单

  <select  name="">
        <option>菜单内容</option>
        <option>菜单内容</option>
        ......
  </select>

（9）多行文本框

  <textarea name="" cols="字符宽度"  rows="行数"  /></textarea>

（10）按钮

  <input  type="button"  value="按钮内容"  >

（11）提示信息标签

  <label  for="绑定控件id名"></label>

（12）上传文件框

  <input  type="file" multiple="multiple" />

（13）图像域

  <input type="image src="" width="" height="" alt="上传图片"/>

（14）表单字段集

  <fieldset></fieldset>

功能：相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以设置多个fieldset对象。

（15）字段集标题

  <legend></legend>

功能：

legend元素可以在fieldset对象绘制的方框内插入一个标题。
legend元素必须是fieldset内的第一个元素。

（16）input（属性）

  a. email  检测email地址格式  具有multiple（多个） 用逗号将地址隔开
  b. url    输入url地址  不是url地址不允许提交  与required属性相配合
  c. number 输入数字  检查其中是否为数字
     <input type="number" value="5" min="10" max="25" step="5"/>
  d. range  
     <input type="range" value="5" min="0" max="100" step="1"/>

13、表格

（1）单元格间距（border-spacing : value ;）

说明：单元格间距（该属性必须给table添加）表示单元格边框之间的距离。

（2）合并相邻单元格边框（border-cellapse : separate / collapse）

说明：合并相邻单元格边框，separate（默认值）边框分开；collapse边框合并。

（3）无内容时单元格的设置（empty-cells : show / hide）

说明：当单元格无内容是，是否显示该单元格的边框区域 show（显示）、hide（隐藏）。

（4）显示单元格行和列的算法（table-layout :auto / fixed）

设置fixed时，文本为英文字母且无空格时，内容超出单元格宽度则固定不变；
设置 auto 时，则随内容宽度而定；
设置fixed：固定宽，不会随内容多少改变单元格宽。

（5）隔行变色显示

  a.双数行：tr：nth-child（2n/even）{}    --->偶数
  b.单数行：tr：nth-child（2n+1/odd）{}   --->奇数

（6）表格表题（表题内容）

  表格表题位置：caption-side：top / right / bottom / left ;

说明：left，right位置只有火狐识别；top，bottom在IE7以上版本支持， IE7以下版本不支持其他属性值，只识别 top。

（7）HTML重要属性

  a.colspan="value"      合并列
  b.rowspan="value"     合并行
  c.valign="top/bottom/middle/baseline"  垂直对齐方式
  d.rules="rows/cols/all/none"    添加组分隔线

（8）数据列分组

  <colgroup  span="value"></colgroup>
  <col  span="value"  />

说明：

col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组
span属性显示指定相邻几列成一组，span属性默认值是1，默认时仅定义一列为一组
可以通过给table添加rule=”groups” 属性来给分组列添加添加组的分割线

注意：虽然col和colgroup具有相同的功能，一个是单标签，一个是双标签，两个都存在兼容问题。

（9）数据列分组

  <thead>< / thead>  表头
  <tbody>< / tbody>  表体
  <tfoot></ tfoot>       表尾

说明：一个table 中，只能包含一个thead，一个tfoot，但它可包含多个tbody。

14、语义化标签

  header     头标签                 nav         导航栏标签
  article    文章标签               aside       侧边栏标签
  footer     页脚标签               section     章节、页眉、栏目

15、弹性盒

（1）伸缩流方向（flex-direction）

  row（从左向右）       row-reverse（与row相反）  
  column（从上到下）    column-reverse（与column相反）

（2）伸缩换行（flex-wrap）

  wrap（换行） nowrap（不换行，默认值，不管超出还是不超出都不会换行）
  wrap-reverse（换行方向，主轴水平，上下相反，主轴垂直，左右相反）

（3）伸缩方向与换行（flex-flow）

  flex-flow：flex-direction / flex-wrap

（4）主轴对齐（justify-content）

  flex-start：伸缩项目向一行的起始位置看齐
  flex-ecd：伸缩项目向一行的结束为止看齐
  center：伸缩项目向一行的中间为止靠齐
  space-between：伸缩项目平均分布在行里
  space-around：伸缩项目平均分布在行里，两端保留一部分空间

wait_yin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础内容

一、Web标准的概念及组成（1）web标准是网页制作的标准，它不是一个标准，它是根据网页的不同组成部分生成的一系列标准。这些标准大部分由W3C起草发布，也有部分标准由ECMA起草发布。（2）W3C（World Wide Wed Consortium）万维网联盟，创建于1994年是web技术领域最具权威和影响力的国际中立性技术标准机构。（3）行为标准：DOM，ECMASCRIPT（ECMA制...
复制链接

扫一扫