html入门基础(详解）

一、HTML

1.HTML：是一种用于创建网页的超文本标记语言(Hyper Text Markup Language)

“超文本”就是指页面可以包含图片，链接，甚至音乐，视频，程序等非文字元素。
HTML语言是Web的基础，可以说Internet是建立在HTML基础之上的。
HTML5是新一代HTML标准，大部分浏览器已经支持。

二、HTML5基本结构

<!DOCTYPE html>//html5网页声明
<html lang="en"> //<html>元素是HTML页面根元素
//lang属性：声明当前页面的语言类型，“en"英文，”zh“中文<head><meta charset="utf-8" />//<meta />设置网页编码格式位utf-8<title>文档标题</title>//<title>设置文档标题
</head>
<body>....页面内容（各种标签）
</body>
</html>

三.基本标签

1、div和span

1.1 <div>标签：

块级元素，可用于组合其他HTML元素的容器
div没有特定的含义，通常用于对文档结构进行逻辑上的分块
div的前后会换行

1.2 <span>标签：

行内元素（内联元素），可用作文本的容器
span没有特点的含义
span的前后不会换行
span示例

 <p>她有一双 <span style="color:blue">蓝色</span> 的眼睛</p>

2、文本相关

2.1 标题标签：<h1>-<h6>

<h1 align="center">欢迎光临我的主页</h1>
<h2 style="text-align:center;">欢迎光临我的主页</h2>
<h3>欢迎光临我的主页</h3>
<h4>欢迎光临我的主页</h4>
<h5>欢迎光临我的主页</h5>
<h6>欢迎光临我的主页</h6>

2.2 段落标签，换行标签，label 标签：

段落标签：<p align="center/left/right"> 一段文字 </p>
换行标签：<br> 或者 <br/>

特别提醒：不要在<p>里嵌套块级元素，如嵌套p或div

<label> 标签：
<label for="…"> 标签文字 </label>

for属性：绑定一个控件id值，当用户点击label标签内文本，就会将焦点
切换到绑定的控件上。

<label for="username">用户名</label>
<input type="text" id="username" />

点击"用户名"时，文本框将获得焦点

嵌套写法：嵌套时可省略 for 属性

<label> 用户名<input type="text" /> </label>

格式标签：部分
粗体：<b> 斜体：<i> 下划线：<u> 删除线：<strike>
下标：<sub> 上标：<sup>
小号字：<small> 大号字：<big>
强调(加粗)：<strong> 强调(斜体)：<em>
突出显示(黄色背景)：<mark>

<p><b><i> <u>欢迎光临</u> </i></b></p>
<p>X<sup>2</sup></p>
<p><big>big文字</big></p>
<p><small>small文字</small></p>
<strong>强调的内容(粗体,语气更强)</strong> <br>
<em>强调的内容(斜体)</em> <br>
<mark>突出显示</mark>

运行截图：

HTML注释： **

3.图片

<img src="url"width="宽度值" height="高度值"alt="说明" />

无法载入图像时显示alt信息
宽度值和高度值单位是像素点px

<img src="https://s3.pstatp.com/toutiao/static/img/logo.271e845.png" alt="今日
头条" height="50px" width="200px">

运行截图：

4. 超链接
超链接标签： <a href="url"> 链接文字 </a>
<a> 标签定义超链接，用于从一张页面链接到另一张页面。

<a> 元素最重要的属性是 href 属性，它指示链接的目标。

<a href="http://www.wust.edu.cn" target="_blank" >武汉科技大学</a>

target="_blank"新开窗口打开页面

运行截图：

4.1 超链接锚点

跳转到当前页的某一个位置(锚点，一般用id值)：

点击跳转到id值的地方

<a href="#id值">链接文字</a>

点击回到最顶部

<a href="#">页面的最上部</a>

4.2 超链接的 URL，可能的值：

绝对 URL - 指向另一个站点（比如 href=“http://www.example.com/index.htm”）
相对 URL - 指向站点内的某个文件（href=“index.htm”）
锚 URL - 指向页面中的锚（href="#top"）

5、列表

无序列表ul

<ul><li><a href="http://www.wust.edu.cn">武汉科技大学</a></li><li><a href="http://www.hust.edu.cn">华中科技大学</a></li><li><a href="http://www.whu.edu.cn">武汉大学</a></li>
</ul>

运行截图：

有序列表ol

默认序号从1开始

<ol start="100">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>

运行截图：

6.HTML表格
border边框厚度，width/height表格宽度/高度
rowspan="2"表格单元横跨两行的表格：
colspan="2"表格单元横跨两列的表格

<table border="1" width="值"height="=值"><caption><!--表格标题--></caption><tr><th> </th> <th> </th><!--表头行--></tr><tr><td> </td> <td> </td><!--数据行--></tr>
</table>

表格示例

<table border=1 width=600>
<caption>学生名单</caption>
<tr>
<th>学号</th> <th>姓名</th> <th>院系</th>
</tr>
<tr>
<td>2017001</td> <td>张无忌</td> <td>计算机学院</td>
</tr>
<tr>
<td>2017002</td> <td>令狐冲</td> <td>计算机学院</td>
</tr>
</table>

运行截图：

<table border=1 width=600><caption>专业设置表及在校人数表</caption><tr><th>录名</th> <th  colspan="4">专业人数</th></tr><tr><th rowspan="6">计算机学院</th><th colspan="4">计算机科学技术专业</th></tr><tr><th>16级</th><th>17级</th><th>18级</th><th>19级</th></tr><tr><th>150人</th>       <th>150人</th>       <th>200人</th>       <th>220人</th></tr><tr><th colspan="4">软件工程专业</th></tr><tr> <th>16级</th><th>17级</th><th>18级</th><th>19级</th></tr><tr><th>80人</th>       <th>80人</th>       <th>90人</th>       <th>90人</th></tr><tr><th rowspan="3">外国语学院</th><th colspan="4">英语专业</th></tr><tr> <th>16级</th><th>17级</th><th>18级</th><th>19级</th></tr><tr><th>60人</th>       <th>80人</th>       <th>90人</th>       <th>90人</th></tr>
</table>

四、Form表单

1.表单概念

Form：为用户输入创建表单
其中可包含文本框，密码框，单/复选框，列表框，按钮。
表单常用于向指定的url提交用户数据。

Form基本结构
url:提交后跳转的页面
get或post 传送数据的方法
form元素是块级元素，其前后会产生换行

Form基本结构

<html>
<body>
<form action="URL" method="get或post">
表单元素
…
<input type="submit" value="提交">
<input type="reset" value="重填">
</form>
</body>
</html>

<form action="url页面" method="get" >
用户名：<input type="text" name="username"> <br/>
密 码：<input type="password" name="psd" maxlength=6>
<br/>
<input type="submit" value="提交">
<input type="reset" value="重填">
</form>

运行截图：
get方法提交数据会在地址栏中显示
get方法：跳转页面后用用问号"?“连接请求串
多个值(name)之间用单个”&"连接

2. Form常用元素

2.1 文本框和密码框

 用户名：<input type="text" name="username" value="lzm" title="提示信息" autofocus> <br />密 码：<input type="password" name="psd" maxlength="8"  placeholder="长度8个字符">

value设置初始值，
maxlength=“8” ,输入的最大长度
placeholder=“长度8个字符”,占位提示(输入时消失)
获得焦点autofocus,autofocus="autofocus"简写

其他属性：

只读属性：readonly=“readonly”
禁用属性：disabled=“disabled”
自动填充属性：autocomplete=“on” (配合提交按钮)

2.2隐藏域
隐藏于在页面中对用户是不可见的。
目的：
收集信息以利于表单处理
程序使用。
提交数据时，有name值的隐藏域或其value值会一并提交

2.3单选框

<form>
性别：
<label>
<input type="radio" name="sex" value="male" checked="checked"> 男
</label>
<label>
<input type="radio" name="sex" value="female"> 女
</label>
</form>

套一个label的好处：点击选项文字也可以选中
name值相同才能互斥
value=“male”，提交的实际值
checked=“checked”，设置为选中状态

2.4复选框

复选框使用相同的name值主要是为取值方便

<form>
爱好：
<label>
<input type="checkbox" name="like" value="football">足球
</label>
<label>
<input type="checkbox" name="like" value="basketball">篮球
</label>
</form>

2.5 列表框

<select id或name="名称" size=可见行数>
<option value="值1" >内容1</option>
…
<option value="值n" >内容n</option>
</select>

单选下拉列表示例：

增加 selected=“selected” 指定默认选中项

<form>
专业：
<select name="major">
<option value="0">计算机科学与技术</option>
<option value="1" selected="selected" >软件工程</option>
<option value="2">网络工程</option>
</select>
</form>

多选列表框示例：
size=1 为下拉列表框(默认下拉列表框)
size>1 为列表框
multiple="multiple"多选（配合ctrl或shift键）

<form>
专业特长：<br/>
<select name="master" size=4 multiple="multiple">
<option value= "0" >.NET编程</option>
<option value= "1" >J2EE编程</option>
<option value= "2" >Java编程</option>
<option value= "3" >Android编程</option>
<option value= "4" >C语言编程</option>
</select>
</form>

2.6. 文件域

<form >
附件：<input type="file" name="myfile" accept="文件类型">
</form>

文件类型值
缺省所有文件
image/* 图像文件
audio/* 声音文件
video/* 视频文件
MIME_type 某个有效MIME类型，不带参数

2.7 文本区域

<form>
简历：<br/>
<textarea name="intro" cols="50" rows="10">请填写个人简历</textarea>
</form>

2.8 提交和重置按钮
submit按钮与form的action属性自动绑定

<input type="submit" value="提交">
<input type="reset" value="重填">

2.9 一般按钮
onclick事件属性
JavaScript代码："alert(‘你点击了按钮’) "

<input type="button" value="确定" onclick="alert('你点击了按钮') " >

2.10 Button按钮

<button type="button"> button一般按钮 </button>
<button type="submit"> button提交按钮 </button>
<button type="submit"> <img src="data:images/1.gif"> </button>
<button type="reset"> button重填按钮 </button>

2.11 日期域

<form>
<input type="date" name="mydate">
</form>

2.12 区间域

<form>
成绩<input type="range" min="0.0" max="100.0" step="0.5" value="60.0"
id="score" name="score" >
<span id="msg"></span>
<input type="submit" value="提交">
</form>

html入门基础(详解）相关推荐

Django入门基础详解
本次使用django版本2.1.2 安装django 安装最新版本 pip install django 安装指定版本 pip install django==1.10.1 查看本机django版本 ...
Redis入门基础详解
Redis 简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的持久 ...
javaWeb（入门基础详解）
Servlet 1,servlet介绍 servlet是一项动态web资源开发技术. 运行在服务器端. 作用:处理业务逻辑,生成动态的内容,返回 ...
Matlab入门基础详解
此文针对第一次接触matlab的同学,总结一些简单matlab应用/语法,因为博主主要用matlab打数学建模竞赛(刚接触- -),所以所有matlab应用主要针对竞赛.博主目前想从事算法.机器学习之 ...
CSS入门基础详解——笔记、案例
CSS入门学习一.CSS简介 1.什么是css css:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记 ...
python 快速排序_小白入门知识详解：Python实现快速排序的方法（含实例代码）...
前言: 今天为大家带来的内容是:小白入门知识详解:Python实现快速排序的方法(含实例代码)希望通过本文的内容能够对各位有所帮助,喜欢的话记得点赞转发收藏不迷路哦!!! 提示: 这篇文章主要介绍了P ...
视频教程-FPS游戏逆向与安全+UE4引擎基础详解-其他
FPS游戏逆向与安全+UE4引擎基础详解想把自己的知识传播出去,让更多人学习到苏瑞兵 ¥188.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订阅课程,领取 ...
主线剧情03-NXP-i.MX系列的u-boot移植基础详解
u-boot 移植基础详解本文系广泛撷取.借鉴和整理(相关的内容在网络上有很多,但很多相互抄,或者是版本太老,或者就是不通用的非常有平台针对性的步骤,碎片化泛滥,甚至就是有待分拣的垃圾厂,当然也有一 ...
vue 单相绑定_Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）...
Vuejs第一篇之入门教程详解(单向绑定.双向绑定.列表渲染.响应函数) 2018-12-30 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素 ...

html入门基础(详解）

html入门基础(详解）

html入门基础(详解）相关推荐

最新文章

热门文章