HTML基础知识

最新推荐文章于 2023-05-03 22:19:26 发布

Super戏子

最新推荐文章于 2023-05-03 22:19:26 发布

阅读量241

点赞数

分类专栏： Java基础篇

本文链接：https://blog.youkuaiyun.com/qq_41213748/article/details/79546488

版权

Java基础篇专栏收录该内容

17 篇文章

订阅专栏

一.1.HTML概述：Hyper Text Markup Language

超文本标记语言，是一种专门用于创建Web超文本文档的编程语言，它能告诉Web浏览程序如何显示Web文档（即网页）的信息，如何链接各种信息。

2.HTML基本结构：

<head></head>中主要包括网页的基本信息
网页标题
元数据标签
<body></body>中主要包括网页内容

3.网页基本信息：

<meta>标签

二：HTML基本标签

标题标签

段落标签：<p>...<p>

换行标签：<br/>

eg:

<h1>北京欢迎你</h1>

<p>
北京欢迎你，有梦想谁都了不起！<br />
有勇气就会有奇迹。<br />
北京欢迎你，为你开天辟地<br />
……
</p>

水平线标签：<hr/>

注释
特殊符号

图像标签：常见的图像格式：jpg，gif，pnc,bmp.

超链接使用场合
1页面间链接：从一个页面链接到另外一个页面

2功能性链接：电子邮件，迅雷，QQ

列表的分类：无序列表，有序列表，定义列表

无序列表eg:

<ul>(声明无序列表)
<li>桔子</li>
<li>香蕉</li> <li>...</li>:声明列表项
<li>苹果</li>
</ul>

无序列表的类型
ul标签的type属性取值

有序列表eg：

<ol>(声明有序列表)
<li>桔子</li>
<li>香蕉</li> <li>...</li>:声明列表项
<li>苹果</li>
</ol>

有序列表的类型
ol标签的type取值

定义列表eg：

<dl> (声明定义列表)
<dt>所属学院</dt> <dt>...</dt>:声明列表项
<dd>计算机应用</dd> <dd>...</dd>:定义列表项内容
<dt>所属专业</dt>
<dd>计算机软件工程</dd>

</dl>

三种列表对比：

类型	说明	项目符号
无序列表	以<ul>标签来实现以<li>标签表示列表项	通过type属性设置项目符号 disc（默认）、square和circle
有序列表	以<ol>标签来实现以<li>标签表示列表项	通过type属性设置项目顺序 1(数字，默认)、A（大写字母）、a（小写字母）、I（大写罗马数字）和i（小写罗马数字）
定义类表	以<dl>标签是实现以<dt>标签定义列表项以<dd>标签定义内容	无项目符号和显示顺序

表格标签

<table> (表格标签)
<tr> (行标签)
<td>第1个单元格的内容</td> (单元格标签)
<td>第2个单元格的内容</td>
……
</tr>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>

</table>

表格对齐方式
默认对齐、居中对齐、左对齐、右对齐
单元格对齐方式居中对齐 eg: align=center

水平对齐方式、垂直对齐方式

属性	值	说明
align 水平对齐方式	left	左对齐
	center	居中对齐
	right	右对齐
valign 垂直对齐方式	top	顶端对齐
	middle	居中对齐
	bottom	底端对齐
	baseline	基线对齐

表格的跨行和跨列

<table> colspan:所跨的列数。
<tr> rowspan:所跨的行数。
<td colspan="n">单元格内容</td>
</tr>
<tr>
<td>单元格内容</td>
……
</tr>
......

</table>

表单标签

表单(form)：用来接收用户信息的标签

</form>

表单元素格式：

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
name	指定表单元素的名称。
value	元素的初始值。type 为 radio时必须指定一个值
size	指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text 或 password 时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

表单元素高级属性

只读 readonly="true"
禁用 disabled="true"

