您所在的位置:首页 - HTML/CSS教程文章 - 正文HTML/CSS教程文章

接触HTML和CSS心得体会

乐学习 乐学习 2023-01-12 【HTML/CSS教程文章】 73人已围观

摘要1.HTML它负责网页的三个要素之中的结构;HTML使用标签的形式来标识网页中的不同组成部分<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>ThisisaTitle</title></head><body><!--html1中的标题标

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>

  

    Tags: html

    分享到:

    文章评论 (暂无评论,73人围观)

    友情链接

    取消
    微信二维码
    支付宝二维码