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:表示对象文 ...
随机推荐
- Xilinx ISE 14.1中模拟True Dual Port RAM例子
<一>创建工程 创建工程在此略过. <二>基本代码 1.创建一个Verilog modual代码如下: module main( input clk, input rsta, ...
- Shuffle过程的简单介绍
Shuffle是连接Map和Reduce的桥梁 Shuffle分为Map端的Shuffle和Reduce端的Shuffle Map端的shuffle 1输入数据和执行任务: 分片后分配Map任务,每个 ...
- springmvc+quartz简单实现定时调度
一.简介:Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.Quartz可以用来创建简单或为运行十 ...
- 线程轮循打印ABC...
package com.java.concurrent; import java.util.concurrent.locks.Condition; import java.util.concurren ...
- JAVAscript学习笔记 js句柄监听事件 第四节 （原创） 参考js使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于QEMU的ARM Cortex-A9开发板Vexpress-ca9的Linux内核的编译和运行
宿主机:Ubuntu16.04 x64(Linux内核4.4.0) 交叉编译工具链:gcc-arm-linux-gnueabiarm-linux-gcc:4.4.3QEMU:2.5.0Linux ke ...
- HTTP响应头信息(Response Headers)与请求头信息(Request Headers)
打开了电影天堂网站,我们鼠标右键“检查”->打开“开发者工具”->选择“Network”. 刷新网页,选择某一文件点击(此处我是点击db.css),可以观察到Response Header ...
- Node.js初探之GET方式传输
Node.js初探之GET方式传输 例子:form用GET方法向后台传东西 html文件: <form action="http://localhost:8080/aaa" ...
- [转载] ConcurrentHashMap原理分析
转载自http://blog.csdn.net/liuzhengkang/article/details/2916620 集合是编程中最常用的数据结构.而谈到并发,几乎总是离不开集合这类高级数据结构的 ...
- ANDROID基础ACTIVITY篇之Activity的加载模式
在这之前首先让我们先了解一下什么是Task Task,简单的说,就是一组以栈的模式聚集在一起的Activity组件集合.它们有潜在的前后驱关联,新加入的Activity组件,位于栈顶,并仅有在栈顶的A ...