Web前端（一）HTML超文本标记语言
文章目录
- 一.Web前端开发介绍
- 1.Web概述
- 2.Web起源
- 3.Web的特点
- 4.Web工作原理
- 5.URL介绍
- 二.HTML网页结构
- 1.HTML基本结构
- 2.HTML文档类型
- 3.HTML文档规范与注释
- （1）文档规范
- （2）HTML注释
- 三.HTML标签
- 1.文本标签
- 2.换行标签
- 3.列表标签
- 4.div与span标签
- 5.图片标签img
- 6.超连接标签
- 7.表格标签
- 8.表单标签
- 9.下拉列表标签
- 10.文本域标签
- 11.按钮标签
- 12.案例代码
- 13.html内嵌框架
- 14.内嵌框架与a标签配合使用
一.Web前端开发介绍
1.Web概述
2.Web起源
1984年蒂姆伯纳斯李创造了世界上第一个万维网导航站点世界上第一个网站。
3.Web的特点
- 易导航和图形化界面
- 与平台无关
- 分布式结构
- 动态性
- 交互性
4.Web工作原理
5.URL介绍
URL统一资源定位器可以理解为网址。
构成如下：
协议类型：//服务器地址（端口号）/路径/文件名
例子： http://www.westos.org/bbs/index.html
二.HTML网页结构
HTML(Hyper Text Mark-up Language )即是超文本标记语言, 通过使用标记标签来描述页面文档结构和表现形式的一种语言，再由浏览器进行解析，然后把结果展示在网页上。
- 超文本指的是超链接
- 标记指的是标签
1). HTML文件用编辑器打开显示的是文本，可以用文本的方式编辑。
2). HTML文件用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页 链接跳转到另外一个网页。
1.HTML基本结构
2.HTML文档类型
目前常用的两种文档类型是xhtml 1.0和html5
3.HTML文档规范与注释
（1）文档规范
xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。
1、所有的标签必须小写
2、所有的属性必须用双引号括起来
3、所有标签必须闭合
4、img必须要加alt属性(对图片的描述)
（2）HTML注释
html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：
三.HTML标签
1.文本标签
2.换行标签
3.列表标签
4.div与span标签
5.图片标签img
标签定义 HTML 页面中的图像。有两个必需的属性：src 和 alt。
src: 图片名及url地址
title：文字提示属性
alt: 图片加载失败时的提示信息
width/height：图片宽度/高度
6.超连接标签
<a href=" ">...</a> 超级链接标签
属性：
href: 必须，指的是链接跳转地址;
target: 表示链接的打开方式。
_blank 新窗口 ,
_self 本窗口（默认）
title：文字提示属性
锚点链接：
1. 定义一个锚点：
<a id="a1"></a> 百度一下 <a name="a1"></a>
2. 使用锚点：
<a href="#a1">跳到a1处</a>
7.表格标签
在 HTML 文档中,广泛使用表格来存放网页上的文本和图像;
标签:
表格标签:table
行标签:tr
单元格(表示列的概念):td
表头:th :加粗并且居中
表格标题:caption
标签合并:
行合并:rowspan
列合并:colspan
标签常用属性:
border:边框
width:宽度
height:高度
algin:对齐方式
- center
- left
- right
表格标签小练习：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--8行8列-->
<table border="1px" width="40%" bordercolor="blue" align="center" style="text-align: center"><caption>课程表</caption><tr><th>项目</th><th colspan="5">上课</th><th colspan="2">休息</th></tr><tr><th>星期</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr><tr><td rowspan="4">上午</td><td>语文</td><td>数学</td><td>英语</td><td>英语</td><td>物理</td><td>计算机</td><td rowspan="4">休息</td></tr><tr><td>数学</td><td>数学</td><td>地理</td><td>历史</td><td>化学</td><td>计算机</td></tr><tr><td>化学</td><td>语文</td><td>体育</td><td>计算机</td><td>英语</td><td>计算机</td></tr><tr><td>政治</td><td>英语</td><td>体育</td><td>历史</td><td>地理</td><td>计算机</td></tr><tr><td rowspan="2">下午</td><td>语文</td><td>数学</td><td>英语</td><td>英语</td><td>物理</td><td>计算机</td><td rowspan="2">休息</td></tr><tr><td>数学</td><td>数学</td><td>地理</td><td>历史</td><td>化学</td><td>计算机</td></tr>
</table>
</body>
</html>
8.表单标签
常用属性：
action属性:提交的目标地址(URL)
method属性:提交方式:get(默认)和post
get方式:
URL地址栏可见
长度受限制
相对不安全.
post方式:
URL地址不可见
长度不受限制
相对安全.
input 表单项标签input定义输入字段，用户可在其中输入数据。
在 HTML 5 中，type 属性有很多新的值。
type属性:表示表单项的类型:值如下:
text:单行文本框
password:密码输入框
checkbox:多选框 注意要提供value值
radio:单选框 注意要提供value值
file:文件上传选择框
button:普通按钮
submit:提交按钮
image:图片提交按钮
reset:重置按钮, 还原到开始(第一次打开时)的效果
hidden:主表单隐藏域,要是和表单一块提交的信息,但是不需要用户修改
email 用于应该包含 e-mail 地址的输入域
url 用于应该包含 URL 地址的输入域
number 用于应该包含数值的输入域。
max 规定允许的最大值
min 规定允许的最小值
step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）
value 规定默认值
range 用于应该包含一定范围内数字值的输入域，显示为滑动条
max 规定允许的最大值
min 规定允许的最小值
step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）
value 规定默认值
日期选择器 Date pickers
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
9.下拉列表标签
<select>...</select> 标签创建下拉列表。name属性：定义名称,用于存储下拉值的size：定义菜单中可见项目的数目，html5不支持disabled 当该属性为 true 时，会禁用该菜单。 multiple 多选
<option>... </option> 下拉选择项标签,用于嵌入到<select>标签中使用的;*value属性:下拉项的值*selected属性:默认下拉指定项
10.文本域标签
<textarea>...</textarea> 多行的文本输入区域name :定义名称,用于存储文本区域中的值。cols ：规定文本区内可见的列数。rows ：规定文本区内可见的行数。disabled： 是否禁用readonly： 只读
11.按钮标签
<button>...</button> 标签定义按钮。
<fieldset> --fieldset 元素可将表单内的相关元素分组。
12.案例代码
<body>
请选择你的出生地：
<select name="biradd">
<option value="">---请选择---</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="chongqing">重庆</option>
</select><br>*********留言板**********<br>
<form aution"发送地址"="" method="post">
<textarea cols="30" rows="10">请在这里输入...</textarea><br>
<input type="submit" value="提交">
<input type="reset" value="重置"><br>
</form><br>********请选择你要上传的文件*******<br>
<input type="file" name="myfile"></body>
实现用户登录页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table align="center" style="width:535px; height:300px; background-image: url('./img/mailphoto.jpg') "><tr><td width="45%" height="40px"></td><td colspan="2" style="text-align: center"><h1>用户登录</h1></td></tr><tr><td width="45%" height="20px"></td><td style="text-align: right">用户名</td><td><input type="text"></td></tr><tr><td width="45%" height="20px"></td><td style="text-align: right">密码</td><td><input type="password"></td></tr><tr><td width="45%" height="20px"></td><td colspan="2" style="text-align: center"><input type="submit" value="进入邮箱"><input type="reset" value="重新填写"></td></tr><tr><td width="45%" height="30px"></td><td colspan="2" style="text-align: center"><a href="#">找回密码</a><a href="#">注册新用户</a></td></tr></table></body>
</html>
13.html内嵌框架
<iframe>标签会创建包含另外一个html文件的内联框架(即行内框架)
src属性来定义另一个html文件的引用地址
frameborder属性定义边框,
scrolling属性定义是否有滚动条
<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>
14.内嵌框架与a标签配合使用
a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中,代码如下:
Web前端（一）HTML超文本标记语言相关推荐
- Web前端之HTML超文本标记语言
文章目录 一.Web前端开发介绍 1.Web前端开发概述 1)什么是Web开发? 2)Web前端开发核心技术 (1)HTML语言(超文本标记语言,相当于一个整体的框架) (2)CSS(层叠样式表,用来 ...
- web前端介绍_html-超文本标记语言
web 前端简介 1. web1.0 时代的网页制作 Web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件应用程序有两 ...
- 带你了解前端之HTML超文本标记语言
文章目录 前端简介 超文本传输协议前戏 HTTP超文本传输协议 HTML简介 head内常见标签 body内常见标签 块儿级标签与行内标签 boby内基本符号 body内布局标签 body内常见标签 ...
- Web前端—01HTML超文本标记语言
文章目录 一.Wed前端开发介绍 1.Web概述 2.Web起源 3.Web的特点 4.Web工作原理 5.URL介绍 二.HTML网页结构 1.HTML介绍 2.HTML基本结构 3.文档类型 4. ...
- python进阶之web前端（01—HTML超文本标记语言）
目录 01.Web前端开发介绍 1.Web前端开发概述 2.Web起源 3.Web特点 4.Web工作原理 5.URL介绍 02.HTML网页结构 1.HTML基本结构 2.HTML文档类型 3.HT ...
- 040_初识 web 前端 HTML 超文本标记语言
文章目录 1. web前端开发技术 2. HTML 页面结构 3. HTML 标签 3.1 文本标签 3.2 换行标签 3.3 列表标签 3.3 div 和 span 标签 3.4 图片标签 3.5 ...
- HTML教程，带你轻松掌握html超文本标记语言，web前端学习必备
有些初学web前端的小伙伴会比较迷惑,HTML到底是什么呢? 这里解释一下,HTML称为超文本标记语言,是一种标识性的语言. 它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Inte ...
- python---Web前端HTML(超文本标记语言)
文章目录 Web前端开发介绍 Web概述 Web起源 Web的特点 Web工作原理 URL介绍 HTML网页结构 HTML基本结构 HTML文档规范与注释 HTML标签 文本标签 列表标签 图片标签i ...
- python前端——HTML超文本标记语言、CSS层叠样式表
01.Web前端开发介绍 1.Web前端开发概述 1)什么是Web开发? 前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术. ...
最新文章
- 【论文速读】RandLA-Net大规模点云的高效语义分割
- jquery控制只监听数字_无源！模拟！颜值高！简单实用！TC Level Pilot监听音量控制器...
- 双系统（xp+ubuntu）删除ubuntu（好用）
- TS2003基于触摸屏的应用
- 【学习・求职必备】可谓是相当Awesomes了，这些综述类的github项目你不可错过！...
- hdu 1024(滚动数组优化)
- 项目管理指标_项目经理必掌握的九大项目管理问题
- 深入理解session过期机制
- FullCalendar 一： 日程安排FullCalendar
- BZOJ 2243 树链剖分
- Activity生命周期（略记）
- NP、OSPF Stub区域
- 如何把手机变成你的救生设备
- golang使用go-sql-driver实现mysql增删改操作
- 《Windows游戏编程大师技巧》 四、GDI、控件和突发奇想
- JSON与JAVA数据的转换。JSONObject.fromObject()和JSONObject.toBean()
- java编写QQ邮箱发送邮件_调用QQ邮箱接口
- speex java_(原创)speex与wav格式音频文件的互相转换(二)
- 计算机系统领域顶级会议--OSDI，SOSP
- php 方法名前加 amp,PHP的返回引用(方法名前加)