HTML基础
HTML的介绍
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
HTML的运行方式
第一种就是在本地用浏览器打开，第二种就是放置在服务器中，通过远程访问服务器打开，一般来说会用Tomcat或者是Apache服务器部署。
HTML的的基本结构
浏览器是靠标签来识别html文档中的格式和内容的。标签由元素(element)，属性(attribute)和值(value)组成，例如：<a href=’#’>超链接</a> a:元素 href:属性 #:值。起始标签和终止标签之间的就是所显示的内容。
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<title>第一个网页
</title>
-
</head>
-
<body>
-
hello
-
</body>
-
</html>
<!DOCTYPE html>:用于标识文档类型和一些定义
<html></html>:用于标记元素的开始位置和结束位置
<head></head>:用于指定其他语言，设置标题，定义类型等
<title></title>:用于显示标题
<body></body>:网页的主体，也就是显示在网页中的内容
HTML的字符实体
最常用的字符实体
其他一些常用的字符实体
html超链接
通过使用超链接，可以使网页链接到另外一个页面。
基本语法：
<a href=’url地址’></a>
<!-- target 常用属性值 _blank（开新的页面） _self（替换当前页面）-->
PS:可以在<frame>标签中设置name属性，再到<a>标签中的target属性设置对应的值。
html图片元素
通过是用图片标签，可以在网页中显示图片。
基本语法：
<img src=’图片地址’ width=’宽度’ height=’高度’ alt=’自定义内容’ />
alt属性用于设置图片失效时的默认显示文字和将光标移动到图片上显示的文字。
PS:这种没有结束标签的标签被称为空元素。
html表格
通过使用表格，可以显示数据图片等，也可用于布局。
基本语法：
<table border=’边框宽度’ cellspaing=’空隙大小’ cellpadding=’填充大小’ width=’宽度’ height=’高度’ align=’表格对齐方式’ >
<caption></caption>
<tr align=’文字横向对齐方式’ valign=’文字纵向对齐方式’>
<th colspan=’合并几列’ align=’文字横向对齐方式’ valign=’文字纵向对齐方式’></th>
</tr>
<tr>
<td rowspan=’合并几行’ align=’文字横向对齐方式’ valign=’文字纵向对齐方式’><td>
</tr>
</table>
综合实例：
-
<html>
-
<head>
-
<title>第一个网页
</title>
-
</head>
-
<body>
-
<p>第一行
</p>
-
<p>第二行
</p>
-
<a href="http://www.baidu.com">百度
</a>
-
© &
-
<br/>
-
<a href="mailto:q547550831@outlook.com">邮箱
</a>
-
<br/>
-
<img src="./images/2.jpg" alt="无图片" width='200' border='3'/>
-
<img src="./images/2.jpg" alt="无图片" width='200' border='3'/>
-
<img src="./images/2.jpg" alt="无图片" width='200' border='3'/>
-
<img src="./images/2.jpg" alt="无图片" width='200' border='3'/>
-
<img src="./images/2.jpg" alt="无图片" width='200' border='3'/>
-
<br/>
-
<br/>
-
<table border='2' width='500px' align='center' height='100px' bgcolor='yellow' cellspacing='5px' cellpadding='5px'>
-
<tr align='center' border='2'>
-
<td>元素
</td>
-
<td>元素
</td>
-
<td>元素
</td>
-
</tr>
-
<tr align='center' border='2'>
-
<td>元素
</td>
-
<td>元素
</td>
-
<td>元素
</td>
-
</tr>
-
<tr align='center' border='2'>
-
<td>元素
</td>
-
<td>元素
</td>
-
<td>元素
</td>
-
</tr>
-
</table>
-
<br/>
-
<br/>
-
<table border='2px' bordercolor='#E674FA' align='center' height='200px' width='500px' cellspacing='0px' cellpadding='5px'>
-
<tr align='center' >
-
<td colspan='3'>星期一菜谱
</td>
-
</tr>
-
<tr align='center'>
-
<td rowspan='2'>素菜
</td>
-
<td>青椒茄子
</td>
-
<td>花椒扁豆
</td>
-
</tr>
-
<tr align='center'>
-
<td>小葱豆腐
</td>
-
<td>炒白菜
</td>
-
</tr>
-
<tr align='center'>
-
<td rowspan='2'>荤菜
</td>
-
<td>油焖大虾
</td>
-
<td>海参鱼翅
</td>
-
</tr>
-
<tr align='center'>
-
<td>红烧肉
<img src='./images/2.jpg' width='200px' alt='example'/>
</td>
-
<td>烤全羊
</td>
-
</tr>
-
</table>
-
-
<br/>
-
<br/>
-
-
<table border='2px' align='center' bordercolor='blue' cellspacing='1px' cellpadding='5px' height='200px' width='600px'>
-
<tr align='center'>
-
<td>项目
</td>
-
<td colspan='5'>上课
</td>
-
<td colspan='2'>休息
</td>
-
</tr>
-
<tr align='center'>
-
<td>星期
</td>
-
<td>星期一
</td>
-
<td>星期二
</td>
-
<td>星期三
</td>
-
<td>星期四
</td>
-
<td>星期五
</td>
-
<td>星期六
</td>
-
<td>星期日
</td>
-
</tr>
-
<tr align='center'>
-
<td rowspan='4'>上午
</td>
-
<td>语文
</td>
-
<td>数学
</td>
-
<td>英语
</td>
-
<td>英语
</td>
-
<td>物理
</td>
-
<td>计算机
</td>
-
<td rowspan='4'>休息
</td>
-
</tr>
-
<tr align='center'>
-
<td>数学
</td>
-
<td>数学
</td>
-
<td>地理
</td>
-
<td>历史
</td>
-
<td>化学
</td>
-
<td>计算机
</td>
-
</tr>
-
<tr align='center'>
-
<td>化学
</td>
-
<td>语文
</td>
-
<td>体育
</td>
-
<td>计算机
</td>
-
<td>英语
</td>
-
<td>计算机
</td>
-
</tr>
-
<tr align='center'>
-
<td>政治
</td>
-
<td>英语
</td>
-
<td>体育
</td>
-
<td>历史
</td>
-
<td>地理
</td>
-
<td>计算机
</td>
-
</tr>
-
<tr>
-
</tr>
-
<tr align='center'>
-
<td rowspan='2'>下午
</td>
-
<td>语文
</td>
-
<td>数学
</td>
-
<td>英语
</td>
-
<td>英语
</td>
-
<td>物理
</td>
-
<td>计算机
</td>
-
<td rowspan='2'>休息
</td>
-
</tr>
-
<tr align='center'>
-
<td>数学
</td>
-
<td>数学
</td>
-
<td>地理
</td>
-
<td>历史
</td>
-
<td>化学
</td>
-
<td>计算机
</td>
-
</tr>
-
</table>
-
</body>
-
</html>
综合实例2：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>
</title>
-
<style type="text/css">
-
thead
th,
tfoot
th {
-
text-align: left;
-
background: grey;
-
color: white;
-
}
-
tbody
th {
-
text-align: right;
-
background: lightgrey;
-
color: grey;
-
}
-
caption {
-
font-weight: bold;
-
font-size: large;
-
margin-bottom:
5px;
-
}
-
#colgroup1 {
-
background-color: red;
-
}
-
#col3 {
-
background-color: blue;
-
}
-
#colgroup2 {
-
background-color: green;
-
font-size: small;
-
}
-
</style>
-
</head>
-
<body>
-
<table>
-
<caption>Results of the 2011 Fruit Survey
</caption>
-
<colgroup id="colgroup1">
-
<col id="col1And2" span="2" />
-
<col id="col3" />
-
</colgroup>
-
<colgroup id="colgroup2" span="2"/>
-
<thead>
-
<tr>
-
<th>Rank
</th>
-
<th>Name
</th>
-
<th>Color
</th>
-
<th>Size
</th>
-
</tr>
-
</thead>
-
<tbody>
-
<tr>
-
<th>Favorite:
</th>
-
<td>Apples
</td>
-
<td>Green
</td>
-
<td>Medium
</td>
-
</tr>
-
<tr>
-
<th>2nd Favorite:
</th>
-
<td>Oranges
</td>
-
<td>Oranges
</td>
-
<td>Large
</td>
-
</tr>
-
<tr>
-
<th>3rd Favorite:
</th>
-
<td>Pomegranate
</td>
-
<td>A kind of greeny-red
</td>
-
<td>Varies from medium to large
</td>
-
</tr>
-
</tbody>
-
<tfoot>
-
<tr>
-
<th>Rank
</th>
-
<th>Name
</th>
-
<th>Color
</th>
-
<th>Size
</th>
-
</tr>
-
</tfoot>
-
</table>
-
</body>
-
</html>
无序列表ul/li
无序列表用于标识列表项顺序不重要的序列。
基本语法：
<ul type=’属性值’>
<li>列表项内容</li>
</ul>
type:type的值有三种。默认是disc也就是实心圆
disc 实心圆
circle 空心圆
square 实心正方形
有序列表ol/li
有序列表用于标识列表项顺序需要明确指出的序列。
基本语法：
<ol type=’属性值’ start=’起始值’>
<li>列表项内容</li>
</ol>
type:type的值共有五种。默认是数字1
以1为例的数字 数值
以a为例的小写字母 字母
以A为例的小写字母 字母
以i为例的小写字母 罗马字
以I为例的小写字母 罗马字
start:start的值一定是数字，可以是正整数也可以是负整数，如果写小数的话，会自动舍去小数位，只截取整数位，如果type非数字类型，那么也是按照数字类型对待，例如type=’a’ start=’6’ 则是从f开始的。
实例：
-
<html>
-
<head>
-
<title>第二个网页
</title>
-
</head>
-
<body>
-
<!--无序表-->
-
<ul type='disc'>
-
<li>无序表1
</li>
-
<li>无序表2
</li>
-
<li>无序表3
</li>
-
<li>无序表4
</li>
-
<li>无序表5
</li>
-
</ul>
-
<br/>
-
<ul type='circle'>
-
<li>无序表1
</li>
-
<li>无序表2
</li>
-
<li>无序表3
</li>
-
<li>无序表4
</li>
-
<li>无序表5
</li>
-
</ul>
-
<br/>
-
<ul type='square'>
-
<li>无序表1
</li>
-
<li>无序表2
</li>
-
<li>无序表3
</li>
-
<li>无序表4
</li>
-
<li>无序表5
</li>
-
</ul>
-
<br/>
-
-
<!--有序表-->
-
<ol type='1' start='10'>
-
<li>有序表1
</li>
-
<li>有序表2
</li>
-
<li>有序表3
</li>
-
<li>有序表4
</li>
-
<li>有序表5
</li>
-
</ol>
-
<br/>
-
<ol type='a' start='100'>
-
<li>有序表1
</li>
-
<li>有序表2
</li>
-
<li>有序表3
</li>
-
<li>有序表4
</li>
-
<li>有序表5
</li>
-
</ol>
-
<br/>
-
<ol type='A' start='100'>
-
<li>有序表1
</li>
-
<li>有序表2
</li>
-
<li>有序表3
</li>
-
<li>有序表4
</li>
-
<li>有序表5
</li>
-
</ol>
-
<br/>
-
<ol type='i' start='100'>
-
<li>有序表1
</li>
-
<li>有序表2
</li>
-
<li>有序表3
</li>
-
<li>有序表4
</li>
-
<li>有序表5
</li>
-
</ol>
-
<br/>
-
<ol type='I' start='10'>
-
<li>有序表1
</li>
-
<li>有序表2
</li>
-
<li>有序表3
</li>
-
<li>有序表4
</li>
-
<li>有序表5
</li>
-
</ol>
-
</body>
-
</html>
框架标记frameset/frame
框架标签用于在一个网页页面内显示多个网页的内容。
基本语法：
<frameset frameborder=’边框大小’ cols=’各窗口列所占百分比，用,隔开’>
<frame name=’窗口名’ src=’html路径’ noresize>
<frameset frameborder=’边框大小’ rows=’个窗口行所占百分比，用,隔开’>
<frame name=’窗口名’ src=’html路径’ noresize>
<frame name=’窗口名’ src=’html路径’ noresize>
</frameset>
</frameset>
实例：
-
<html>
-
<head>
-
<title>第三个网页
</title>
-
</head>
-
<!--frame框架-->
-
<frameset cols='50%,50%' frameborder='0px'>
-
<frame src='http://www.baidu.com'/ noresize>
-
<frame src='http://www.taobao.com'/>
-
</frameset>
-
</html>
-
<html>
-
<head>
-
<title>第四个网页
</title>
-
</head>
-
<!--框架案例-->
-
<frameset rows='20%,80%' frameborder='0px' framespacing='5px'>
-
<frame src='./HTML4/1.html' noresize/>
-
<frameset cols='20%,*'>
-
<frame src='./HTML4/2.html' noresize/>
-
<frame src='./HTML4/3.html' name='right'/>
-
</frameset>
-
<frameset>
-
</html>
表单form
表单用于将用户输入的数据，提交给服务器进行处理。
基本语法：
<from action=’url’ method=’提交方式’>
<input type=’类型’ name=’名字’ value=’值’/>
<select name=’名字’>
<option value=’值1’></option>
<option value=’值1’></option>
<option value=’值1’></option>
</select>
<textarea cols=’列数’ rows=’行数’></textarea>
<input type=’submit’ value=’值’/>
</form>
实例：
-
<html>
-
<head>
-
<title>第五个网页
</title>
-
</head>
-
<body>
-
<h1>登录系统
</h1>
-
<form action='./HTML5/1.html' method='get'>
-
用户名：
<input type='text' name='username' size='20'>
<br/>
-
密 码：
<input type='password' name='password' size='20'>
<br/>
-
<input type='image' src='./images/denglu.gif' value='登录'/>
-
<input type='submit' value='登录' />
-
<input type='reset' value='重新填写' />
-
</form>
-
-
<br/>
-
<br/>
-
-
<form action='./HTML5/1.html' method='get'>
-
您的姓名：
<input type='text' name='username' size='20'>
<br/>
-
密 码：
<input type='password' name='password' size='20' />
<br/>
-
<input type='checkbox' name='fruit1' />香蕉
<br/>
-
<input type='checkbox' name='fruit1' checked />苹果
<br/>
-
<input type='radio' name='fruit2' />香蕉
<br/>
-
<input type='radio' name='fruit2' checked />苹果
<br/>
-
<input type='hidden' name='add' value='123456' />
<br/>
-
<select name='city'>
-
<option value=''>----请选择----
</option>
-
<option value='beijing'>北京
</option>
-
<option value='hunan'>湖南
</option>
-
<option value='hubei'>湖北
</option>
-
<option value='henan'>河南
</option>
-
</select>
<br/>
-
<textarea cols='40' rows='10'>请输入详细资料......
</textarea>
<br/>
-
-
<input type='file' name='myfile'/>请选择文件
<br/>
-
-
<input type='image' name='submit' src='./images/denglu.gif'>
-
<input type='reset' name='reset' value='重置信息'>
-
<br/>
-
</form>
-
</body>
-
</html>
语言字符集
在写网页时，最好在HTML文件中写明了语言设置，这样浏览器就会通过网页信息，自动将语言选项设置为相应的语言。
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk">
</head>
背景色彩和文字色彩
<body link=’red’ text=’blue’>
你好
<a href=’http://www.baidu.com’>百度</a>
</body>
页面空白
<body leftmargin=’0px’ topmargin=’0px’>
你好
</body>
让文本靠近左上角
target
<a href=’url’ target=’_blank’> 新窗口
<a href=’url’ target=’_self’> 本窗口
<a href=’url’ target=’_parent’> 父窗口
<a href=’url’ target=’_top’> 整个浏览器窗口
<a href=’url’ target=’指向frame的名字’>
标识线
<hr size='2px' width='100px' color=’red’/>
字体大小
<font style=”font-size:150px”>标题</font>
此句用到了CSS，可以将字体无限放大，因为用<h1>最大此时满足不了需要
face=”黑体” 可以给字设置不同的字体，如果所设置的字体在字体库中没有的话，那么就使用默认字体。
会移动的文字
<marquee>滚动</marquee>
实例：
-
<html>
-
<head>
-
<title>第六个网页
</title>
-
<mete http-equiv='Content-Type' content='text/html;charset=UTF-8' />
-
</head>
-
-
<body link='yellow' text='blue' topmargin='0px' leftmargin='0px'>
-
第六个网页
-
<hr size='2px' width='100px' color='red'/>
-
<a href='http://www.baidu.com'>百度
</a>
-
<hr/>
-
<h1>标题
</h1>
-
<hr/>
-
<font size='6'>标题
</font>
-
<hr/>
-
<b>
<u>
<i>标题
<i>
</u>
</b>
-
<hr/>
-
<font face='黑体' style='font-size: 30px;'>标题
</font>
-
-
<div style='border:1px solid red;width: 400px;'>
-
你好
<img src='./images/2.jpg' width='200px' alt=’图片’>
-
</div>
-
<hr/>
-
<select name='city' size='2'>
-
<option value=''>----请选择----
</option>
-
<option value='beijing'>北京
</option>
-
<option value='hunan'>湖南
</option>
-
<option value='hubei'>湖北
</option>
-
<option value='henan'>河南
</option>
-
</select>
<br/>
-
<hr/>
-
<marquee>滚动
</marquee>
-
</body>
-
</html>
综合案例：
-
<html>
-
<head>
-
<title>第七个网页
</title>
-
</head>
-
<body>
-
<table border='0px' width='100%'>
-
<tr height='150px'>
-
<td>
</td>
-
<td>
</td>
-
<td>
</td>
-
</tr>
-
<tr>
-
<td width='700px'>
</td>
-
<td>
-
<table border='0px' width="535px" height="300px" background='./images/biggd.jpg'>
-
<tr>
-
<td>
</td>
-
<td>
</td>
-
</tr>
-
<tr>
-
<td width='230px'>
</td>
-
<td>
-
<form action='./HTML7/1.html' method='get'>
-
<table border='0px' height='100%'>
-
<tr>
-
<td>用户名
</td>
-
<td>
<input type='text' name='username'>
</td>
-
</tr>
-
<tr>
-
<td>密码
</td>
-
<td>
<input type='text' name='password'>
</td>
-
</tr>
-
<tr>
-
<td colspan='2'>
-
<input type='submit' value='进入邮箱'>
-
-
-
<input type='reset' value='重新设置'>
-
</td>
-
</tr>
-
<tr>
-
<td colspan='2'>
-
<a href='#'>找回密码
</a>
-
<a href='#'>注册新用户
</a>
-
</td>
-
</tr>
-
</table>
-
</form>
-
</td>
-
</tr>
-
<tr>
-
<td>
</td>
-
<td>
</td>
-
</tr>
-
</table>
-
</td>
-
<td>
</td>
-
</tr>
-
<tr>
-
<td>
</td>
-
<td>
</td>
-
<td>
</td>
-
</tr>
-
</table>
-
</body>
-
</html>
PS：这里只是一部分常用的HTML语法，而且并没有包括HTML5的新语法，更系统的学习可以使用w3cschool，也可以百度找资料。
扩展1：使用HTML5中的表单元素、进度条、范围值
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>
</title>
-
</head>
-
<body>
-
<form action="#" method="get">
-
<fieldset name="fs1">
-
<legend>文本域1
</legend>
-
<label for="username">用户名
</label>
<input type="text" name="username" />
<br />
-
<label for="password">密码
</label>
<input type="password" name="username" />
-
</fieldset>
-
<fieldset>
-
<legend>验证输入数据
</legend>
-
<label for="price">价格
</label>
<input type="number" min="1" max="100" step="2" value="1" name="price" id="price"/>
<br />
-
<label for="num">数量
</label>1
<input type="range" value="40" min="0" max="100"/>100
<br />
-
<label for="lasttime">时间
</label>
<input type="date" id="lasttime" name="lasttime" />
<br />
-
<label for="mycolor">颜色
</label>
<input type="color" id="mycolor" name="mycolor" />
<br />
-
<label for="mysearch">搜索
</label>
<input type="search" id="mysearch" name="mysearch" />
-
</fieldset>
-
-
<progress id="myprogress" value="10" max="100">
</progress>
-
<p>
-
<button type="button" value="30">30%
</button>
-
<button type="button" value="60">60%
</button>
-
<button type="button" value="90">90%
</button>
-
</p>
-
<meter id="mymeter" value="90" min="10" max="100" low="40" high="80" optimum="60">
</meter>
-
<p>
-
<button type="button" value="30">30%
</button>
-
<button type="button" value="60">60%
</button>
-
<button type="button" value="90">90%
</button>
-
</p>
-
<script type="text/javascript">
-
var buttons =
document.getElementsByTagName(
"button");
-
var progress =
document.getElementById(
"myprogress");
-
var meter =
document.getElementById(
"mymeter");
-
for (
var i =
0; i < buttons.length; i++) {
-
buttons[i].onclick =
function(e) {
-
progress.value = e.target.value;
-
meter.value = e.target.value;
-
};
-
}
-
</script>
-
</form>
-
</body>
-
</html>
----------参考《韩顺平.轻松搞定网页设计(html+css+js)》
<li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true"> <use xlink:href="#csdnc-thumbsup"></use> </svg><span class="name">点赞</span> <span class="count">1</span> </a></li> <li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{"mod":"popu_824"}"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-csdnc-Collection-G"></use> </svg><span class="name">收藏</span></a></li> <li class="tool-item tool-active is-share"><a href="javascript:;"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-csdnc-fenxiang"></use> </svg>分享</a></li> <!--打赏开始--> <!--打赏结束--> <li class="tool-item tool-more"> <a> <svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg> </a> <ul class="more-box"> <li class="item"><a class="article-report">文章举报</a></li> </ul> </li> </ul> </div> </div> <div class="person-messagebox"> <div class="left-message"><a href="https://blog.csdn.net/q547550831"> <img src="https://profile.csdnimg.cn/6/7/2/3_q547550831" class="avatar_pic" username="q547550831"> <img src="https://g.csdnimg.cn/static/user-reg-year/1x/9.png" class="user-years"> </a></div> <div class="middle-message"> <div class="title"><span class="tit"><a href="https://blog.csdn.net/q547550831" data-report-click="{"mod":"popu_379"}" target="_blank">Switchvov</a></span> </div> <div class="text"><span>发布了435 篇原创文章</span> · <span>获赞 419</span> · <span>访问量 146万+</span></div> </div> <div class="right-message"> <a href="https://bbs.csdn.net/forums/p-q547550831" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-messageboard">他的留言板 </a> <a class="btn btn-sm bt-button personal-watch" data-report-click="{"mod":"popu_379"}">关注</a> </div> </div> </div>
2077
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
