1、HTML简介
HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。
2、HTML入门编写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
HTML入门编写
</body>
</html>
<!doctype html>
声明文档类型,即告知浏览器使用html 5解析网页,不区分大小写
<head>
网页的头部,元素包含了文档的元(meta)数据
<title>
网页的标题
<body>
网页的主体,元素包含了可见的页面内容
3、HTML标签介绍
以下内容均编写在<body>···</body>
之间。
3.1、标题
<!--6个标题-->
<h1>This is 1.</h1>
<h2>This is 2.</h2>
<h3>This is 3.</h3>
<h4>This is 4.</h4>
<h5>This is 5.</h5>
<h6>This is 6.</h6>
This is 1.
This is 2.
This is 3.
This is 4.
This is 5.
This is 6.
3.2、文字
3.2.1、段落、斜体、加粗
<!--部分字体效果-->
<p>段落标签</p>
<i>斜体字</i>
<b>文字加粗</b>
段落标签
斜体字 文字加粗3.2.2、删除线、下划线
<!--部分字体效果-->
<del>删除线</del>
<u>下划线</u>
删除线
下划线
3.3、分割线
<!--分割线-->
<hr>
3.4、列表
3.4.1、无序列表
<!--无序列表-->
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
</ul>
- 无序列表1
- 无序列表2
- 无序列表3
- 无序列表4
在无序列表
-
的使用中,可以设置3个不同的样式:实心圆,空心圆,实心方块。只需在
- 标签中加入**type=“XXX”**即可
<!--实心圆-->
<ul type="disc">
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
</ul>
<!--空心圆-->
<ul type="circle">
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
</ul>
<!--实心方块-->
<ul type="square">
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
</ul>
- 无序列表1
- 无序列表2
- 无序列表3
- 无序列表4
- 无序列表1
- 无序列表2
- 无序列表3
- 无序列表4
- 无序列表1
- 无序列表2
- 无序列表3
- 无序列表4
3.4.2、有序列表
与无序列表相似,有序列表使用
- 标签。含有4种样式:数字(默认)、小写字母、大写字母、小写罗马字母、大写罗马字母。下面直接展示代码和示例
<!--数字排序-->
<ol type="1">
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>
<!--小写字母-->
<ol type="a">
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>
<!--大写字母-->
<ol type="A">
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>
<!--小写罗马字母-->
<ol type="i">
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>
<!--大写罗马字母-->
<ol type="I">
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>
- 有序列表1
- 有序列表2
- 有序列表3
- 有序列表4
- 有序列表1
- 有序列表2
- 有序列表3
- 有序列表4
- 有序列表1
- 有序列表2
- 有序列表3
- 有序列表4
- 有序列表1
- 有序列表2
- 有序列表3
- 有序列表4
- 有序列表1
- 有序列表2
- 有序列表3
- 有序列表4
3.5、链接
使用<a>
标签配合href属性即可完成超链接的配置,使用包裹部分内容,并设置href属性即可。如:
<a href="https://www.baidu.com/">点击我进入百度</a>
使用上述语句,可以在用户点击该标签时,在本窗口跳转到指定网页。若希望能够在新的窗口打开网页,则需要配置target属性。如:
<a href="https://www.baidu.com/" target="_blank">点击我进入百度</a>
3.6、图片
使用<img>
标签配合src、width、height属性即可完成图片的相关操作。如:
<img src="HTMLimgDemo1.png">
默认匹配与html文件相同路径的文件,即相对路径,同样的可以设置绝对路径。
当多个图片导入时,由于图片大小各不相同,会导致图片排版有误,美观度降低。可以使用width或者height属性设置图片显示的像素长宽。在设置长宽的时候务必按比例调整,否则会导致图片变形。
title
属性:鼠标指向图片时的提示内容
alt
属性:图片加载失败时显示的内容
<img src="HTMLimgDemo1.png" title="这是图片" alt="HTML图片示例">
加载失败:
3.7、表格
使用<table>
、<tr>
、<td>
相互搭配使用构建表格,使用border属性设置表格边框效果,使用width属性设置单元格宽度。代码示范:
<table border="1px">
<tr>
<td width="100px">第一行A</td>
<td width="100px">第一行B</td>
<td width="100px">第一行C</td>
</tr>
<tr>
<td width="100px">第二行A</td>
<td width="100px">第二行B</td>
<td width="100px">第二行C</td>
</tr>
<tr>
<td width="100px">第三行A</td>
<td width="100px">第三行B</td>
<td width="100px">第三行C</td>
</tr>
</table>
在<table>
标签中我们可以设置空白间距cellspacing
<table border="1px" cellspacing="0">
<!--省略-->
</table>
在<tr>
标签中可以设置align属性规定文字位置
<!--省略-->
<tr align="center">
<td width="100px">第三行A</td>
<td width="100px">第三行B</td>
<td width="100px">第三行C</td>
</tr>
在<td>
标签中可以设置colspan属性规定该单元格占据列数,需要注意,每多占1列,都应当少写一个<td>
,否则表格就会伸出去一格
<tr>
<td colspan="3" align="center">占3列</td>
</tr>
<!--省略-->
在<td>
标签中可以设置rowspan属性规定该单元格占据行数,与colspan相同,需要考虑<td>
的数量
<table border="1px" cellspacing="0">
<tr>
<td colspan="3" align="center">占3列</td>
</tr>
<tr>
<td width="100px">第一行A</td>
<td width="100px">第一行B</td>
<td width="100px" rowspan="3" align="center">第一行C</td>
</tr>
<tr>
<td width="100px">第二行A</td>
<td width="100px">第二行B</td>
</tr>
<tr align="center">
<td width="100px">第三行A</td>
<td width="100px">第三行B</td>
</tr>
</table>
下面进行表格属性的总结并写出一个常用的求职表格
<table>
表示表格
<tr>
表示行
<td>
表示单元格
<col>
表示列
border="1px"
表示边框属性
cellspacing="0"
表示单元格空隙
align="center"
表示对齐方式
列分组 <colgroup span="6" width="100px">
指6个<col width="100px">
<tbody>
标签:根据w3c标准,表格具有3个部分:thead、tbody、tfoot。其中tbody是核心内容,浏览器解析网页时会自动补充<tbody>
,建议根据标准手写<tbody>
标签。
<table cellspacing="0" border="1px"><!--设置边框属性和单元格空隙-->
<tr align="center"><!--文字居中-->
<td colspan="7">个人简历</td><!--该单元格占7列-->
</tr>
<tr align="center">
<td width="200px">姓名</td><!--设置单元格宽度-->
<td width="200px"></td>
<td width="200px">性别</td>
<td width="200px"></td>
<td width="200px">年龄</td>
<td width="200px"></td>
<td width="200px" rowspan="4">照片</td><!--该单元格占4行-->
</tr>
<tr align="center">
<td width="200px">学历</td>
<td width="200px"></td>
<td width="200px">籍贯</td>
<td width="200px" colspan="3"></td>
</tr>
<tr align="center">
<td width="200px">电话</td>
<td width="200px"></td>
<td width="200px">政治面貌</td>
<td width="200px" colspan="3"></td>
</tr>
<tr align="center">
<td width="200px">毕业院校</td>
<td width="200px" colspan="5"></td>
</tr>
<tr align="center">
<td width="200px">求职意向</td>
<td width="200px" colspan="6"></td>
</tr>
</table>
3.8、表单
表单控件由标签<input>
配合type属性产生,包括text、password、button、radio、checkbox等,写法如:<input type="text">
- form必须要有action表示提交地址
- 需要提交的input数据必须要有name属性
- input按钮的文字需要用value表示
- input必须放在form内才能提交
3.9、HTML块
假如我们需要让两张图片均靠左50像素摆放,那么可以单独设置两个图片的属性:
<img style="margin-left:50px" src="https://how2j.cn/example.gif"/>
<br/>
<img style="margin-left:50px" src="https://how2j.cn/example.gif"/>
同样的,我们可以将两个图片放在一个div中,然后只设置div的属性:
<div style="margin-left:50px" >
<img src="https://how2j.cn/example.gif"/>
<br/>
<img src="https://how2j.cn/example.gif"/>
</div>
两者的显示效果是完全一样的。
4、常见的表单部件使用
4.1、文本框
所有文本框都有一些通用规范:
它们可以被标记为 readonly (用户不能修改输入值)甚至是 disabled (输入值永远不会与表单数据的其余部分一起发送)。
它们可以有一个 placeholder; 这是文本输入框中出现的文本,用来简略描述输入框的目的。
它们可以被限制在size (框的物理尺寸) 和 长度 (可以输入的最大字符数)。
如果浏览器支持的话,他们可以从拼写检查中获益。
4.1.1、单行文本框
<input type="text" id="comment" name="comment" value="I'm a text field">
4.1.2、E-mail地址框
<input type="email" id="email" name="email" multiple>
4.1.3、密码框
<input type="password" id="pwd" name="pwd">
这会使用户输入密码的时候显示星号,但这并不能确保信息的安全。若没有其他的加密措施,被星号隐藏的内容会被明文发送,这会带来安全隐患。
4.1.4、搜索框
<input type="search" id="search" name="search">
4.1.5、电话号码框
<input type="tel" id="tel" name="tel">
4.1.6、URL框
<input type="url" id="url" name="url">
会检验输入的内容是否符合url格式,但不会检验url是否存在。
4.1.7、多行文本框
<textarea cols="30" rows="10"></textarea>
文本框右下角有一个拖放按钮用来改变文本框大小,这一属性可以在CSS设置文本区域中的resize为none来取消。
4.2、下拉菜单
4.2.1、单选选择框
一个选择框是用元素创建的,其中有一个或多个元素作为子元素,每个元素都指定了其中一个可能的值。
<select id="simple" name="simple">
<option>Banana</option>
<option>Cherry</option>
<option>Lemon</option>
</select>
4.2.2、多选选择框
<select multiple id="multi" name="multi">
<option>Banana</option>
<option>Cherry</option>
<option>Lemon</option>
</select>
4.3、可选中项
4.3.1、单选项
<input type="radio" checked id="soup" name="meal">
几个单选按钮可以连接在一起。如果它们的
name
属性共享相同的值,那么它们将被认为属于同一组的按钮。同一组中只有一个按钮可以同时被选;这意味着当其中一个被选中时,所有其他的都将自动未选中。
<fieldset>
<legend>What is your favorite meal?</legend>
<ul>
<li>
<label for="soup">Soup</label>
<input type="radio" checked id="soup" name="meal" value="soup">
</li>
<li>
<label for="curry">Curry</label>
<input type="radio" id="curry" name="meal" value="curry">
</li>
<li>
<label for="pizza">Pizza</label>
<input type="radio" id="pizza" name="meal" value="pizza">
</li>
</ul>
</fieldset>
4.3.2、复选框
<input type="checkbox" checked id="carrots" name="carrots" value="carrots">
包含
checked
属性使复选框在页面加载时自动被选中。
4.4、按钮
4.4.1、submit
将表单数据发送到服务器。对于 元素, 省略 type 属性 (或是一个无效的 type 值) 的结果就是一个提交按钮.
<button type="submit">
This a <br><strong>submit button</strong>
</button>
<input type="submit" value="This is a submit button">
4.4.1、reset
将所有表单小部件重新设置为它们的默认值。
<button type="reset">
This a <br><strong>reset button</strong>
</button>
<input type="reset" value="This is a reset button">
4.4.3、anonymous
没有自动生效的按钮,但是可以使用JavaScript代码进行定制。
<button type="button">
This an <br><strong>anonymous button</strong>
</button>
<input type="button" value="This is an anonymous button">
参考文献
HTML系列教材 https://how2j.cn/k/html/html-div-span/189.html
原生表单部件 https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/The_native_form_widgets