前端笔记2

<!-- 
重点:在页面中独占一行的元素称为块元素   <h1>一级标题</h1>,p标签等
               用于在网页中进行布局

      在页面中不会独占一行的元素叫做行元素  em标签
               用来包裹文字
			   
	一般在块元素里面放行元素,块元素中基本都能放。
	不在行元素中放块元素。
	
	
	浏览器在解析网页时,会对网页中不符合规范的内容进行改正
	比如:标签写在根元素的外面
	      p1元素中嵌套了块元素
		  。。。。。。
 -->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	<!-- 在网页中html专门负责网页的结构,css是负责样式。 -->
	 
	 
	<!-- 1.标题标签h1-h6  一共六级标签 h1最重要   一般用h1-h3  
	 2.在页面中独占一行的元素称为块元素
	  例:<h1>一级标题</h1> -->
	  
    <!-- 	 3.p标签中的内容表示一个段落
	   p也是一个块元素 -->
	  <p>p标签中的内容表示一个段落</p>
	  
	  <p>1111111111111111111111111111</p>
	  <p>22222222222222222222222222222222222</p>
	   
	   
	   
	   
	   
	   
	   
	   
     <!-- 	 4.hgroup标签用来为标题分组。 -->
		<hgroup>
			<h1>回乡偶书</h1>
			<h2>其一</h2>
		</hgroup>
	
	<!-- em标签用于语音语调的一个加重 (斜体效果)
	  在页面中不会独占一行的元素叫做行元素
	-->
		<p>今天<em></em>天气真好啊</p>
		
	<!-- 
		 strong表示强调,重要内容(加粗效果)
	 -->	
	<p>你今天必须要<strong>写完作业</strong></p>
		
		
	鲁迅说:
		<!-- 
		blockquote表示一个长引用。 
		 -->
	<blockquote>
		这句话我从来没有说过?
	</blockquote>
		
		
		<!-- q表示一个短引用 
		(效果就加了一个引号)
		-->
		
	子曰:<q>学而时习之</q>	
		
		<!-- 
		 br表示页面中的换行
		 
		 -->
		 <br /><!-- 强制换行 -->
	<br />
	<br />
		今天天气不错
		
		
		
	例题:
		
		<h1>11111111111</h1>
		<h4>2222</h4>
		<p>111111111112222222</p>
		<p>2222222222222</p>
		<h4>2222</h4>
		<p>111111111112222222</p>
		<p>2222222222222</p>
		<p>作者:123 <br />2019-9-6</p>
		
		
		
		
		<!-- 重点记住  加粗strong   倾斜em    四个标签重点记住前面的-->
		
		<!-- 加粗 -->
		<strong>啦啦啦</strong>12121<b>243</b>4345
		<!-- 倾斜 -->
		<em>123</em>456<i>123</i>42342
		<!-- 删除线 -->
		<del></del>123145<s>121</s>23
		<!-- 下划线 -->
		<ins>545</ins>sf<u>2165</u>423
		
		///图像标签
		
		<!-- 图像标签 -->
		<h4>图像标签的使用:</h4>
		<img src="img/1.jpg" />
		
		<h4>替换文本   图片显示不出来时候用文字替换</h4>
		<img src="img/11.jpg"alt="我是大白菜" />
		
		<h4>替换文本 鼠标放在图像上,提示文字</h4>
		<img src="img/1.jpg" alt="我是大白菜" title="大白菜" />
		
		<h4>width 宽度 height高度</h4>
		<img src="img/1.jpg" alt="我是大白菜" title="大白菜" width="500" height="100"/>
		
		
		<h4>border 给图像设定边框</h4>
		<img src="img/1.jpg" alt="我是大白菜" title="大白菜" width="500" height="100" border="15"/>
		
		相对路径3种
		
		
		
		绝对路径2种
		<img src="C:\Users\张文涛\Desktop\Mystore-RegisterAndLogin\WebContent\image\1.jpg"/>
		<img src="http://www.yxkoo.com/assets/images/logo.png" />
		
		
	
		
	</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN"><!-- 中文网站 -->
<!-- <html lang="en">英文网站 -->
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	超链接<br />
<!-- 	1.外部链接
	target 打开窗口的方式 默认是_self 当前窗口打开页面 _blank 新窗口打开页面
	 -->
	<a href="http://www.yxkoo.com/" target="_blank">点他</a>
<!-- 	2.内部链接 -->
	<a href="index1-15.html"></a>
	<!--3. 空连接 -->
	<a href="#"></a>
	<h4>4.下载链接里面是文件 .exe或者压缩包 zip</h4>
	<a href="img.zip">下载文件</a>
	<h4>5.网页元素的链接</h4>
	<a href="http://www.yxkoo.com/"><img src="img/1.jpg"/></a>
	
	<h4>6.瞄点链接 </h4>
	
	
	1<br />
	<a href="#live">2</a><br />
	<a href="#3">3</a><br />
	4<br />
	5<br />
	6<br />
	
	
	<h4>1</h4>
	111111111111111
	<h4 id="live">2</h4>
	222222222222222
	<h4 id="3">3</h4>
	333333333333333
	<h4>4</h4>
	444444444444444
	<h4>5</h4>
	555555555555555
	<h4>6</h4>
	666666666666666
	
	
	特殊字符( 空格 大于号 小于号)
	空格&nbsp;
	小于&lt;
	大于&gt;
	
	
	
	
	
	
	
	
	
	</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值