HTML

  1. 初识HTML
    1. 简介：超文本标记语言(文字、图片、视频、音频等)
    2. HTML5提供了一些新的元素和一些新特性，同时也建立了一些新规则。这些元素，特性和规则得建立，提供了许多新得网页功能，如使用网页实现动态渲染图片、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频。
    3. 优势：
      1. 所有知名得浏览器都支持HTML
      2. 跨平台性
    4. W3C标准
      1. 结构化标准语言：HTML、XML
      2. 表现标准语言CSS
      3. 行为标准语言DOM、ECMAScript
  2. 网页基本标签
    1. 基本标签
    <!--标记文件类型，声明使用得规范-->
<!DOCTYPE html>
<!--html主体标签-->
<html lang="en">
<!--head网页头部标签-->
<head>
<!--描述性标签，它用来描述我们网站得一些信息-->
<!--meta一般用来做SEO-->
  <meta charset="UTF-8">
  <meta name="keywords" content="java学习，学的好"/>
  <meta name="description" content="内容丰富努力学习"/>
<!--title网页标题-->
  <title>Title</title>
</head>
<!--网页主体内容-->
<body>
</body>
</html>
    1. 标题标签
      <h1></h1>
      <h2></h2>
      <h3></h3>
    2. 段落标签
      <p></p>
    3. 换行标签
      <br/>
    4. 水平线标签
      <hr/>
    5. 粗体、斜体标签
      <strong></strong>
      <em></em>
    6. 特殊符号
      &开头;结尾
      &nbsp; 空格
      &copy; 版权符号
  3. 图像、超链接、网页布局
    1. 图片标签及属性
    2. <img src="" alt="" title="" width="" height=""/>
    3. 图片未加载出来时，显示alt中得参数，title鼠标悬停时显示参数，../表示上级目录在src中使用
    4. 超链接标签及属性
    5. <a href="" target=""></a>
    6. target:在哪个窗口中打开（参数：_self：当前网页中打开、_blank：新网页中打开）
    7. 锚链接：<a name="top"></a><a href="#top"></a>可以实现页面间跳转；网页间跳转：html1:<a name="top"></a> html2:<a href="heml1.html#top"></a>
    8. 功能连接<a href="mailto:1179703648@qq.com"></a>,会调用本地邮箱功能
    9. 会自动换行的是块级标签，反之为行级标签
  4. 列表、表格、媒体元素
    1. 列表：信息资源的一种展现形式，它可以是信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷的获得相应的信息。
      1. 分类：无序列表、有序列表、定义列表
      2. 有序：<ol><li></li><li></li></ol>
      3. 无序：<ul><li></li><li></li></ul>
      4. 定义：<dl><dt>标题</dt><dd>内容</dd></dl> dl:标签 dt:列表名称 dd:列表内容
    2. 表格：<table><tr><td></td></tr></table>
      1. tr:行 td:列
      2. 跨行:<td rowspan="2"></td>
      3. 跨列:<td colspan="2"></td>
      4. 头标签:<thead><tr><th></th></tr></thead>
      5. 内容标签：<tbody><tr><td></td></tr></tbody>
      6. 尾标签：<tfoot><tr><td></td></tr></tfoot>
    3. 媒体元素
      1. 视频元素
        1. <video src="" controls autoplay></video>
        2. 属性 controls：控制器 autoplay：打开页面时自动播放
      2. 音频元素
        1. <audio src="" controls autoplay></audio>
        2. 属性 controls：控制器 autoplay：打开页面时自动播放
  5. 页面结构
    1. image
  6. iframe内联框架
<iframe src="" name="hello" frameborder="1" width="1000px" height="
800px"></iframe>
<a href="Demo02.html" target="hello">点击内容于iframe中显示</a>
  1. 表单及表单应用
    1. 表单属性
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--method:请求方式
	post:隐藏参数发送请求
	get:参数拼接到地址中发送请求
	action:向何处发送表单信息（可以是网站，也可以是请求地址）
	placeholder:设置提示信息
 -->
<form method="get" action="hello">
  <p>用户名：<input name="username" type="text" placeholder="输入用户名"/></p>
  <p>密码：<input name="password" type="password" placeholder="输入密码"></p>
<!--需要注意分组-->
  <!--selected:默认选中-->
  <p>性别：
	<input name="sex" type="radio" value="boy" selected/>男
	<input name="sex" type="radio" value="girl"/>女
  </p>
  <p>爱好：
	<input type="checkbox" name="hobby" value="1">睡觉1
	<input type="checkbox" name="hobby" value="2">睡觉2
	<input type="checkbox" name="hobby" value="3">睡觉3
	<input type="checkbox" name="hobby" value="4">睡觉4
  </p>
  <p>国家：
	<select name="select">
	  <option value="1" selected>--请选择--</option>
	  <option value="2">中国</option>
	  <option value="3">美国</option>
	  <option value="4">英国</option>
	</select>
  </p>
  <!--文本域-->
  <p>简介：
	<textarea name="one" cols="10" rows="10" >哈哈哈</textarea>
  </p>
  <p>文件：
	<input name="files" type="file" value="点击选择文件"/>
  </p>

  <p>邮箱验证：
	<input name="email" type="email"/>
  </p>
  <p>URL验证：
	<input name="url" type="url"/>
  </p>
  <p>数字类型：
	<input name="number" type="number" max="100" min="0" step="1"/>
  </p>
  <p>滑块：
	<input name="range" type="range" max="100" min="0" step="1"/>
  </p>
  <p>label：
<!--增强鼠标可用性，用于鼠标焦点跳转-->
	<label for="mk">点击</label>
	<input name="x" type="text" id="mk"/>
  </p>
  <p>搜索：
	<input name="search" type="search" placeholder="Search"/>
  </p>
  <p>
	<input type="submit" value="提交">
	<input type="reset" value="重置">
  </p>
</form>
</body>
</html>
    1. 表单属性应用
  2. 表单初级验证
    1. placeholder：提示信息
    2. required：非空
    3. pattern：正则表达式 <input type="" name="" pattern=""/>
posted @ 2021-10-03 18:51  争取做百分之一  阅读(16)  评论(0)    收藏  举报