HTML里边的快捷键
多行注释<!-- --> ctrl +/
复制当前行到下一行 ctrl+d
标签的快捷写法 标签字母 + tab
网页格式化(网页排版较乱时使用) ctrl + alt +d +l
搜索 ctrl + F
操作多行 alt +左键
第一节 HTML4
一、概念
1、什么是HTML?
- 超文本标记语言: HyperText Markup Language
- 不是一种编程语言,而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
2、什么是HTML 标签?
- HTML 标签是由尖括号包围的关键词,比如
- HTML 标签通常是成对出现的,比如
<b>
和</b>
;也有单标签的,比如:<html/>
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
3、HTML元素
- HTML 文档由 HTML 元素定义。如:
<body>
元素、<p>
元素- 元素的内容是开始标签与结束标签之间的内容。如:
<p>
内容这是一个段落。<p/>
- 大多数 HTML 元素可拥有属性
4、HTML属性
属性是HTML元素提供的附加内容
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现,比如:name=“value”。
二、HTML网页的正常显示格式
网页结构、编码格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
说明:
<!DOCTYPE HTML>
声明 当前的文档是html<html></html>
标签 里面显示当前网页的所有信息
lang=“en” 标注网页的语言(用法:<html lang=”en”><html/>
) en英语 ch中文<head><head/>
标签 头标签<body><body/>
标签 显示网页的所有内容- meta 标签 信息标签(在head里面)
charset=UTF-8 标注当前网页的编码格式UTF-8 (用法:<meta charset=UTF-8>
)<title><title/>
标签 显示在网页的选项卡区域(在head里面)
三、HTML里边的常用标签
1、标题标签
通过 <h1>
- <h6>
标签进行定义的,由大到小。
作用:文本加粗、换行
<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>
2、<hr>
水平线标签
写法:<hr/>
3、<p>
段落标签
定义一个段落
写法:<p></p>
功能:将文本分割为段落、换行
属性:
align=“center” 文本居中
align=“right” 文本靠右
align=“left” 文本靠左(可不写,默认文本居左)
<p align="center">这是一个段落</p>
<p align="right">这是一个段落</p>
<p align="left">这是一个段落</p>
4、<br/>
强制换行标签
5、文本格式化标签
<i></i>
标签 斜体
<b></b>
标签 加粗
<u></u>
标签 添加下滑线
<sub></sub>
下标标签
<sup></sup>
上标标签
<em></em>
斜体标签 和 i一致
<small></small>
小号字
<strong></strong>
加粗 和 b 一致
<del></del>
添加删除线
<pre></pre>
预定义格式化标签 预先格式化标签
写法:
<i>文本格式化</i>
<b>文本格式化</b>
<u>文本格式化</u>
H<sub>2</sub>o
3<sup>2</sup>=9
<em>文本格式化</em>
<small>文本格式化</small>
<strong>文本格式化</strong>
<del>文本格式化</del>
<pre>
文本格式化
文本格式化
文本格式化
</pre>
6、a链接
超文本链接,用于跳转页面。
写法:<a href=""></a>
注意:
href 里面写的是跳转地址(相对路径、绝对路径、远程路径),一般使用相对路径。
相对路径是绝对路径的一部分。
远程路径就是相对路径,只不过把项目放到远程的服务器上面,通过远程服务器来访问的路径。
各种路径应用示例:
- href默认写#,代表跳转当前页面(自身)
<a href="#">百度</a>
- 远程路径
<a href="https://www.baidu.com/">百度</a>
- 相对路径
点击a链接时打开当前项目的网页,使用相对路径来做。(相对路径:相对于当前文件的位置)
a. 如果当前文件和目标文件为同级兄弟关系,href里边可以直接写文件名;也可以按照父文件去写,如“./文件名”, 一个“.”代表从当前文件向外跳转一级。
<a href="index.html">打开index.html</a>
<a href="./index.html">打开index.html</a>
b. 跳转兄弟文件的子文件
<a href="page/page1.html">打开page1页面</a>
<a href="./page/page1.html">打开page1页面</a>
说明:上例中page1.html 为目标文件,page为目标文件的父文件。
c. 跳转父文件的兄弟文件
<a href="../index.html">打开index.html页面</a>
说明:上例为“双点跳”,即跳转到父文件的父文件,再取目标文件
- 绝对路径
文件所在盘符的目录,如:F:/web-411/0411/index.html
<a href="F:/web-411/0411/index.html">打开index.html页面</a>
说明:上例需要从盘里边直接打开
注意:
- 网页从服务端打开,里面路径不能写绝对路径,很容易造成文件丢失,所以一般不使用绝对路径。(webstorm自带服务端)
http://localhost:63342/web-4.11/0411/index%E4%B8%8B%E5%8D%88.html
上面这个网页地址 是服务端地址,localhost 是主机名称,63342是端口号。- 绝对路径想要有效果,当前文件必须从静态文件打开
属性:1、target
targrt="_self" 在当前网页里面打开; target="_blank" 重新打开一个选项卡。
<a href="https://www.baidu.com/" target="blank">百度</a>
使用a链接制作锚标:
- 当前页面的锚标
方法一:
在标记位置的上方写一个a链接,如:<a name="targetinfo"></a>
,将当前位置a链接的href值写为“target”,即:<a href="target">跳转当前页面的锚标记</a>
,几乎不用这种方法
方法二:
给标记位置的元素加属性id="target"
,将当前位置a链接的href值写为“target”,即:<a href="target">跳转当前页面的锚标记</a>
- 跨页面的锚标
将当前位置a链接的属性值写为
"跳转地址#target"
,目标位置写法同上。
<a href="./page/page1.html#target">跳转到page页面的锚标记</a>
7、img 图像标签
单标签
写法:<img src="" alt=""/>
,src属性是图片的路径(远程、相对),alt属性是图片加载失败时显示的内容。
<img src="https://www.runoob.com/images/pulpit.jpg" alt="加载失败"/>
属性:
align 作用的是图片,效果是后边的文字对齐,即:让图片靠左、右、中。图片默认靠左,文字在图片右下
8、列表标签
- 有序列表 ol li
属性 type,修改序号的显示,1、a、i、A
<ol type="1">
<li></li>
<li></li>
<li></li>
</ol>
- 无序列表 ul li
无type属性,可以使用css样式来修改列表样式,比如,若要去掉列表前的点,给<li>
的样式里边添加list-style
属性list-style:none;
<ul>
<li></li>
<li></li>
<li></li>
</ul>
- 有序列表或无序列表的嵌套
<ol>
<li>蔬菜</li>
<ul>
<li>辣椒</li>
<li>西红柿</li>
<li>菠菜</li>
</ul>
<li>大肉</li>
<li>水果</li>
</ol>
9、区块标签
- div标签
定义了文档的区域,块级。
相当于一个容器,主要用来做网页的框架布局、有换行功能。
写法:
<div>
</div>
- span标签
内联元素,可用作文本的容器
没有特定含义
当与css一同使用时,可用于为部分文本设置样式属性
10、表单对象元素标签
1、input标签
写法:<input/>
,单标签
属性:
- type属性,决定当前的input标签的类型。没有type属性时,默认为单行文本框。
<input type="text"/>
属性值:
text: 单行文本框
password: 密码框
button: 按钮
checkbox: 复选框,去掉checkbox默认的样式,给元素添加样式属性-webkit-appearance: none;
radio:单选框
file: 打开文件资源管理器,用来做文件上传
submit: 表单提交按钮,用于表单元素,提交表单的数据,单独用时无效
reset: 重置按钮,用于表单元素,重置表单,单独用时无效
- value属性,标签的值
<input type="text" value="12345"/>
- max属性
属性为text、password 的标签, 可以添加maxlength 属性,限定输入的最大长度
<input type="text" value="12345" maxlength="10"/>
- 注意事项
含有checkbox属性、radio属性的标签,标签内的value属性不是界面显示的,是给代码使用的,若要显示,还要写在标签外部
<input type="checkbox" value="篮球"/>篮球
<input type="radio" value="女"/>女
把多个radio做成单选框,给radio起相同的名称
<input type="radio" value="0" name="sex"/>女
<input type="radio" value="1" name="sex"/>男
单选框radio、复选框checkbox默认选择,使用checked
<input type="radio" value="0" checked name="sex"/>女
<input type="checkbox" value="篮球" checked/>篮球
type属性为submit 或reset 时,按钮内容默认显示为“提交”、“重置”,若要更改内容,添加value=""属性
<input type="submit" value="注册"/>
<input type="reset" value="清空"/>
2、select下拉列表标签
下拉菜单
<select>
<option>——请选择——</option>
<option value="西安市">——西安市——</option>
<option value="西安市" selected>——宝鸡市——</option>
<option value="西安市">——渭南市——</option>
</select>
默认选择 selected
3、textarea 文本域标签
文本域 多行文本框
<textarea rows="10" cols="10"></textarea>
- ros和cols属性,行和列,控制外观大小
- placeholder属性,提示信息,也可用于text 和password,但要去掉value值
<textarea rows="10" cols="10" placeholder="请输入..." ></textarea>
<input type="text" value="" maxlength="10" placeholder="请输入账号">
<input type="password" value="" maxlength="10" placeholder="请输入密码"/>
4、label 标签
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
关联控件的id一般指的是input元素的id;
在html5中还新增了一个属性form,form属性是用来规定所属的一个或多个表单的 id 列表,以空格隔开;
当
11、表单元素标签
表单是一个包含表单元素的区域,允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表(select)、单选框(radio)、复选框(checkboxes)等等。
使用表单标签<form>
来设置,写法:<form></form>
功能:做用户注册或登录
属性:
action 提交表单的数据到后台的路径
method 表单提交的方式,get为显示提交(不安全,数据量大),post为隐式提交(安全,数据量小),除以上两种常用的之外,还有delete(专门针对于删除操作使用的)、insert(专门针对于增加操作)、update(修改操作)
<form action="" method="">
</form>
注意:
表单提交数据时必须设置name属性
get方式提交会把表单的数据显示到路径的后边
post方式提交,比较安全,不在路径上显示
12、table 表格元素标签
标签
<tr>
为行元素标签,
<td>
为列元素标签。
<th>
也是列,但可以自动居中、文本加重。
<caption>
表头标签
属性
border属性,设置表格的边框宽度。
width属性,设置表格的宽。
cellspacing,设置单元格之间的间距。
align,设置表格居中的方式。
cellpadding,设置单元格里边的内间距,即文字到上、左单元格线的距离,cellpadding="10"即向上向左均为10px,右和下自动设置。
在<tr>
元素里边添加属性align=“center”,行内文字居中。
bgcolor,设置表格颜色,可以应用到<table><tr><td>
。
<table bgcolor="#00bfff" border="1" width="400" cellspacing="0" align="center" cellpadding="10">
<caption>202010086-学生信息</caption>
<tr>
<th rowspan="2">班级</th>
<th colspan="4">学生的基本信息</th>
</tr>
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</table>
表格的跨行和跨列,见上例
计数的时候算自身
rowspan 跨行
colspan 跨列
13、iframe框架
内嵌框架,用于制作小型的企业系统,eg:w3c菜鸟也可以使用 ifram 框架
属性:
src 内嵌地址
width 设置宽,可以写数值,也可以写百分比
height 设置高,写百分比无效,因为浏览器没有高,只有宽
name 名称
frameborder 设置边框。值为0时,移除边框
<ifram name="iframinfo" src="https://www.baidu.com/" width="1000" height="500"></iframe>
- 实现点击a链接,在iframe框架中显示嵌入的网页
<a href="./index.html" target="iframeinfo">index</a>
<a href="./index-a链接.heml" target="iframeinfo">index-a</a>
<a href="./index-table.html" target="iframeinfo">index-table</a>
<a href="./标签的简单案例.html" target="iframeinfo">表单案例</a>
<iframe name="iframeinfo" src="./index.html" width="100%" height="700" frameborder="0"></iframe>
效果:点击上例四个a链接,在上例iframe框架中显示a链接的内容。