HTML基础知识

发布于：2023-02-12 ⋅ 阅读:(618) ⋅ 点赞:(0)

1.0 什么是HTML：

HTML指的是超文本标记语言，它是用来描述网页的一门语言。它不是编程语言，只是一种标记语言

主要包括结构（Structure） 、表现（Presentation）和行为（Behavior）三个方面。

结构写到 HTML 文件中， 表现写到 CSS 文件中， 行为写到 JavaScript 文件中。

例：结构类似动物的身体（HTML），表现类似外观（css），行为类似动作

例：

<html>
   <head>
	<title>我的第一个页面</title>
   </head>
   <body>
       这是页面主体~
   </body>

</html>

title里面的是网页标题：如下“我的第一个页面”

body里面是网页的主体内容

1.1标签汇总：

HTML 提供了 6 个等级的网页标题：h1-h6，依据重要性递减，加了标题的文字会变的加粗，字号也会依次变大。h1最大

1、    段落标签：     <p> 我是一个段落标签 </p>

2、    换行标签：     <br />

3、    文本格式化标签：


    <strong>加粗</strong>   使文本加粗
    <em>倾斜</em>             使文本倾斜
    <del>删除线</del>       这是删除线
    <ins>下划线</ins>        这是下划线

4、    div和span标签


    <div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。
    具体实现：
         <div> 这是头部 </div>    
         <span> 今日价格 </span>

 5、    图片标签：

    在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。
    具体实现：
          <img src="图像URL" >
    解释：
        src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
    
    <img src="" alt="" title="" width="" height="">  //高度和宽度任意改一个就行，等比例自动缩放，也可以不改宽度高度

5.1、图片标签之title用法：     

 提示图片内容

把鼠标放在图片上就可以知道图片是关于什么的（大概会有一两秒延迟）

 

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试一下</title>
</head>
<body>
	
	<h3>让我们插入图片</h3>
	<img src="R.jpg" alt="这是xx图，图显示不出来" title="hhh" />
</body>
</html>

6、    相对路径与绝对路径：

相对路径是从代码所在的文件出发，去寻找目标文件的，这里所指的上一级、下一级和同一级就是图片相对于HTML页面的位置

绝对路径（画线处：）

7、    链接标签

格式：    <a href="跳转目标" target="窗口弹出方式" >  文本或图像 </a>

<body>
	<h1>让我们打开b站</h1>
	<a href="https://www.bilibili.com/" target="_self" >b站</a>

	<h1>让我们打开内部链接</h1>
	<a href="test2.html" target="_blank"> 内部链接 </a>   要和当前页面在同一个文件夹下

	<h1>让我们打开图片链接</h1>
	<a href="img/R.jpg" target="_blank"> 图片跳转 </a>
	
</body>

 效果：

7.1、    链接标签之target：

1.可以看到在空白页面处打开了b站

<h1>让我们打开b站</h1>
	<a href="https://www.bilibili.com/" target="_blank" > b站 </a>

2.可以看到在本页面处实现跳转    跳转到b站

<h1>让我们打开b站</h1>
	<a href="https://www.bilibili.com/" target="_self" >b站</a>

这两者的区别是target=“” 里面的内容，如果是_blank,表示在空白页面实现新的跳转，如果是_self,表示在本页面实现跳转

8、    表格标签

表格的作用：展示数据

表格的基本语法：（表格是嵌套关系）

table是用于定义表格的标签

tr用于定义表格中的行，必须嵌套在table标签内

td用于定义表格中的单元格，必须嵌套在tr标签中

<body>
	<table>
		<tr> <td>姓名</td>  <td>性别</td>  <td>年龄</td> </tr>
		<tr> <td>wang</td>  <td>女</td>   <td>20</td>   </tr>
		<tr> <td>li</td>    <td>男</td>   <td>19</td>   </tr>
	</table>
</body>

效果如下：

