前端——HTML基础标签(1)

时间：2021-09-19 15:11:45
<!-- 1.HTML:超文本标记语言，网页内容载体
  <html>标签成对出现，开始标签起始标签，结束标签称为闭合标签 
  html语义化：
      在什么情况下我可以使用什么标签才合理
        更容易被搜索引擎收录
        更容易读出网页内容
-->


<!-- html文档标签 
    不是html标签
    必须放在第一行
-->
<!DOCTYPE html>
<html>
<head>
	<!-- 注释内容  -->
	<title>我的第一个网页</title>
	<!-- 指明标签类型：设置文档编码 -->
	<meta charset="utf-8">
	<style type="text/css">
		body{color:red}
		h1{color:blue;}
		p.ex{color:green;}
	</style>
</head>
<body>
	<p>噜啦啦</p>
	<h1>我是标题 My First CSS Code</h1>
	<p>我是内容</p>
	<p class="ex">我是ex的内容</p>

	<script type="text/javascript">
		var str = "hello.js";
		document.write(str);
	</script>

	i like <code>web and  CSS.</code>
</body>
</html>
<!-- 段落标签 p -->
<!-- 所有连续的空格空行浏览器会自动省略
 -->
<!-- 标题标签<hx>
 	<h1>-<h6>
 		<h1>最大的标签<h6>最小的标签
 			自动换行并添加空行
-->
<!-- 强调标签 
	内联标签：不会自动换行
	<em>:斜体展示
	<strong>:加粗展示
-->
<!-- 引用标签 q -》 “”
	短引用标签：<q>标签浏览器会自动加引号，此处重点在于其表示的寓意
	长引用标签：<blockquote>长引用在使用时前后会自动换行，浏览器自动缩进
 -->
 <!-- 换行标签 
 	空标签：<br/>必须含有终止符
 	分割线标签：<hr/>自动换行加分割线、线条比较粗，颜色为灰色
 -->
 <!-- 特殊字符 
 	空格： 
 	注册：&reg;
 	版权：&copy;
 	商标：™
 -->
 <!-- 地址标签 
    地址:address 自动将地址斜体展示
 -->
 <!-- code标签 
    代码标签：代码一行时使用
 -->
 <!-- pre标签 
    多行代码:文档里面长什么样子，浏览器就展示出什么样。
    预显示标签，不会省略空格换行等
 -->
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
</head>
<body>
	<p>段落1</p>
	<p>段落2</p>
	<p>段落3</p>
	<p>以下为不同的标题标签</p>
	<h1>h1</h1>
	<h2>h2</h2>
	<h3>h3</h3>
	<h4>h4</h4>
	<h5>h5</h5>
	<h6>h6</h6>
	<em>强调！！！</em>
	<strong>强调！！！</strong>
	<p>
		以下文字、图片引用自
		<q>老刘</q>
		以下文字摘自于百度百科对于JavaScript的定义
		<blockquote>
			dsjh,hljd DSA;LDK MNKLwsjkpc;v,;pwl adlmfKSBVM,XZ
		</blockquote>
		长引用结束
	</p>
	<p>在同一个p标签中<br/>换行<br/>换行<br/></p>

	<p>
		java从入门到精通
		<hr/>
		颈椎病康复指南
	</p>
	<h1>春晓</h1>
	<p>春眠不觉晓<br/></p>
	<p> 处处闻啼鸟</p>
	<p>  夜来风雨声</p>
	<p>   花落知多少</p>
	<p>注册：&reg;<br></p>
	<p>版权：&copy;<br></p>
	<p>商标：™<br></p>
	<p>
		<address>
			未央区草滩街道陕西科技大学
		</address>
	</p>
	<p>
		<code>
			var i = 5;
		</code>
		<p>
			var i = 5;
		</p>
	</p>
	<p>
		<pre>
			int i = 5;
			int j = 6;
			int z = i + j;
		</pre>
	</p>
</body>
</html>

<!-- 列表标签 
  1、无序列表：
	以黑圈圈表示
	<ul>
		<li>每一行内容</li>
		每一个li内部可以使用段落、换行符、图片、链接、以及其他列表
	</ul>
  2、有序列表：
	以数字表示
	<ol>
		<li>每一行内容</li>
    </ol>
  3、自定义列表
    自定义列表开始
    <dl>
    	每一项的开始
    	<dt>
    		每一行
    		<dd>
        </dt> 
    <dl> 
-->

<!-- HTML块 
	块级元素：显示时会以新行显示
	         <div> <hx> <p> <ul> <table>
	内联元素：不会换行开始结束
	         <em> <strong> <a>
-->
<!--div标签
	<div class/id>元素：内容自动开始一个新行，class属性可以有多个，id属性只能有一个
-->
<!-- span标签 
	内联元素，本身没任何含义，与CSS连用时可设置样式，被用来组合HTML中的行内元素
	没有固定的格式表现，当使用CSS样式时才会产生视觉上的变化
	也可以使用id、class属性
-->
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<ul>
		<li>Java从入门到精通</li>
		<li>HTM、CSS、JS从入门到精通</li>
		<li>Spring从入门到精通</li>
	</ul>
	<ol>
		<li>Java从入门到精通</li>
		<li>HTM、CSS、JS从入门到精通</li>
		<li>Spring从入门到精通</li>
	</ol>
	<dl>
		<dt>JavaSE从入门到精通</dt>
		<dd>多线程</dd>
		<dd>集合类</dd>
		<dd>JVM</dd>
		<dt>前端从入门到精通</dt>
		<dd>HTML基础</dd>
		<dd>CSS基础</dd>
		<dd>JS基础</dd>
	</dl>
	<p>一个嵌套列表</p>
	<ul>
		<li>咖啡</li>
		<li>茶
			<ul>
				<li>红茶</li>
				   <ul>
				   	<li>康师傅冰红茶</li>
				   	<li>哇哈哈冰红茶</li>
				   </ul>
				<li>绿茶</li>
			</ul>
		</li>
		<li>牛奶</li>
	</ul>


	<h1>Java课程体系</h1>
	<div class="javaSE">
		<h2>JavaSE课程</h2>
		<p>SE需要学会基本语法，多线程、集合类等的使用</p>
	</div>
	<div class="javaEE">
		<h2>JavaEE课程</h2>
		<p>SE需要学会Spring、SpringBoot框架</p>
	</div>

	<div class="Java"></div>
	<div class="Java"></div>
	<div id="前端"></div>

	<p>some text<span>some others</span></p>
</body>
</html>


标签：

相关文章