<p>元素，代表是一个段落,单独另起一行</p> 

<h1>的意思就是主标题</h1> 
<h1><h2><h3>...<h6>它们的字体是依次减小的～<h1>最大，<h6>最小 
<h1 style="color:blue">***的个人网页</h1>(调字体颜色) 

text-align 属性规定元素中的文本的水平对齐方式 
<h1 style="text-align:center">***的个人网页</h1>（居中） 
<h1 style="text-align:left">***的个人网页</h1>（左对齐） 
<h1 style="text-align:right">***的个人网页</h1>（右对齐）

<hr/>这个元素的功能就是定义一条水平线出来。 
<hr style="color:red;height:5px;width:500px;">（调水平线颜色，粗细，长宽）

float不想让它们单独在一行，想合并成一行 
<p style="float:left;margin-right:100px;">姓名：***</p> 
<p style="float:left;margin-right:100px;">年龄：**</p> 
<p style="float:left;margin-right:100px;">性别：女</p> 
<p style="float:left;">爱好：男</p> 

<p style="position:absolute;top:230px;right:25px;">这是美丽的图片</p>（固定绝对位置（上top、下、左left、右right）） 

<i>元素,编写出斜体字,可以放在<p>元素里面来使用</i> 

<b>元素：编写出粗体的文字</b> 

<br>的作用是换行 

<u>新元素：文字带下划线</u> 

<img>元素:插入图片 
<img> 标签的 src 属性是必需的。它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。 
例：<img src="http://wx2.sinaimg.cn/thumb180/71f81b09ly1fgjk9dvzifj20bq0e8q5o.jpg";style=" position:absolute;top:100px;left:200px;"> 

<ul>和<li>无序列表 
<ul>标签是定义无序列表的 
<li>是定义里面的每一行内容 
例： 
<ul> 
<li>地球</li> 
<li>月球</li> 
<li>火星</li> 
</ul> 
<div style="border-width:1px;border-color:black;border-style:dotted;"> 
</div> 
（border-width:1px;border-color:black;border-style:dotted;为HTML元素设置边框，依次是边框宽度、边框颜色、边框样式；可以将它们组合，写成这样：border:1px black dotted;） 
边框换个颜色（red、green）、宽度、样式（solid、dashed、double） 
<div>的作用，里面的元素随着<div>位置的改变而改变，现在它就把它里面的内容就分成了网页中的一部分。 
<div style="border:solid 1px;position:absolute;top:600px;right:200px;"> //绝对位置
<h2>想吃的东西</h2> 
<p>好多好多</p> 
</div> 

<ol>和<li>有序列表 
<ol>标签是定义有序列表的 
<li>是定义里面的每一行内容 
例： 
<ol> 
<li>地球</li> 
<li>月球</li> 
<li>火星</li> 
</ol> 
<li style="margin-top:20px;margin-left:20px;">地球</li>（通过margin-top:20px;为HTML元素设置上边距，每个元素可以设置四个边距（上top、下、左left、右right）；可以将它们组合，类似边框样式，这样写：margin:20px 10px 5px 10px;代表着上边距20px、右边距10px、下边距5px、左10px） 

<td style="padding:20px;">第一行第一列</td>(通过padding:20px;设置外边距，这是距离四外边距离都一样的情况；可以将它们组合，类似边框样式，这样写：margin:20px 10px 5px 10px;代表着上边距20px、右边距10px、下边距5px、左10px；只设置一个内边距：padding-top(上内边距)、padding-bottom(下内边距)、padding-left(左内边距)、padding-right(右内边距)) 

<table>、<tr>、<td>编写一个简单的表格 
<table> 标签是定义 HTML 表格的 
<tr>元素定义表格的行，<td>元素定义表格的列 
例： 
<table border="1"> 
<tr> 
<td>第一行第一列</td> 
<td>第一行第二列</td> 
</tr> 
<tr> 
<td>第二行第一列</td> 
<td>第二行第二列</td> 
</tr> 
</table> 
<table border=”2” style="border-color:blue"> 
border是<table>元素的一个属性，作用就是设置表格外面的边框。 
border=”1”的意思是设置边框的粗细为1 

