Web前端基础（html+css+javascrapt)

HTML：用于给网页输入文本内容
常见标签：html，head，title，body，ul，li（ul+li为无序列表），h1~h6，p
常用HTML标签元素结合及简介

 创建一个HTML文档
 设置文档标题和其它在网页中不显示的信息
 设置文档的标题        
 最大的标题
 预先格式化文本          
 下划线
 黑体字    
 斜体字    
 打字机风格的字体
 引用,通常是斜体        
 强调文本(通常是斜体加黑体)
 加重文本(通常是斜体加黑体)
 设置字体大小从1到7，颜色使用名字或RGB的十六进制值
 基准字体标记
 字体加大
 字体缩小        
 加删除线
 程式码          
 键盘字
 范例    
 变量
 向右缩排
 述语定义
 地址标记
 上标字    
 下标字
...固定寬度字体(在文件中空白、換行、定位功能有效)
...</plaintext>固定寬度字體(不執行標記符號)
<listing>...</listing> 固定寬度小字體  
<font color=00ff00>...</font>字體顏色
<font size=1>...</font>最小字體  
<font style ='font-size:100 px'>...</font>無限增大</code></pre>
</li>
<li> </li>
<li><strong>格式标志标签</strong></li>
<li>
<pre class="language-python"><code><p></p> 创建一个段落    
<p align=""> 将段落按左、中、右对齐 　
<br> 换行 插入换行符  
<blockquote></blockquote> 从两边缩进文本
<dl></dl> 定义列表
<dt> 放在每个定义术语词前
<dd> 放在每个定义之前
<ol></ol> 创建一个标有数字的列表  
<ul></ul> 创建一个标有圆点的列表
<li> 放在每个列表项之前,若在<ol></ol>之间则每个列表项加上一个数字,
  若在<ul></ul>之间则每个列表项加上一个圆点 　 　
