1.HTML

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

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

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

　　

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. </head>
  7. <body>
  8.       <!--
  9.           img标签用于加载图片
  10.            alt:表示图片未正常加载的时候需要显示的信息
  11.            src:图片的路径
  12.                                             相对路径：表示的是相对于当前文件所在目录的路径
  13.                                              1）和当前文件在同一目录下
  14.                                              2）图片所在的目录和当前文件在同一文件夹
  15.                                              3）图片所在的目录是在当前文件的上一级或上级
  16.                                            绝对路径：   http：//
  17.  
  18.        -->
  19. </body>
  20. </html>

　　

  1. <!DOCTYPE html>
  2. 	<html>
  3. 		<head>
  4. 			<meta charset="UTF-8">
  5. 			<title>Insert title here</title>
  6. 			<!-- 内部样式表 -->
  7. 			<style type="text/css">
  8. 			 p{
  9.                    color:red;
  10. 	      		 }
  11. 	      	 #sss{
  12.                    color:pink;
  13. 	      		 }''
  14.       		 .ds{
  15.                   font-size:20px;
  16.       		 }
  17. 			</style>
  18. 		</head>
  19. 		<body>
  20. 		    <!-- 不建议将表现和构建写在一起
  21. 		         W3C建议将，骨架(html),表现(css),行为(js)三者分离开来
  22. 		     -->
  23. 		     <!-- 行内样式表 -->
  24. 		   <p>
  25. 		                 床前明月光，<br/>
  26. 		                 疑是地上霜，<br/>
  27. 		                 举头望明月，<br/>
  28. 		                 低头思故乡。<br/>
  29. 		   </p>
  30. 		   <!-- id:属性在整个html页面中必须是唯一的 -->
  31. 		   <p id="sss" class="ds">
  32. 		                              我是什么颜色的？
  33. 		   </p>
  34. 		   <p id="sss" class="ds">
  35. 		                             我是什么颜色的？
  36. 		   </p>
  37. 		</body>
  38. </html>

　　

接触HTML和CSS心得体会的更多相关文章

  1. css心得体会

    非块级元素  要使得其有长宽的效果  可以设置  margin  和  padding 块级元素     可以直接设置  width  和  height div标签   要使得你内部元素居中   可 ...

  2. 百度api使用心得体会

    最近项目中在使用百度地图api,对于其中的一些有用的点做一些归纳整理,如有不对的地方,欢迎各位大神纠正指出. 一定要学会查找百度地图api提供的类参考网站:http://lbsyun.baidu.co ...

  3. 今天看了几个小时的微信小程序说说心得体会

    今天看了几个小时的微信小程序说说心得体会 小程序是个前端框架 根据微信相关提供了很多接口 1 先说说各种后缀的文件 .json 后缀的 JSON 配置文件.wxml 后缀的 WXML 模板文件.wxs ...

  4. "亿家App"问卷调查分析结果及心得体会

    一.问卷问题设计 调查背景:随着现代社会互联网的发展,基于家庭产生的服务项目也越来越多.为增加家庭之间的交流和互助,增加家庭内部.家庭与家庭之间的沟通互助,并利用互联网便捷交流的优势,使家庭在享受服务 ...

  5. 软工-五月心得体会 PB16110698

    伴随着愈发红润的骄阳,火热而紧张刺激的五月悄然而至.这一个月以来,曾经让同学们“废寝忘食”的软工课大作业终于告一段落,每周一篇的读书笔记也缓到半月一篇,着实令人长吐一口气.但这一份表面的余裕当然没有看 ...

  6. Java初学者最近三次作业的心得体会

    作为一个初学者,简单的谈一下自己的作业心得体会.如果你是完全没有接触过Java的学习,本篇博文可能会有些收获,如果你已经学习Java有一段时间了,那么可以放弃这篇文章了,因为这篇文章讲解的是基本的东西 ...

  7. 兼容低版本IE浏览器的一些心得体会（持续更新）

    前言: 近期工作中,突然被要求改别人的代码,其中有一项就是兼容IE低版本浏览器,所以优雅降级吧. 我相信兼容低版本IE是许多前端开发的噩梦,尤其是改别人写的代码,更是痛不欲生. 本文将介绍一些本人兼容 ...

  8. 从实例学习 Go 语言、"基础与进阶" 学习笔记及心得体会、Go指南

    第一轮学习 golang "基础与进阶"学习笔记,Go指南练习题目解析.使用学习资料 <Go-zh/tour tour>.记录我认为会比较容易忘记的知识点,进行补充,整 ...

  9. 关于Solr的使用总结的心得体会

    摘要:在项目中使用Solr作为搜索引擎对大数据量创建索引,提供服务,本文是作者对Solr的使用总结的一点心得体会, 具体包括使用DataImportHandler从数据库中近实时同步数据.测试Solr ...

随机推荐

  1. 分享：苹果APP更新上架被拒的另一种理由(Safety - Objectionable Content)

    这两个星期,本来想和大伙分享:写IT连创业系列运营篇. 但时间飞过,仍只是写了开头,一直很忙,没能完往下写. 今天就动手写点其它内容,哈哈,免的和小伙伴太陌生〜〜〜 前几天更新了:IT恋和IT连的版本 ...

  2. HtmlImageGenerator乱码问题解决、html2image放linux上乱码问题解决

    使用html2image-0.9.jar生成图片. 在本地window系统正常,放到服务器linux系统时候中文乱码问题.英文可以,中文乱码应该就是字体问题了. 一.首先需要在linux安装字体,si ...

  3. window下安装Apache+PHP

    本地系统为windows 10,Apache选择httpd-2.4.25-x64-vc14-r1,PHP选择php7.1_x64线程安全版. 1.安装Apache 将apache解压到c:/serve ...

  4. Spring4 JDBC详解

    Spring4 JDBC详解 在之前的Spring4 IOC详解 的文章中,并没有介绍使用外部属性的知识点.现在利用配置c3p0连接池的契机来一起学习.本章内容主要有两个部分:配置c3p0(重点)和 ...

  5. web-iPhone X

    题目: 解题思路: 第一次看到html里只有字其他啥也没有的题,一脸懵逼,学长提示抓包改包,于是开始我的苦逼解题. 0x01 抓包 0x02 改包 由于题目说只有iphoneX才能接受这个websit ...

  6. ListView ,recycleView列表带进度条

    实现上图功能有两种思路. 一:普通做法,更新item的数据,不停调用notifydatachange ; 二:各管自家刷新. 一个下载对应一个下载线程.线程持有对应item在Listview中的位置. ...

  7. 《java.util.concurrent 包源码阅读》17 信号量 Semaphore

    学过操作系统的朋友都知道信号量,在java.util.concurrent包中也有一个关于信号量的实现:Semaphore. 从代码实现的角度来说,信号量与锁很类似,可以看成是一个有限的共享锁,即只能 ...

  8. memcached一致性哈希及php客户端实现

    1.memcached分布式算法 memcached的分布式是依靠客户端的算法来实现,假设键名为$key,服务器数量为N,常规的实现方式有两种: 取模哈希 crc32($key)%N,通过这个算法将键 ...

  9. 面试相关-转载-well,yzl——持续更新

    转载yl,yzl大神的面经,顺便自己复习一下专业课的内容 操作系统相关: 什么是进程, 什么是线程.它们之间的区别和联系. 进程管理内存资源+运行过程, 线程只管理运行过程, 线程要在进程提供的资源基 ...

  10. 迷宫问题-POJ 3984

    迷宫问题 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 24348   Accepted: 14206 Descriptio ...