HTML，CSS学习笔记
<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学习笔记的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签（3）
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
- CSS学习笔记：溢出文本省略（text-overflow）
原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...
随机推荐
- Tempter of the Bone
Problem Description The doggie found a bone in an ancient maze, which fascinated him a lot. However, ...
- awk练习题
1. sed和awk有什么区别? (1)awk:按列(域)操作:sed:按行操作 (2)awk:文本处理语言,适合对文本进行抽取处理:sed:非交互式的编辑器,适合对文本进行编辑 2. awk要处理域 ...
- onload、DOMContentLoaded与性能问题
onload.DOMContentLoaded与性能问题 onload事件 DomContentLoaded 1.onload事件 onload事件一般在所有的文档内容加载完成后触发,如果网页中图 ...
- java模拟登陆功能
package test; import java.util.Scanner; public class Login { static Scanner sc=new Scanner(System.in ...
- 《天书夜读：从汇编语言到windows内核编程》一 汇编指令与C语言
1. Debug模式下,VC++6.0下断点运行,按CTRL+F11可查看汇编代码:另外可以用cl /c /FAs YourCppFile.cpp命令行在同目录生成YourCppFile.asm汇编文 ...
- C重定向
- asp.net web api 版本控制
版本控制 版本控制的方法有很多,这里提供一种将Odata与普通web api版本控制机制统一的方法,但也可以单独控制,整合控制与单独控制主要的不同是:整合控制通过VersionController ...
- MySQL子查询优化实例
优化:子查询改写成关联查询 线上遇到问题,查询较慢,如为对应SQL的查询执行计划: localhost.\G . row *************************** id: select_ ...
- Spring Boot中采用Mockito来mock所测试的类的依赖（避免加载spring bean，避免启动服务器）
最近试用了一下Mockito,感觉真的挺方便的.举几个应用实例: 1,需要测试的service中注入的有一个dao,而我并不需要去测试这个dao的逻辑,只需要对service进行测试.这个时候怎么办呢 ...
- CentOS6.9编译安装Nginx1.12
1:安装必要的库 Bash yum install gc gcc gcc-c++ pcre-devel zlib-devel openssl-devel 2:创建Nginx用户和组 Bash grou ...