了解HTML

Scroll Down

HTML

初识

什么是HTML

  • HTML: Hyper Text Markup Language (超文本标记语言)

H5的优势

  • 浏览器都支持
  • 市场需求
  • 跨平台

W3C标准

  • W3C
    • World Wide Web Consortium (万维网联盟)\
  • W3C标准包括
    • 结构化标准语言 (HTML, XML)
    • 表现标准语言(CSS)
    • 行为标准(DOM、ECMAScript)

常见IDE

  • 记事本
  • Dreamweaver
  • IDEA
  • WebStorm

网页基本信息

<!DOCTYPE html>
<html lang="en">
    <!-- head标签代表网页头部-->
    <head>
        <!-- meta描述性标签, 它用来描述网站的一些信息 -->
        <!-- meta一般用来做SEO-->
        <meta charset="UTF-8">
        <meta name="" content="">
        
        <!-- title网页标题-->
        <title>title</title>
    </head>
    
    <!-- body标签代表网页主体 -->
    <body>
        <!-- ... -->
    </body>
</html>

网页基本标签

  • 标题标签

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    
  • 段落标签

    <p>段落</p>
    
  • 换行标签

    <br/>
    
  • 水平线标签

    <hr/>
    
  • 粗体

    <strong></strong>
    
  • 斜体

    <em></em>
    
  • 特殊符号

    &nbsp; 	空格
    &gt;	大于
    &lt;	小于
    &copy;	版权
    <!-- .... -->
    

图像标签

常见图像格式

  • JPG
  • GIF
  • PNG
  • BMP
  • ...
<img src="path" alt="text" title="text" width="x" height="y" />
<!-- 
src: 地址
alt: 图像的替代文字
title: 鼠标悬停提示文字
width: 图像宽度
height: 图像高度
-->

超链接标签及应用

  • 页面间链接

    • 从一个页面链接到另一个页面

      <a href="url" ></a>
      <!--
      href: 表示药跳转的页面
      target: 表示窗口在哪里打开
      	_blank	在新标签打开
      	—self	在自己网页中打开
      -->
      
  • 锚链接

    <p name="top">this is the top paragraph</p>
    <p>
    
    </p>
    <a href="#top">back to top</a>
    <!--
    锚链接
    	1.需要一个锚标记
    	2.跳转到标记
    	#
    -->
    
  • 功能性链接

    <a href="mailto:email@example.com">mail to me</a>
    <!-- 
    邮件链接: mailto
    -->
    

行内元素和块元素

块元素

  • 无论多少,该元素独占一行
  • (p, h1-h6)

行内元素

  • 内容撑开宽度, 左右都是行内元素的可以排在一行
  • (a , strong, em ...)

列表标签

什么是列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条例化,并以列表的样式显示出来,以便浏览者能快捷的获得相应的信息

列表分类

  • 有序列表
  • 无序列表
  • 自定义列表
<!-- 有序列表 -->
<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

<!-- 无序列表 -->
<ul>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ul>

<!-- 自定义列表
dl: 标签
dt: 列表名称
dd: 列表内容
-->
<dl>
    <dt>title</dt>
    <dd>data</dd>
</dl>

表格标签

为什么使用表格

  • 简单通用
  • 结构稳定

基本结构

  • 单元格
  • 跨行
  • 跨列
跨四列
跨两行 2-2 2-3 2-4
3-2 3-3 3-4
<!-- 表格 table
行: tr
列: td
-->
<table border="1px">
    <tr>
        <!-- colspan 跨列 -->
        <td colspan="4">跨四列</td>
    </tr>
    <tr>
        <!-- rowspan 跨行 -->
    	<td rowspan="2">跨两行</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>

媒体元素

视频元素

  • video

音频元素

  • audio
<!--
controls: 控制条
autoplay: 自动播放
-->

iframe内联框架

<!--iframe 内联框架
src: 引用页面地址
name: 框架标识名
-->
<iframe src=“path" name=”mainFrame">
    
</iframe>

表单

<!-- form
method:
action: 表单提交的位置, 可以是网站, 也可以是一个请求处理地址
-->
<form method="post" action="result.html">
    <!-- input
	type:
		text(defualt), password, checkbox, radio, submit, reset, file, hidden, image, button
	name: 名称
	value: 元素的初始值
	size: 指定元素的初始宽度,当type为text或password时元素大小以字符为单位。对于其他类型,以像素为单位
	maxlength: type为text或password时,输入的最大字符数
	cheched:type为radio或checkbox时,指定按钮是否是被选中
	-->
    <input type="text">
    
    <!-- 下拉框, 列表框
	-->
    <select name="name">
        <option value="value1">option1</option>
        <option value="value2">option2</option>
        <option value="value3">option3</option>
    </select>
    
    <!-- 文本域
	-->
    <textarea name="textarea" clos="50" rows="10"></textarea>
    
    <!-- 文件域
	-->
    <input type="file">
</form>

表单应用

  • 隐藏域 hidden
  • 只读 readonly
  • 禁用 disable

表单初级验证

  • 用户提示 placeholder
  • 非空判断 required
  • 正则表达式 pattern