首页 Web开发 Windows程序 编程语言 数据库 移动开发 系统相关 微信 其他好文

HTML

时间：2021-06-07 19:59:29   收藏：0   阅读：0

HTML

网页基本信息

演示：

<!-- DOCTYPE：告诉浏览器，我们要使用什么规范-->
<!DOCTYPE html>
?
<html lang="en">
?
<!--head标签代表网页头部-->
<head>
    <!-- meta描述性标签，用来描述网站的一些基本信息-->
    <!-- meta一般用来做SEO -->
    <meta charset="UTF-8">
    <meta name="keywords" content="这是一段keywords">
    <meta name="description" content="写出了第一段HTML代码">
?
    <!-- title网页标题 -->
    <title>欢迎来到HTML</title>
</head>
?
<!--body标签代表网页主体-->
<body>
Hello,World!
</body>
</html>

 

网页基本结构

演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
?
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<hr/>
<h1>段落标签</h1>
<!--段落标签-->
<p>将进酒</p>
<p>作者：李白</p>
<p>君不见，黄河之水天上来，奔流到海不复回。</p>
<p>君不见，高堂明镜悲白发，朝如青丝暮成雪！</p>
<p>人生得意须尽欢，莫使金樽空对月。</p>
<p>天生我材必有用，千金散尽还复来。</p>
<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
<p>岑夫子，丹丘生，将进酒，杯莫停。</p>
<p>与君歌一曲，请君为我倾耳听。</p>
<p>钟鼓馔玉不足贵，但愿长醉不复醒。</p>
<p>古来圣贤皆寂寞，惟有饮者留其名。</p>
<p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
<p>主人何为言少钱，径须沽取对君酌。</p>
<p>五花马、千金裘，呼儿将出换美酒，与尔同销万古愁！</p>
?
<!--水平线标签-->
<hr/>
<h1>换行标签</h1>
<!--换行标签-->
<!--换行标签比段落标签更紧凑-->
将进酒 <br/>
作者：李白<br/>
君不见，黄河之水天上来，奔流到海不复回。<br/>
君不见，高堂明镜悲白发，朝如青丝暮成雪！<br/>
人生得意须尽欢，莫使金樽空对月。<br/>
天生我材必有用，千金散尽还复来。<br/>
烹羊宰牛且为乐，会须一饮三百杯。<br/>
岑夫子，丹丘生，将进酒，杯莫停。<br/>
与君歌一曲，请君为我倾耳听。<br/>
钟鼓馔玉不足贵，但愿长醉不复醒。<br/>
古来圣贤皆寂寞，惟有饮者留其名。<br/>
陈王昔时宴平乐，斗酒十千恣欢谑。<br/>
主人何为言少钱，径须沽取对君酌。<br/>
五花马、千金裘，呼儿将出换美酒，与尔同销万古愁！<br/>
?
<hr/>
<!--字体样式标签-->　
<strong>加粗文字</strong>
<em>斜体文字</em>
<hr/>
<!--特殊符号-->
这 是 一 行 文 &nbsp;&nbsp;&nbsp;&nbsp;字
<br/>
大于号：&gt;小于号：&lt;
<!--
特殊符号记忆方式
特殊符号以&开头 ;结尾
写出&后再打出字母可以查看有哪些用法
-->
</body>
</html>

 

图像标签

超链接标签

行内元素和块元素

列表标签

表格标签

演示：

<table border="1px">
  <tr>
<!-- colspan 跨列合并单元格   -->
    <td colspan="4">1-1</td>
    <td>1-2</td>

  </tr>

  <tr>
    <td>2-1</td>
    <td rowspan="2">2-2</td>
    <td>2-3</td>
    <td>2-4</td>
    <td rowspan="2">2-5</td>

  </tr>

  <tr>
    <td>3-1</td>
    <td>3-3</td>
    <td>3-4</td>
  </tr>

</table>

技术图片

?
1-1 1-2
2-1 2-2 2-3 2-4 2-5
3-1 3-3 3-4
?

实例：