练习：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="gbk"/>
      <title>我的first网页</title>
   </head>
   <body>
      <a href="second.html" target="_blank">点击跳转</a>  <br/> <br/>
      <a href="mailto:xyz@163.com">点我发送邮件</a>
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
      <meta charset="gbk"/>
      <title>我的第一个网页</title>
   </head>
   <body>
      <h1> Hello,欢迎学习html知识！</h1>
      <hr/>   <!-- 这是水平线标签 -->
      <p title="beijing"> 
          北京欢迎你，有梦想谁都了不起！<br/>
          为你开天辟地。
      </p>
      <p> 有勇气就会有奇迹。</p>
      中华人民共和国   加油！
      <p> << 孙子兵法 >> </p>
      
   </body>
</html>

运行结果图：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="gbk"/>
      <title>无序列表与有序列表</title>
   </head>
   <body>
      <ul type="circle">
         <a href="images/apple.jpg"> <li>XX</li> </a>
         <li>薛晋</li>
         <li>学生</li>
         <a href="http://www.baidu.com" target="_blank"><li>YY</li></a>
      </ul>

      <ol type="a">
         <li>刘亦菲</li>
         <li>胡歌</li>
         <li>吴京</li>
         <li>演员</li>
      <ol>

      <dl>
         <dt>Java</dt>
         <dd>Java是一种应用广泛的编程语言</dd>
         <dt>Python</dt>
         <dd>Python是一种脚本编程语言</dd>
      </dl>
   </body>
</html>

运行结果图：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>sublime软件</title>
</head>
<body>
	用sublime创建一个html文件!
	<h1>你好，Sublime</h1>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册页面</title>
</head>
<body>
	<form method="post" action="serverURL" enctype="multipart/form-data">
	    注册用户名：<input type="text" name="username"> <br/> <br/>
	    注册密码：<input type="password" name="pwd"/> <br/>
	    性别: <input type="radio" name="sex" value="boy" checked="true" /> 男
	          <input type="radio" name="sex" value="girl"/> 女
	          <br/>
	    兴趣爱好： <input type="checkbox" name="hobby" value="football"> 足球
	               <input type="checkbox" name="hobby" value="dancing" checked="true">  跳舞
	               <input type="checkbox" name="hobby" value="reading"> 阅读
	               <input type="checkbox" name="hobby" value="jogging"> 跑步
	               <br/>
	    籍贯：<select name="home">
	              <option value="shanxi">陕西</option>
	              <option value="jiangsu">江苏</option>
	              <option value="henan">河南</option>
	          </select>
	          <br/>
	          <input type="button" disabled="true" value="普通按钮">
	          <br/>
	          <input type="image" src="images/laba.png">
	          <br/>
	          自我介绍：<br/>
	          <textarea name="introduce" cols="30" rows="3" readonly="true"></textarea>
	          <br/>
	          上传照片：<input type="file" name="pic"/>
	          <br/>
	          <input type="submit" value="注册" /> <input type="reset" value="重置">
	</form>
</body>
</html>

运行结果图：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table标签</title>
</head>
<body>
	<table border="1" align="center">
	    <thead>
	        <th>学号</th>
	        <th>姓名</th>
	        <th>性别</th>
	        <th>成绩</th>
	    </thead>
	    <tbody>
		    <tr>
		       <td>1</td>
		       <td>吴京</td>
		       <td>男</td>
		       <td>95.5</td>
		    </tr>
		    <tr>
		       <td>2</td>
		       <td>胡歌</td>
		       <td>男</td>
		       <td>95</td>
		    </tr>
		    <tr>
		       <td rowspan="2">3</td>
		       <td>洪金宝</td>
		       <td>男</td>
		       <td>80.5</td>
		    </tr>
		    <tr>
		       
		       <td>成龙</td>
		       <td>女</td>
		       <td>70.5</td>
		    </tr>
		    <tr>
		       <td colspan="3">学生信息</td>
		       <td>总分</td>
		    </tr>
	    </tbody>
	</table>
</body>
</html>

运行结果图：