接触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 >
                                              我是什么颜色的?
                   </p>
                   <p >
                                             我是什么颜色的?
                   </p>
                </body>
</html>