<table border="1px">
  <tr>
    <td colspan="3">学生成绩</td>
  </tr>
  <tr>
    <td rowspan="2">张三</td>
    <td>语文</td>
    <td>100</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>100</td>
  </tr>
  <tr>
    <td rowspan="2">李四</td>
    <td>语文</td>
    <td>100</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>100</td>
  </tr>
</table>

技术图片

?
学生成绩
张三 语文 100
数学 100
李四 语文 100
数学 100
?

媒体元素:视频与音频

页面结构分析

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

iframe内联框架

技术图片

在本页面内显示：

<iframe src="https://www.baidu.com" frameborder="0" width="600px" height="400px"></iframe>

技术图片

内联框架实现超链接跳转：

<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>

<a href="https://www.baidu.com" target="hello">点击跳转</a>

技术图片

表单

表单语法

技术图片

演示：

<h1>注册</h1>
?
<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
  get：可以在url中看到提交的信息，不安去，但高效
  post：比较安全，可以提交大文件
-->
?
<form action="1.第一个HTML文件.html" method="post">
?
  <!--文本输入框：<input type="text">-->
  <p>用户名：<input type="text" name="username"></p>
?
  <!--密码框：<input type="password">-->
  <p>密码：<input type="password" name="password"></p>
?
  <!--提交：<input type="submit">  重置：<input type="reset">-->
  <p>
    <input type="submit">
    <input type="reset">
  </p>
?
</form>

表单元素格式

?
属性 说明
type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name 这个表单元素的名称
value 元素的初始值。type为radio时必须指定一个值
size 指定表单元素的初始宽宽度。当tyoe为text或passeord时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength type为text或password时，输入的最大字符数
checked type为radio或checkbox时，指定按钮是否被选中
?

单选框

演示：

<p>性别：
    <input type="radio" value="boy" name="sex" checked>男
    <input type="radio" value="girl" name="sex">女
  </p>

技术图片

多选框

演示：

<p>城市：
  <input type="checkbox" value="beijing" name="city">北京
  <input type="checkbox" value="shanghai" name="city">上海
  <input type="checkbox" value="nanjing" name="city" checked>南京
  <input type="checkbox" value="wuhan" name="city">武汉
</p>

技术图片

按钮

演示：

<!--按钮  -->
<p>按钮：
  <input type="button" name="btn1" value="这是一个按钮">
  <input type="image" src="resources/image/1.png">
</p>
?
<!--提交：<input type="submit">  重置：<input type="reset">-->
<p>
  <input type="submit">
  <input type="reset">
</p>

技术图片

文件域

技术图片

可以搭配一个上传按钮：

<p>
  <input type="file" name="files">
  <input type="button" value="上传" name="upload">
</p>

技术图片

下拉框

演示：

<p>国家：
  <select name="country" >
    <option value="China">中国</option>
    <option value="US">美国</option>
    <option value="UK">英国</option>
    <option value="Germany" selected>德国</option>
  </select>
</p>

默认显示：技术图片

下拉显示选项：技术图片

文本域

演示：

<p>输入文字：
  <textarea name="textarea"  cols="30" rows="10">默认内容</textarea>
</p>

技术图片

邮箱验证

<p>邮箱：
  <input type="email" name="email">
</p>

错误：

技术图片

技术图片

技术图片

正确：技术图片

URL验证

<p>URL:
  <input type="url" name="url">
</p>

错误：技术图片

正确：技术图片

数字验证

演示：

<p>10的倍数：
  <input type="number" name="num" max="100" min="0" step="10">
</p>

错误：技术图片

正确：技术图片

滑块

演示：

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

技术图片

搜索框

演示：

<p>搜索：
  <input type="search" name="search">
</p>

技术图片

表单的应用

扩展：增强鼠标可用性

<label for="mark">点击编辑</label>
<input type="text" id="mark">

技术图片

技术图片

可以实现在点击文字时进入编辑所在对应位置开始编辑，例如在这里点击点击编辑时可以跳转到右侧输入框输入文字

表单初级验证

HTML总结

在xmind或ProcessOn中打开思维导图


?

 

评论（0）
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码！