<div align=""></div> 用来排版大块HTML段落,也用于格式化表
<MENU> 选项清单  
<DIR> 目录清单  
<nobr></nobr> 强行不换行
<hr size='9' width='80%' color='ff0000'>水平線(設定寬度)  
<center></center> 水平居中  </code></pre>
</li>
<li> <strong>链接标志表格标志</strong></li>
<li>
<pre class="language-python"><code>◆target="..."决定链接源在什么地方显示(用户自定义的名字，_blank,_parent,_self,_top
◆rel="..."发送链接的类型  
◆rev="..."保存链接的类型
◆accesskey="..."指定该元素的热键
◆shape="..."允许我们使用已定义的形状定义客户端的图形镜像(default，rect，circle，poly
◆coord="..."使用像素或者长度百分比来定义形状的尺寸
◆tabindex="..."使用定义过的tabindex元素设置在各个元素之间的焦点获取顺序(使用tab键使元素获得焦点)</code></pre>
</li>
</ul>

<ul style="list-style-type: circle">
<li><strong>实例：</strong></li>
<li><strong>！+Tab可快速创建框架</strong></li>
<li>
<pre class="language-python"><code><!DOCTYPE html>
<html lang="en">
<head>
    <title>My Page!</title>
</head>
<body>
    <p>i love you!</p>
    <ul>
        <li>hello world!</li>
        <li>hello world!</li>
    </ul>
    <p>i love you!</p>
    <h6>love</h6>
    <h1>love you!</h1>
    <button>love me!</button>
</body>
</html></code></pre>
</li>
</ul>
<p style="padding-left: 40px"></p>
<p style="padding-left: 40px"> </p>
<p style="padding-left: 40px"> </p>
<p><strong>CSS：给网页进行美颜</strong></p>
<ul style="list-style-type: circle">
<li>由选择器（指定要渲染的目标）、属性、值构成</li>
<li>主要就是<style></style>部分的内容，渲染网页</li>
<li>
<pre class="language-python"><code><style>
    selector1{
        property:value；
        property:value；
    }
    selector2{
        property:value；
        property:value；
    }
    .
    .
    .
</style></code></pre>
</li>
<li>
<pre class="language-python"><code><!DOCTYPE html>
<html lang="en">
<head>
    <title>My Page!</title>
    <style>
        h1{
            color:blue;
            background:azure;
        }
        li{
            color:brown;
        }
        body{
            background:darkgray
        }
        h2{text-align:center;}
        

    </style>
</head>
<body>
    <h1>Hey guys!</h1>
    <ul>
        <li>You cannot improve your past, but you can improve your future. Once time is wasted, life is wasted.</li>
    </ul>
    <p>i love you!</p>
    <h2>believe in yourself!</h2>
    <button>I will!</button>
</body>
</html></code></pre>
</li>
<li></li>
</ul>

<ul style="list-style-type: circle">
<li><strong>网页布局</strong></li>
<li>
<pre class="language-python"><code><!DOCTYPE html>
<html lang="en">
<head>
    <title>My Page!</title>
    <style>
        body{
            margin:0;
            padding:0;
        }
        div{
            background:white;
            margin:auto;       根据网页大小自动匹配边距
            width:100px;
        }
       header{
           background:darkslategrey;
           color:azure;
           padding:20px;
       }
       section{
           background:cadetblue;
           color:azure;
           padding:20px;
           display:flex;
           flex-direction: row;       标签按行排列
       }
       ul{
           margin:0;
           padding:0;
           list-style-type:none;     去掉前面小黑点·
       }
       li{
           display:inline-block;     内联，按行排列
           margin:0 20px 0 0;
       }
       footer{
           background:darkslategrey;
           color:azure;
           padding:10px 20px;
       }
    </style>
</head>


<body>
   <header>
       <nav>
           <ul>
              <li>Home</li>
              <li>Locations</li>
              <li>contact</li>
           </ul>
       </nav>
       <h1>Ttile</h1>
   </header>
   <section>
           <div>a</div>
           <div>b</div>
           <div>c</div>
   </section>    
   <section>section2</section>
   <footer>footer</footer>
</body>
</html>
</code></pre>
</li>
</ul>
<p style="padding-left: 40px"> </p>
<ul style="list-style-type: circle">
<li></li>
</ul>

<ul style="list-style-type: circle">
<li><strong>实现多页面跳转和页面渲染的打包和载入link</strong>
<ul style="list-style-type: circle">
<li>将想要进行跳转的标签用<a href="xxx.html">标签名</a>括起来即可</li>
<li>可以将定义好的渲染风格单独存放为css文件并导入页面渲染，用link+Tab可自动生成格式，填入渲染文件即可对页面渲染</li>
<li> </li>
<li></li>
<li>
<pre class="language-python"><code><!DOCTYPE html>
<html lang="en">
<head>
    <title>My Page!</title>
    <link rel="stylesheet" href="styles.css">
</head>


<body>
   <header>
       <nav>
           <ul>
              <li><a href="index.html">Home</a></li>
              <li><a href="locations.html">Locations</a></li>
              <li><a href="contact.html">Contact</a></li>
           </ul>
       </nav>
       <h1>Home</h1>
   </header>
   <section>
           <div>a</div>
           <div>b</div>
           <div>c</div>
   </section>    
   <section>section2</section>
   <footer>footer</footer>
</body>
</html></code></pre>
</li>
<li></li>
</ul>
</li>
</ul>
<p style="padding-left: 40px"> </p>
<ul style="list-style-type: circle">
<li><strong>选择器</strong>
<ul style="list-style-type: circle">
<li>
<p>如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。</p>
</li>
<li>通过设置选择器来细化渲染功能，而非整块整块的渲染，通常设置class类定义属性，属性可以有多个，用空格隔开</li>
<li>
<pre class="language-python"><code>section.s div{
    margin:auto;
    width:100px;
}
section.s{
    display:flex;
}
section.s.up div{
    background:pink;
}
section.s.down div{
    background:rgb(147, 194, 109);
}</code></pre>
</li>
<li></li>
</ul>
</li>
</ul>

<ul style="list-style-type: circle">
<li><strong>伪类</strong>
<ul style="list-style-type: circle">
<li>CSS伪类是用来添加一些选择器的特殊效果。</li>
<li>
<pre class="language-python"><code>a{
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
}


此种伪类常用于定义鼠标滑过的特效</code></pre>
</li>
</ul>
</li>
</ul>
<p style="padding-left: 40px"> </p>
<p style="padding-left: 40px"> </p>
<ul style="list-style-type: circle">
<li>实战创建一个简单语义网
<ul style="list-style-type: circle">
<li>导入图片方法：新建一个images文件，从电脑将图片保存到该路径所在的文件夹即可（直接在编译器之外进行，保存后图片就自动导入images文件了）</li>
<li> </li>
<li></li>
</ul>
</li>
</ul>


<p><strong>Javascrapt：使网页实现交互操作，触发器</strong></p>
<ul style="list-style-type: circle">
<li>启动开发者模式进行编程(Fn+F12)
<ul style="list-style-type: circle">
<li>var表示变量，prompt()弹出接受输入框，alert(xx)弹出返回框，console.log(x)输出x</li>
<li> </li>
<li></li>
<li>
<pre class="language-python"><code>var fname=prompt("what's your first name?");
var lname=prompt("what's your last name");
alert('hello!'+fname+lname)</code></pre>

</li>
<li>在编译器中写js用<script></script>框起来，需要放在body底部，因为网页渲染按照顺序，先加载网页再加载交互操作</li>
</ul>
</li>
</ul>

<ul style="list-style-type: circle">
<li><strong>函数</strong>
<ul style="list-style-type: circle">
<li>函数用function定义</li>
<li>
<pre class="language-python"><code>function Drink(age){
    if(age<18){
        alert('you can\'t drink');
    }
    else{
        alert('just drink as you want!');
    }
}
19
function Age(year){
    return 2022-year;
}
var birthyear
var age
birthyear=prompt()
age=Age(birthyear)
Drink(age)</code></pre>

</li>
</ul>
</li>
<li><strong>数组与循环</strong>
<ul style="list-style-type: circle">
<li>数组 </li>
<li>while循环</li>
<li>do-while</li>
<li>for循环</li>
<li>
<pre class="language-python"><code>var n=0;
while(n<6){
    console.log('i am '+n+' years old');
    n++;
}

///////////////////////////////
var n=0;
do{
    console.log('i am '+n+' years old');
    n++;
}while(n<6)
/////////////////////////////////

function go(){
    alert('hello');
}
var n=['i','love',['love','you'],20,go()];
for(var i=0;i<6;i++){
    console.log(n[i]);
}
</code></pre>
</li>
<li> </li>
<li>

</li>
<li></li>
<li> </li>
</ul>
</li>
</ul>

<ul style="list-style-type: circle">
<li><strong>选择和增加元素</strong>
<ul style="list-style-type: circle">
<li>利用选择器选择元素</li>
<li> </li>
<li></li>
<li></li>
<li></li>
<li></li>
<li> </li>
</ul>
</li>
</ul>
						  
					  </div>
						<!--conend-->
							<div class="p-2"></div>

						<div class="arcinfo my-3 fs-7 text-center">
							
							
			<a href='/t/etagid41012-0.html' class='tagbtn' target='_blank'>Web前端基础</a>							
						



						</div>
						
						<div class="p-2"></div>

						

						
					</div>
					<div class="p-2"></div>
					<!--xg-->
					<div class="lbox p-4 shadow-sm rounded-3">
						<div class="boxtitle"><h2 class="fs-4">相关</h2></div>
						
<hr>				
						
			<div class="row g-0 py-2 border-bottom align-items-center">
																
								<div class="col-7 col-lg-11 border-lg-end">
										<h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-365290.html">WEB前端基础之SCC(字体颜色背景-盒子模型)</a></h3>
									
									<div class="ltag fs-8 d-none d-lg-block">
								 

        </div>
								</div>
							
							</div>            
            
            <!---->
                                    
           <!---->
  			
						

					</div>
					<!--xgend-->
				</div>

				<div class="col-lg-3 col-12 p-0 ps-lg-2">
					<!--box-->									
					<!--boxend-->
					<!--<div class="p-2"></div>-->

					<!--box-->
									<div class="lbox p-4 shadow-sm rounded-3">
					
									   <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div>
										<div class="clearfix"></div>
										<ul class="m-0 p-0 fs-7 r-tag">
										</ul>
									

										
										<div class="clearfix"></div>
									</div>
					<!--box end-->

					
				</div>

			</div>
		
		
		
		</div>	

</main>
						<div class="p-2"></div>
<footer>
<div class="container-fluid p-0 bg-black">
	<div class="container p-0  fs-8">
	<p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p>
	</div>	
</div>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</footer>
		
<script src="/skin/bootstrap.bundle.js"></script>

</body>
</html>