HTML实训课程笔记_01

最新推荐文章于 2021-06-05 02:46:20 发布

redarmychen

最新推荐文章于 2021-06-05 02:46:20 发布

阅读量2.3k

点赞数

分类专栏：前端技术课程系列

本文链接：https://blog.csdn.net/redarmy_chen/article/details/25828563

版权

前端技术课程系列专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1.第一天：

1.
HTML:超文本标记语言.
       超文本：在你的文本中添加了非文字的信息(比如，图片，视频等)
    1.头部分：提供网页信息
    2.主体部分：提供网页中内容

案例：

<!DOCTYPE HTML>
<!-- 文件的约束 --dtd约束  规定你的html必须是根标签 -->
<html> <!--根标签-->

   <head>  <!--头部分-->
       <title>第一个html文件</title>
   </head>
   
   <body bgcolor="red"> <!--主体部分-->
       hello ！<br/><!--换行-->xxx  ！！
	   ！
   </body>
   
</html>

2.
dtd约束
     html5 <!DOCTYPE HTML>

3.
HTML元素结构
    1.标签：<>和标签名组成    <html>
    2.元素： <html>开始到</html>组成部分
    3.属性： <标签名属性名="属性值" 属性名="属性值"></标签名> <br/>
    以上是概念
    元素结构的分类：
        1.HTML元素
        2.head元素
       3.body元素

4.
常用的标签
   1.html标签根标签
   2.head标签头标签
           title标签：网页的标题
          meta标签:提供网页的原数据比如(网页的作者，关键字，文件类型等)
   3.body标签主体标签
            <br/>标签：换行的作用

案例：

<!DOCTYPE HTML>
<html>
	<head><!--提供的是网页信息-->
	
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<!-- 这个网页的文件类型(ContentType='text/html; charset=gb2312') -->
		<meta name="description" content="这个网站是一个学习及娱乐为一体的网站"/> 
		 <!-- description='这个网站是一个学习及娱乐为一体的网站' -->
		<meta http-equiv="author" content="redarmychen"/>
		<!--这个网页的作者就是redarmychen  author='redarmychen' -->
		
		<meta http-equiv="refresh" content="2;URL=http://www.baidu.com"-->
		<!--这个网页会停留2秒，自动刷新到百度页面上-->
		
		<link rel="icon" href="favicon.ico" type="image/x-icon"> 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

		<title>无标题文档</title><!--网页的标题-->
		
	</head>

	<body bgcolor="#00FFCC"><!--提供的网页内容信息-->
	    <!--Tab键-->
	</body>
</html>

4.pre标签

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>赞军哥</title>
	</head>

	<body>
	    <pre>
	     赞军哥
		 山外青山楼外楼，乐知学院军哥牛！
		 要问军哥哪里牛，青楼青楼还青楼！
		</pre>
		
		 <h3>赞军哥</h3>
		  <hr noshade="noshade" width="20%" align="left"/>
		 <p> 山外青山楼外楼，乐知学院<b>军哥</b><i>牛</i>！<br/>
		    要问军哥<font color="#FF0000" size="+3">哪里牛</font>，<u>青楼青楼还青楼</u>！
		 </p>
	</body>
</html>

5.link标签

<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>标题的图标</title>
		
		<!--引入了外部的样式文件，对我的网页进行样式处理-->
		<link rel="stylesheet" type="text/css"  href="style.css" />
		<!--标题图标的显示操作 icn图片它是特殊的图片16*16像素-->
		<link href="favicon.ico" rel="SHORTCUT ICON"/>
		
	</head>
<body>
</body>
</html>

6.table标签

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>表格标签的使用</title>
	</head>

	<body>
	          <h3>Table标签的使用</h3>
			  <hr noshade="noshade">
			  <!--
			  table表格标签  border表格的边框  
			  cellspacing 表格外间距(td与td之间 td与table边框之间的距离) （规定单元格之间的空白）
			  cellpadding 表格内间距(文本与表格之间间隙)（规定单元边沿与其内容之间的空白。）
			  一般这个两个都是结合使用 默认都把它设置成0的值
			  --->
			  <table border="1px" cellspacing="0" cellpadding="0">
			      <tr>
				      <th>姓名</th>
					  <th>性别</th>
					  <th>年龄</th>
				  </tr>
			      <tr>
				     <td>毛泽东</td>
					 <td>男</td>
					 <td>83</td>
				  </tr>
				  <tr>
				     <td>刘少奇</td>
					 <td>男</td>
					 <td>67</td>
				  </tr> 
			  </table>
	</body>
	
	
</html>

7.table标签（合并行与列的案例）

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>Table合并行与列的案例</title>
	</head>

	<body>
	
	      <table border="1px" cellpadding="0" cellspacing="0" width="800" height="200" align="center">
		      <tr>
			      <td>1</td>
			      <td rowspan="2">陈红军</td><!--rowspan跨行它跨几行，对应的行的列，就不能再写了。why?因为被它占用-->
			      <td>陈红军：曾用名：二孩，Java高级讲师。精通java</td>
			  </tr>
			  
			  <tr>
			      <td>2</td>
				  <!--<td>陈红军</td> 被第一行的第二列给占用了-->
				  <td>陈红军：曾用名：红孩儿,android高级讲师，精通android</td>
			  </tr>
	      </table>
		  
		  
		  
		  <hr noshade="noshade">


          <table border="1px" cellpadding="0" cellspacing="0" width="800" height="200" align="center">
		       <tr>
			       <th colspan="3">公共课</th><!--colspan 跨列 那么被跨的列 就不能再写-->
				   <th>专业课程</th>
			   </tr>
			   
			   <tr>
			       <td>体育课</td>
				   <td>英语课</td>
				   <td>高数课程</td>
				   <td>C++课程</td>
			   </tr>
			    
		  </table>	
		  
	</body>
</html>

redarmychen

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML实训课程笔记_01

1.第一天： 1. HTML:超文本标记语言. 超文本：在你的文本中添加了非文字的信息(比如，图片，视频等) 1.头部分：提供网页信息 2.主体部分：提供网页中内容 2. dtd约束 html5 3. HTML元素结构 1.标签： 2.元素：开始到组成部分
复制链接

扫一扫

专栏目录