Sublime编写html骨架,标题标签,段落标签,水平线标签

<!DOCTYPE html>
<!-- DOCTYPE是document type(文档类型)的缩写,<!DOCTYPE html>声明文档类型是html,位于文档最前面,是网页必备组成成分 -->
<!-- 
什么是HTML?
全称Hyper(超级) Text(文本) Markup标记  Language语言
超级文本标记语言
 -->
 <!-- 双标签 开始标签/结束标签 -->
 <!-- html是页面的根元素,表示整个网页所有标签都在html内
    lang语言种类,强调编码格式是英文   汉字是zh  -->
<html lang="en">
 	<!-- head标签用于定义文档的头部,描述了文档的各种信息和属性,包括标题 
 		zaiweb中的位置和其他文档的关系等  绝大多数文档头部包含数据不会真正作为内容显示给用户 -->
<head>
	<meta charset="utf-8">
 	<!--  meta是head里面一个辅助性标签,“utf-8"是一种字符编码。charset="utf-8"是告诉浏览器此页面属于什么字符编码格式,为下一步浏览器做好翻译工作
 		常见字符编码:gb2312  gbk  unicode utf-8
 		-gb2312  :代表国家标准2312条,其中不包含繁体
 		-gbk:国家标准扩展版(增加繁体,包含所有亚洲字符集)
 		-unicode:万国码
 		-utf-8:是unicode的升级版,代表世界通用的语言编码 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 指定浏览器按某种方式渲染,Compatible是“兼容的”意思   另有文章注解 -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
<!--  name="viewport"指移动端浏览器,width=device-width指的是移动端页面的宽度等于设备的宽度,initial-scale=1.0页面首次被显示时可视区域的缩放级别,取值1.0则页面按照实际尺寸显示,无任何缩放 -->
	<title>标题标签综合</title>
<!-- 网页标题 -->
</head>
<body><!-- 页面的内容,页面的主体,给客户端浏览的区域 -->
	<hr width="1200px" size="50px" color="red" align="right" style="width:1300px; background-color: yellowgreen;" >
	<p>我是p1</p>
	<!-- 段落标签:paragraph   <p></p>双标签 
	块级元素设置宽高独立成行-->
	我是普通文字,你好HELLO
	<p>我是P2</p>
	<h1 style="color:red; width: 400px; height: 200px; background-color: yellowgreen;">我是h1文字</h1>
	<!-- headline  =>h1 h2 .....h5 h6,字体加粗,字号变大
		块级元素==>可以设置宽width高height,独立成行 -->
	<p>我是p3</p>
	我是普通文字我是普通文字我是普通文字
	<h2 style="color:yellow; width: 200px; height: 300px;">我是h2文字</h2>
	<h3 style="width: 400px; color:pink; background-color:greenyellow;">我是h3文字</h3>
	<h4 style="height: 200; color: red; background-color: deeppink;">我是h4文字</h4>
	<h5 >我是h5文字</h5>
	<h6>我是h6文字最后</h6>
	<hr width="1000px" size="30px" color="pink" align="left" style="width:800px;background-color: greenyellow;">
	<!-- hr 水平分割线 
		水平线标签,单标签,常用来分割内容 
		width: 宽度
		size:高度(粗细)
		color:hr标签背景色
		align:对齐方式 center-居中(默认)  left-左对齐  right-右对齐
		没有在style里面写的宽度\颜色\对齐方式等,都属于标签的属性,不是样式style
		每个标签不一定都有属性,但是style每个标签都有
		在hr属性样式中,不允许background-color
-->
	<p>我是p4      我是段落标签  我是段<br />落标签</p>
<!-- 空格折叠现象,不管连续输入多少空格,页面只会显示一个空格 -->
<!-- <br> 换行标签,单标签
	写法:
	<br>
	<br/>
	推荐最佳写法<br />  -->
	<p style="color:red; width: 400px; height: 300px;background-color: pink;" align="right">我是p5</p>

</body>
</html>

注意style样式与属性语法的不同:

<hr width="500px" size="20px" color="red"  align="center" style="width:700px;background-color: green;">

属性是用空格分隔,style用分号分隔;

属性每一元素值都" ",style所有元素以及元素值都在一个" "中.

用style设置对齐方式:

<h1  style="color:yellow; width:1000px; height: 150px; background-color:pink; text-align: right;">我是一级标题,宽1000,高150,黄色,背景色粉色</h1>

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值