HTML基础入门——常用标签

HTML基础入门

1、html概述

HTML(Hyper Text Markup Language):

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

2、html标签

HTML标签

  • HTML 标记标签通常被称为 HTML 标签 (HTML tag)
  • HTML 标签是由尖括号包围的关键词,比如
  • HTML 标签通常是成对出现的
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
  • HTML标签不区分大小写

2.1、标题标签

标题标签:h1~h6,h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签title>
	head>
	<body>
		搴汀洲兮杜若,将以遗兮远者。
		<h1>一级标题h1>
		<h2>二级标题h2>
		<h3>三级标题h3>
		<h4>四级标题h4>
		<h5>五级标题h5>
	body>
html>


调试结果:
HTML基础入门——常用标签_第1张图片

2.2、链接标签

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>链接标签title>
	head>
	<body>
		
		<a href="http://i.chaoxing.com" target="_blank">点击我跳转到超星a>
	body>
html>


调试结果:
HTML基础入门——常用标签_第2张图片
HTML基础入门——常用标签_第3张图片

2.3 、图片标签

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片标签title>
	head>
	<body>
		<img src="G:\picture\盘州古城.jpg" width="500" height="280" title="盘州古城" border="3"
		alt="加载图片失败">
	body>
html>


调试结果:
HTML基础入门——常用标签_第4张图片
HTML基础入门——常用标签_第5张图片

2.4、段落标签

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>段落标签title>
	head>
	<body>
		<p>第一个段落p>
		<p>第二个段落p>
		<p>第三个段落p>
	body>
html>


调试结果:
HTML基础入门——常用标签_第6张图片

2.5、列表标签 + div标签

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表标签 + div标签title>
	head>
	<body>
		<ol type="A" start="1">
			<li>mysqlli>
			<li>javali>
			<li>pythonli>
			<li>phpli>
		<br>
		<ul style="square">
			<li>mysqlli>
			<li>javali>
			<li>pythonli>
			<li>phpli>
		<br>
		<div style="width: 200px; height: 200px; background-color: hotpink; border: 3px solid white;">这是一个div标签div>
		ul>
		ol>
	body>
html>


调试结果:
HTML基础入门——常用标签_第7张图片

2.6、表格标签

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格标签title>
	head>
	<body>
		<table border="1" width="600" cellspacing="0" cellpading="10" align="left">
			<tr>
				<th>书名th>
				<th>单价th>
				<th>数量th>
				<th>小计th>
				<th>操作th>
			tr>
			<tr align="center">
				<td>java基础入门td>
				<td>48.00td>
				<td>60td>
				<td>2880.00td>
			tr>
			<tr align="center">
				<td>数据分析td>
				<td>54.00td>
				<td>2td>
				<td>108.00td>
			tr>
			<tr align="center">
				<td>爬虫td>
				<td>68.00td>
				<td>1td>
				<td>68.00td>
			tr>
			<tr align="center">
				<td>合计td>
				<td colspan="3">3056.00td>
			tr>
		table>
	body>
html>


调试结果:
HTML基础入门——常用标签_第8张图片

2.7、表单标签

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单标签title>
	head>
	<body>
		<form action="regSuccess.html" method="get">
			<table>
				<tr>
					<td>账号:td>
					<td><input type="text" name="userName" />td>
				tr>
				<tr>
					<td>密码:td>
					<td><input type="password" name="pwd" />td>
				tr>
				<tr>
					<td>性别:td>
					<td>
						<input type="radio" name="sex" value="male" /><input type="radio" name="sex" value="female" />td>
				tr>
				<tr>
					<td>爱好:td>
					<td>
						<input type="checkbox" name="hobby" value="basketball" /> 篮球 
						<input type="checkbox" name="hobby" value="sing" />唱歌
					td>
				tr>
				<tr>
					<td>星座td>
					<td>
						<select name="star"> 
						<option value="1">白羊座option> 
						<option value="2">射手座option> 
						<option value="3">处女座option> 
						<option value="4">天秤座option> 
						select>
					td>
				tr>
				<tr>
					<td>备注:td>
					<td><textarea name="remark" rows="4" cols="50">textarea>td>
				tr>
				<tr align="center">
					<td colspan="2">
						<input type="submit" /> 
						
						<input type="reset" />
					td>
				tr>
			table>
		form>
	body>
html>


regSuccess.html

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册title>
	head>
	<body>
		注册成功!
	body>
html>

调试结果:
HTML基础入门——常用标签_第9张图片
HTML基础入门——常用标签_第10张图片
HTML基础入门——常用标签_第11张图片

2.8、常用标签

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>htmlDemo08title>
	head>
	<body>
		<span>这是一段文字span>
		<hr>
		<span>zheshiyiduanwenzispan>
		<hr>
		我喜欢<b>蓝天b>
		<br>
		red
		green
		blue
		<br>
		大于:>
		小于:<
		大于等于:
		小于等于:
		空格: 
		注册商标:®
		版权:©
	body>
html>


调试结果:
HTML基础入门——常用标签_第12张图片

你可能感兴趣的:(html,html,前端)