博客列表 >第一课常见的文本元素、标签等使用-2019.3.11日

第一课常见的文本元素、标签等使用-2019.3.11日

夜澜风的博客
夜澜风的博客原创
2019年03月13日 13:59:00791浏览

今天是开课的第一天,听的还算可以,不知道往后的时光是否能够跟的上,但愿自己能够坚持下去。

对于老师讲的重点比较深的有:

white-space:nowrap; /*文本不会换行 */

overflow: hidden; /*超出部分隐藏*/

text-overflow:ellipsis;/* 用省略符号来代表被修剪的文本*/

text-indent:2em;/*首行缩进*/

<strong>定义加重语气</strong>

<del>定义删除字</del>

text-decoration: none; /*去掉下划线*/

abbr /* 缩写*/ 注释:可以在 <abbr> 标签中使用全局的 title 属性,这样就能够在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本。


<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><!-- 不允许用户缩放 这里一般用到手机端自适应头部申明-->

感谢群里小丑鱼同学提供的单词表,需要的同学可以抄写下来,每天抄个2遍基本就能记忆下来了https://wenku.baidu.com/view/255fdcde81c758f5f61f67ba.html?from=search&qq-pf-to=pcqq.group

块级元素和行内元素

https://www.cnblogs.com/zengjs/p/3237778.html

行内元素和块状元素有些?

https://www.cnblogs.com/xianyijun6551/p/6506197.html


“.”css中表示class选择器符号

“#”表示id选择器符号


实例

<!--1:前端知识介绍-->
<!--文档结构:html\head\body\title\meta-->
<!-- 声明 告诉浏览器以下的文档是html文档 -->
<!DOCTYPE html>
<html>
<head><!-- 文档头部 head  head内部的元素可以引用脚本、样式表、为网页提供元信息 -->
	<title>学习WEB第一节课</title><!-- 文档头部标题 -->
	<meta charset="utf-8">
	<!-- 不允许用户缩放 -->
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<!-- 引入外部文件(link) -->
	<link rel="stylesheet" type="text/css" href="style.css">
	<!-- rel:规定当前文档与被链接文档之间的关系-->
	<!-- type:定义被连接文档的类型 -->
	<link rel="icon" type="image/x-icon" href="favicon (1).ico"><!-- 引入头部logo-->
	<style type="text/css">
		/*内部样式*/
     *{margin:0;padding: 0; }
     p{
     	width:400px; 
     	text-indent:2em;/*首行缩进*/

     }
     div{
     	width: 300px;
     	height: 20px;
     	background: #f2f2f2;
     	/*white-space 规定如何处理元素内的空白*/
     	white-space:nowrap; /*文本不会换行 */
     	/*overflow 属性规定当内容溢出元素框时发生的事情*/
     	overflow: hidden; /*超出部分隐藏*/
        /*text-overflow (css3)属性规定当文本溢出包含元素时发生的事情*/
     	text-overflow:ellipsis;/* 用省略符号来代表被修剪的文本*/
     }
	</style>
</head>

<body>
<!-- 页面中常用文本元素 -->
<!-- 标题是通过 <h1> ~ <h6> 标签进行定义的 -->
	<h1>第一个标题标签</h1>
	<h2>第一个标题标签</h2>
	<h3>第一个标题标签</h3>
<!-- 段落是通过 <p> 标签定义的-->
	<p>***在慰问电中表示,惊悉埃塞俄比亚航空公司一架客机失事,造成包括埃塞俄比亚、肯尼亚、中国公民在内的重大人员生命损失,我谨代表中国政府和中国人民,并以我个人的名义,向遇难者表示沉痛的哀悼,<br>向遇难者家属表示深切的慰问。相信埃塞俄比亚政府能够有效做好善后工作,中方将提供必要的支持和帮助。
	</p>
	<b>加粗文本</b>
	<br>
	<small>小号字体</small>
	<br><!-- 定义换行 -->
	<hr> <!-- 定义水平线 -->
	<!-- 文本格式化(b\del\) -->
	<strong>定义加重语气</strong>
	<del>定义删除字</del>
	<br>
	<del>599元</del><b>399元</b>
    <p> <abbr title="HyperText Markup Language"> html</abbr>(超文本标记语言)</p>
 <!--  页面中常用文本属性: -->
    <!-- 首行缩进(text-indent) -->
    <!--网页中的链接:a-->
  <!--   <a href="地址"></a> -->
  <a href="http://www.php.cn/" target="_blank"> php中文网</a>

  <div><a href="demo2.html" target="_blank">魔方公寓获得1.5亿美元D轮融资,未来将运营人才公寓和公租房 | 钛快讯</a></div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


