HTML学习

HTML学习

1.初识HTML

HTML

1. HTML：HyperText MarKup Language（超文本语言）

2. HTML5+CSS3未来发展趋势

   W3C标准

• 结构化标准语言（HTML、XML）
• 表现标准语言（CSS）
• 行为标准语言（DOM、ECMAScript）

2.网页基本标签

• 标题标签

  一级标签、二级标签等，用h表示

• 段落标签

  用p 标签表示

• 换行标签

  用br表示,空隙小

• 水平线标签

  用hr 来表示

• 字体样式标签

  粗体：用strong标签

  斜体：用em标签

• 注释和特俗符号

  注释

  空 格："&nbsp；"表示空格

  "&gt；"表示大于

  "&lt；"表示小于符号

  "&copy；"表示版权符号

  特殊符号记忆方式：& ；

3.图像、超链接、网页布局

常见图像格式

jpg,gif,png,bmp,

图像标签用img

<img src="路径"alt="名称"title="悬停文字"width="300"height="300">
<!--
为图像设置属性
scr:图片地址：相对地址，绝对地址（推荐使用相对路径）
alt:图片加载不出来时会显示的名字
title:点击图片时会出现的文字
-->

链接标签

<a href="path" target="目标窗口位置">链接文本或图像</a>
<a >
   <img src="路径"alt="名称"title="悬停文字"width="300"height="300"> 
</a>
 <!-- 
href:表示要跳转到的页面
target:表示窗口在哪里打开
	_blank 在新标签中打开
	_self:  在自己的网页中打开
-->

锚链接

<!-- 锚链接
	1.需要一个猫标记
	2.跳转到标记
	#标记 
-->
<a href="#top">回到顶部</a>
<a herf="4.链接标签.html#top"></a>
<a name="down">down</a>

功能性链接

<!-- 功能链接
邮件链接：mailto:邮箱号码
可以直接跳转到页面
-->
<a href="mailto:24736743@qq.com">点击联系我</a>

行内元素和块元素

块元素：无论内容多少该元素独占一行。

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行。

4.列表、表格、媒体元素

列表

<!--有序列表
应用范围：试卷、问答....
-->
<ol>
    <Li>java</Li>
    <li>C/C++</li>
    <li>Python</li>
    <li>后端</li>
    <li>前端</li>
</ol>
<hr/>
<!--无序列表
应用范围：导航，侧边栏.....
-->
<ul>
     <Li>java</Li>
    <li>C/C++</li>
    <li>Python</li>
    <li>后端</li>
    <li>前端</li>
</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
-->
<dl>
    <dt>学习</dt>
    <dd>Java</dd>
    <dd>C</dd>
    <dd>C++</dd>
    <dd></dd>
</dl>

表格

特点：简单通用、结构稳定

基本结构：单元格、行、列、跨行、跨列

<!--表格table
行：tr
列：td
border:给表格加边框
colspan:跨列
rowspan:跨行
-->
<table border="1px">
    <tr>
        <td colspan="3">1-1</td> 
       <!-- <td>1-2</td> 
        <td>1-3</td>-->
    </tr>
    <tr>
         <td rowspan="2">2-1</td> 
        <td>2-2</td> 
        <td>2-3</td> 
    </tr>
    <tr>
		 <td>3-1</td> 
        <td>3-2</td> 
        <td>3-3</td>     
    </tr>
    <tr>
    	 <td>4-1</td> 
        <td>4-2</td> 
        <td>4-3</td> 
    </tr>
</table>

视频和音频（video&audio）

<!--视频和音频
src:资源路径
controls:控制条
autoplay:自动播放
-->
<video src="资源路径" controls autoplay></video>
<audio src="资源路径" controls autoplay></audio>

页面结构分析

• header：标题头部区域的内容
• footer:标记脚部区域的内容
• section：Web页面中的一块独立区域
• article：独立的文章内容
• aside：相关内容或应用（常用于侧边栏）
• nav：导航类辅助内容

iframe内联框架

<!--iframe 
scr:引用页面地址
name：框架标识名
w-h:宽度、高度
-->
<iframe scr="https:www.baidu.com"frameboder="0"  width="10000px" height="10000px">
     
</iframe>
<!--这里可以通过a标签实现跳转操作-->

5.表单及表单应用

表单语法

<!--表单
action：表单提交的位置，可以是网站也可以是一个请求处理地址
method：post、get、提交方式
	get方式提交：我们可以在url中看到我们的提交的信息，不安全，但高效
	post反式提交：比较安全，传输大文件
value:默认初始值
maxlength:最长能写几个字符
size：文本框长度
radio：单选框
	name：表示组
checkbox：多选框
	name：分组
Button：按钮
	value：表示按钮上的字
	image：图片也可以是按钮
	submit:提交按钮
	rest:重置，清空表单
所有属性都要加name
-->
<form methood="post" action="result.html">
    <p>
        <!--文本输入框：input type name -->
        名字：<input name="name" type="text">
    </p>
    <p>
        密码：<input name="name" type="password">
    </p>
    <p>
        <input type="usbmit" name="Button" value="提交"/>
        <input tyep="rest" name="Rest" value="重填"/>
    </p>
    
</form>
<!--下拉框-->
<p>国家
    <select name="列表名称">
        <option value="选项的值是" selected>中国</option>
         <option value="选项的值是">美国</option>
         <option value="选项的值是">瑞士</option>
         <option value="选项的值是">印度</option>
    </select>
</p>
<!--文本域
cols="50" rows="10"
-->
<p>反馈
    <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<!--文件域
input type=“file”  name=“files”
-->
<p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
</p>

• type：指定元素类型
• check：默认选中

验证方式、滑块、搜索

<!--邮件验证-->
<p>
    <input type="email" name="email">
</p>
<!--URL-->
<p>
    <input type="url" name="url">
</p>
<!--数字-->
<p>
    <input type="number" name="num" max="100" min="0" step="1">
</p>

<!--滑块
input type="range"
-->
<p> 
  <input type="rang" name="voice" min="0" max="100" step="2">
</p>

<!-- 搜索框-->
<p>搜索
    <input type="search" name="search">
</p>

应用

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

表单初级验证

• please holder：提示信息
• required:非空判断
• pattern：正则表达