zoukankan      html  css  js  c++  java
  • 接触HTML和CSS心得体会

    1.HTML

    它负责网页的三个要素之中的结构;

    HTML使用标签的形式来标识网页中的不同组成部分

    <!DOCTYPE html>
    <html>
       <head>
            <meta charset="UTF-8">
            <title>This is a Title</title>
       </head>
        <body>
             <!-- html1中的标题标签:h1-h6 -->
             <!-- h强调的是重要性 -->
             <h1>This is the first Title</h1>
             <h2>This is the second Title</h2>
             <h3>This is the third Title</h3>
             <h4>This is the fourth Title</h4>
             <h5>This is the fifth Title</h5>
             <h6>This is the sixth Title</h6>
             
             <!-- 换行 -->
               <br/>
             <!-- 分割线 -->
               <hr/>
               safe
               <hr/>
               
             <!-- 
                ul:unordered list:                         
                                 1.在HTML文件中,可以利用成对的<ul></ul>标记来插入无序列表,中间的列表项标签<li></li>(list-items)用来定义列表项序列
                                 2.使用无序列表标签ul的type属性(使用CSS的list-style来代替)。用户可以指定出现在列表项前的项目符号的样式,其取值以及相应的符号样式如
              -->
              
              <ul>
              <li>张三</li>
              <li>李四</li>
              <li>王五</li>
              </ul>
    
    </body>
    </html>  
    <!DOCTYPE html>
    <html>
    <head>
    			<meta charset="UTF-8">
    			<title>Insert title here</title>
    		</head>
    		<body>
    		    <!-- 
    		             在html中使用form标签创建一个表单
    		          action:代表要跳转到的目标地址
    		          
    		     -->
    		     <form action="table.html">
    		                       用户名:<input type="text" name="username" value="张三"/><br/>
    		                       密码:<input type="password" name="pass" ><br/>
                        <!-- html中的单选是通过name属性值来区分是否是同一组的 -->
    		                       性别:<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<br/>
                                                   爱好:<input type="checkbox" name="hobby" value="yu"/>羽毛球<input type="checkbox" name="hobby" value="basketball"/>篮球<input type="checkbox" name="hobby" value="football"/>足球<br/>
                                                   籍贯:
                      <!-- 对于select下拉列表而言,name属性和value属性是分开的 -->
                      <select name="address">
                            <option value="beijing">北京 </option>
                            <option value="shanghai">上海</option>
                            <option value="tianjin">天津</option>
                      </select>  <br/>                            
    		            <input type="submit" name="Submit"/>
    		     </form>
    		
    		</body>
    		</html>
    

      

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
          <!-- 
              img标签用于加载图片
               alt:表示图片未正常加载的时候需要显示的信息
               src:图片的路径
                                                相对路径:表示的是相对于当前文件所在目录的路径                                        
                                                 1)和当前文件在同一目录下
                                                 2)图片所在的目录和当前文件在同一文件夹
                                                 3)图片所在的目录是在当前文件的上一级或上级                 
                                               绝对路径:   http://
                                                         
           -->
    </body>
    </html>
    

      

    <!DOCTYPE html>
    	<html>
    		<head>
    			<meta charset="UTF-8">
    			<title>Insert title here</title>
    			<!-- 内部样式表 -->
    			<style type="text/css">	
    			 p{
                       color:red;
    	      		 }
    	      	 #sss{
                       color:pink;
    	      		 }''
          		 .ds{
                      font-size:20px;
          		 }	   
    			</style>
    		</head>
    		<body>
    		    <!-- 不建议将表现和构建写在一起
    		         W3C建议将,骨架(html),表现(css),行为(js)三者分离开来
    		     -->
    		     <!-- 行内样式表 -->
    		   <p>
    		                 床前明月光,<br/>
    		                 疑是地上霜,<br/>
    		                 举头望明月,<br/>
    		                 低头思故乡。<br/>
    		   </p>
    		   <!-- id:属性在整个html页面中必须是唯一的 -->
    		   <p id="sss" class="ds">
    		                              我是什么颜色的?
    		   </p>
    		   <p id="sss" class="ds">
    		                             我是什么颜色的?
    		   </p>
    		</body>
    </html>
    

      

  • 相关阅读:
    Redis事务和锁
    11/6笔记 补充(Redis持久化,RDB&&AOF)
    11/6随笔
    Redis 安装教程
    Redis通用指令和第一个Jedis程序的实现
    Redis学习第二天
    SpringBoot学习笔记
    1000行代码手写服务器
    log4j创建实例异常
    寒假阅读人月神话3
  • 原文地址:https://www.cnblogs.com/qgy960328/p/7794918.html
Copyright © 2011-2022 走看看