实例

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结:viewport为窗口视区,手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。width为控制窗口viewport的大小,device-width为设备宽度缩放为100%,initial-scale为初始缩放比例,maximum-scale允许用户缩放到最大比例,minimum-scale允许用户缩放到最小比例。

实例

<!DOCTYPE html>
<html>
<head>
	<title>魔方公寓获得1.5亿美元D轮融资</title><!-- 文档头部标题 -->
	<meta charset="utf-8">
	<link rel="icon" type="image/x-icon" href="favicon (1).ico"><!-- 引入头部logo-->
	<style type="text/css">
		/*内部样式*/
     *{margin:0;padding: 0; }
     div{
     	margin:100px auto;/* 居中*/
     	width:700px; /* 定义宽度*/
      height: 200px; /* 定义高度*/

     }
     abbr{
     	text-decoration: none;/*去掉下划线*/
     	color:#00A4A0;
     }
     p{
     	 /*字体大小*/
     	font-size:14px;
     }
     img{
     	margin:40px 0;
     }
     h1{
     	font-family:微软雅黑; /*改变字体*/
     }
     .box{line-height: 30px; margin-bottom: 20px;}
	</style>

</head>

<body>
  <div>
  	 <h1 >魔方公寓获得1.5亿美元D轮融资,未来将运营人才公寓和公租房 | 钛快讯</h1>
  	<!--  内联样式写法 -->
  	 <p style="color: #ccc; line-height: 70px;"><abbr title="高梦杨">高梦杨</abbr>  .   2019-3-11    13:55</p>
  	<!--  文字居中 背景色 -->
  	 <p style="text-align: center; background:#f2f2f2; line-height: 70px;"> <b>摘要:</b> 新一轮融资到手后,魔方将参与到城市人才公寓建设和公租房运营管理与行业规则的制定。</p>

  	 <img src="1.jpeg" width="700" alt="这是一张图片">
  	 <p class="box"> <b style="font-size: 18px;">钛媒体快讯 | 3月11日消息:</b>钛媒体获悉,魔方生活服务集团获得由加拿大机构基金管理公司CDPQ投资的1.5亿美元的D轮融资。</p>
  	 <p class="box">公开资料显示,魔方生活服务集团是国内的集中式长租公寓的代表,也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息,目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓,面向企业蓝领的9号楼公寓,立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
  	  <p class="box">公开资料显示,魔方生活服务集团是国内的集中式长租公寓的代表,也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息,目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓,面向企业蓝领的9号楼公寓,立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
      <img src="https://images.tmtpost.com/uploads/watermark/1400/849c7a29e879768fc4ae5bb3802849ec7b1b8a15_1400_333.png?imageMogr2/strip/interlace/1/quality/85/format/jpg&ext=.png" alt="魔方公寓历年融资情况 来源:天眼查" width="700px">
      <p style="text-align: center;margin: 10px 0;">魔方公寓历年融资情况 来源:天眼查</p>
      <hr style="margin-bottom: 300px;width: 150px;margin:0 auto;margin-bottom: 30px;">
      <p class="box">公开资料显示,魔方生活服务集团是国内的集中式长租公寓的代表,也是最早一批投身连锁长租公寓行业的创业公司。根据魔方公寓提供的信息,目前魔方是国内在营房量最大、营业收入最高的集中式公寓运营商。旗下产品包括面对都市白领的魔方公寓,面向企业蓝领的9号楼公寓,立足中高端的摩尔公寓以及面向年轻用户的V客青年公寓。</p>
  </div>
  </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议