分享一个超全面的HTML、CSS知识点总结-html教程-PHP中文网

分享一个超全面的HTML、CSS知识点总结

Y2J

发布： 2017-05-22 10:18:43

原创

2359人浏览过

<html>
    <head>...</head>
    <body>...</body>
</html>

登录后复制

<head>
    <title>...</title>
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>

登录后复制

标签。<br/><br/><pre class="brush:php;toolbar:false;"> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。如果用以前的方法，回车需要输入<br>签，空格需要输入 。<br/>注意：<pre class="brush:php;toolbar:false;"> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre class="brush:php;toolbar:false;">标签的一个常见应用就是用来展示计算机的源代码。<br/><br/>三，认识标签（第二部分）<br/>3-1<br/>1，无序列表<br/>ul-li是没有前后顺序的信息列表。<br/>语法：<br/></p><pre class="brush:html;toolbar:false"><ul>
  <li>信息</li>
  <li>信息</li>
   ......
</ul>
举例：
<ul>
  <li>精彩少年</li>
  <li>美丽突然出现</li>
  <li>触动心灵的旋律</li>
</ul>

登录后复制

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

登录后复制

<ol>
   <li>前端开发面试心法 </li>
   <li>零基础学习html</li>
   <li>JavaScript全攻略</li>
</ol>
<ol>

登录后复制

<form action="save.php" method="post" >
    
<label>爱好:</label>
    
<select>
      
<option value="看书">看书</option>
      
<option value="旅游" selected="selected">旅游</option>
      
<option value="运动">运动</option>
      
<option value="购物">购物</option>
    
</select>
</form>

登录后复制

<form action="save.php" method="post" >
    
<label>爱好:</label>
    
<select multiple="multiple">
      <option value="看书">看书</option>
      <option value="旅游">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    
</select>
</form>

登录后复制

p{
   font-size:12px;
   color:red;
   font-weight:bold;
}

登录后复制

<style type="text/css">
span{
color:red;
}
</style>

登录后复制

p{font-size:12px;
line-height
:1.6em;}

登录后复制

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}

登录后复制

#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}

登录后复制

* {color:red;}

登录后复制

a:hover
{color:red;}

登录后复制

h1{color:red;}
span{color:red;}

登录后复制

p{color:red;}
p{color:green;}

登录后复制

body{
font-family
:"宋体";}

登录后复制

p a{
font-style
:italic;}

登录后复制

p a{
text-decoration
:underline;}

登录后复制

p a{text-decoration:line-through;}

登录后复制

p{
text-indent
:2em;}

登录后复制

p{
    border:2px  solid  red;
}

登录后复制

p{
border-width
:2px;
border-style
:solid;
border-color
:red;
}

登录后复制

border-top
:1px solid red;
border-right
:1px solid red; 
border-left
:1px solid red;

登录后复制

p{
   
margin-top
:20px;
   
margin-right
:10px;
   
margin-bottom
:15px;
   
margin-left
:30px;
}

登录后复制

p{
padding-top
:20px;
padding-right
:10px;
padding-bottom
:15px;
padding-left
:30px;
}

登录后复制

p{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}

登录后复制

<p id="p1"></p>

登录后复制

#p1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

登录后复制

<p id="p1"></p>

登录后复制

#p1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}

登录后复制

#box1{
    width:200px;
    height:200px;
    position:relative;        
}

登录后复制

#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

登录后复制

…

标记开始、

以上就是分享一个超全面的HTML、CSS知识点总结的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

前端HTML如何向后端传递数据_通信方式详解【教程】 studio怎么运行html_studio运行html步骤【指南】如何将文档存为HTML格式_多格式转换保存指南【教程】 html如何看静态页_查看与调试HTML静态页面方法【方法】 HTML如何查看页面性能_开发者工具监控技巧【指南】