<video>元素:插入视频 
<video> 标签的 src 属性是必需的。它的值是视频文件的 URL，也就是引用该视频文件的的绝对路径或相对路径。 
例： 
<video width="200" height="200" src="http://resource.haorenao.cn/cxy720-2.mp4" controls>我的视频</video> 

<a> 标签定义超链接，重要的属性是 href 属性，它指示链接的目标。 
例： 
<a href="http://weibo.com/haorenao">@陈斌儿童编程和机器人</a> 

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8""> 
</head> 
<body style="width:1000px;margin:0 auto;padding-top:50px;font-family:arial,stkaiti,kaiti,sans-serif;"> 
<img src="http://resource.haorenao.cn/back.jpg"> 
</body> 
</html>

width：1000px ;它的意思是给我们本网页设置的宽度为1000像素。
margin：0 auto;意思是上下外边距为0.左右外边距根据屏幕分辨率自动设置，其实就是居中。
padding-top:50px;意思是距离浏览器的上边框50像素。
font-family: Arial,STKaiti,KaiTi,sans-serif,Time New Roman;设置多个字体。
font-size：设置内容的大小
background-color:lightgray，为HTML元素设置背景颜色

HTML，CSS学习笔记的更多相关文章

  1. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  2. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  3. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  4. HTML+CSS学习笔记（5）- 与浏览者交互，表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  5. HTML+CSS学习笔记(4) - 认识标签（3）

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  6. HTML+CSS学习笔记（3）- 认识标签（2）

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  7. HTML+CSS学习笔记(2) - 认识标签（1）

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  8. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

  9. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

  10. CSS学习笔记：溢出文本省略（text-overflow）

    原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...

随机推荐

  1. Leetcode题解（23）

    69. Sqrt(x) 题目 分析,题目实现求一个int数的平方根,最暴力的算法就是逐个遍历,从1开始到x,判断是否有一个数i,其中满足i*i<=x,并且(i+1)*(i+1)>x;这个算 ...

  2. VS2008 C++ 利用WinHttp API获取Http请求/响应头部Header

    http://www.cnblogs.com/LCCRNblog/p/3833472.html 这一篇博客中,实现了获取http请求/响应后的html源码,现在需要获取http请求/响应的头部Head ...

  3. File API简介

    File API让我们可以创建文件,存储在本地文件系统的一个安全沙箱里,亦可以从其他来源读取文件,并对其进行操作   Web应用通过requestFileSystem方法来访问本地文件系统,该方法是全 ...

  4. css 权重 特殊性

    选择器的特异性由 CSS2 规范定义如下:     !important的规则比其他的权值都大     p{color: red !important} 如果声明来自于“style”属性,而不是带有选 ...

  5. Oracle-2 - ：超级适合初学者的入门级笔记--定义更改约束，视图，序列，索引，同义词

    接着我上一篇的写,在这感觉到哇 内容好多啊   上一篇,纯手打滴,希望给个赞! 添加约束的语法: 使用 alter table 添加或删除约束,但是不能修改约束 有效化或无效化约束 添加not nul ...

  6. 通过正则表达式提取excel特定列中含有关键字的所有行数据

    在 Excel 中打开需要提取数据excel文件,使用 Alt+F11 快捷键打开 VBA 项目窗口,在左侧的工作表名称上点右键,选择查看代码,即可出现右侧的编辑代码窗口(如下图) 在代码窗口中输入以 ...

  7. Python连接Oracle数据库

    今天使用Python连接数据库,连接没有问题,就是中文显示乱码,网上找了很多解决方案, 最后选择使用这个 #!/usr/bin/env python # -*- coding:utf-8 -*- #A ...

  8. Mybatis按顺序获取数据

    sql语句select * from producttg where hospitalcode in (1,2,3)  获取到的数据并不是按照条件1,2,3的顺序排列,如果要成下面形式(mybatis ...

  9. for循环中执行setTimeout问题

    代码片段: for(var i=0;i<8;i++){ setTimeout(function () { console.log(i) },0) } 输出了8次8,这跟js的执行顺序和作用域链有 ...

  10. 在64位Win7环境+64位JDK下，运行64位Eclipse，提示“Failed to load the JNI shared library”错误，提示jvm.dll不对

    -startup plugins/org.eclipse.equinox.launcher_1.2.0.v20110502.jar --launcher.library plugins/org.ecl ...