综合案例如下： 

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试一下</title>
</head>
<body>
	<table>
		<tr> 
			<th>排名</th>  <th>关键词</th>  <th>趋势</th>  <th>相关链接</th> 
		</tr>

		<tr>  <!--普通单元格1-->  
			<td>1</td>  
			<td>A</td>   
			<td><img src="images/down.jpg"></td>   

			<td>
				<a href="https://www.baidu.com">百度</a>
			    <a href="https://www.bilibili.com/">b站</a>
				<a href="#">贴吧</a>
			</td> 
		</tr>
		
		<tr>  <!--普通单元格2-->  
			<td>1</td>  
			<td>B</td>  
		    <td><img src="images/up.jpg"></td>   

			<td>
				<a href="https://www.baidu.com">百度</a>
				<a href="#">小程序</a>
			</td> 
		</tr>

		<tr>  <!--普通单元格3-->  
			<td>1</td>  
			<td>A</td>   
			<td><img src="images/down.jpg"></td>   

			<td>
				<a href="https://www.baidu.com">百度</a>
			    <a href="https://www.bilibili.com/">b站</a>
				<a href="#">书吧</a>
			</td> 
		</tr>
	</table>
</body>
</html>

也可以把thead放在th外面，用thead包起来

tbody放在td外面，用tbody包起来

9、    合并单元格标签

例：个人简历这一栏就用到了合并单元格

 

 1.跨行合并单元格：    rowspan="合并单元格的个数"

2.跨列合并单元格：    colspan="合并单元格的个数"

合并单元格案例：

<body>
	<table width="300" height="100" border="1" cellpadding="0">
	<tr> 
			<td></td>   <td colspan="2"></td>  
	</tr>

	<tr> 
			<td rowspan="2"></td>  <td></td>   <td></td> 
	</tr>

	<tr> 
			<td></td>  <td></td>

	</tr>
	</table>
</body>

效果：

10、    列表标签 ：无序类别，有序列表，自定义列表

10.1     无序列表：

<body>
	<h4>你喜欢哪个搜索引擎？</h4>
	<ul>
		<li>谷歌</li>
		<li>必应</li>
		<li>百度</li>
		<li>搜狗</li>
	</ul>
</body>

效果：

 10.2    有序列表：其实就是把ul改成ol

<body>
	<h4>你喜欢哪个搜索引擎？</h4>
	<ol>
		<li>谷歌</li>
		<li>必应</li>
		<li>百度</li>
		<li>搜狗</li>
	</ol>
</body>

10.3    自定义列表

基本语法：
<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

 11、    表单

 11.1           input标签

<input> 标签用于收集用户信息 input type = 属性值

11.2        select下拉标签

在页面中，如果有多个选项让用户选择，并想节约用户空间时，可以使用<select>标签控件定义下拉列表

格式：
<select>
    <option>选项一</option>
    <option>选项二</option>
    <option>选项三</option>
</select>

综合案例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试一下</title>
</head>
<body>
	<form>
		用户名：<input type="text" name="user">		<br />
		密码：<input type="password" name="password">   <br />
		
		<!--radio 单选按钮-->
        <!--单选框,且两个单选按钮都取一个name属性才可以完全唯一选一个-->  
		性别：男<input type="radio" name="sex">		女<input type="radio" name="sex">  <br /><br />

		<!--checkbox 单选按钮-->
		技能：C++<input type="checkbox" name="ability">		Java<input type="checkbox" name="ability">		Python<input type="checkbox" name="ability">  <!--复选框，可选多个-->
		<br />

		所在省份：
		<select>
    		<option>山东</option>
    		<option>湖北</option>
    		<option>哈尔滨</option>
    		<option>辽宁</option>
    		<option>浙江</option>
		</select><br /><br />


		上传头像：<input type="file" name="头像">  <br /><br />

		输入手机号：<input type="text">
		<input type="text" value="请输入短信验证码">
		<input type="button" value="获取短信验证码"><br /><br />

		<input type="submit" value="提交">
		<input type="reset" value="重新填写">  <br />

	</form>
</body>
</html>

效果：

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布