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:表示对象文 ...
随机推荐
- Problem H
Problem Description 穿过幽谷意味着离大魔王lemon已经无限接近了! 可谁能想到,yifenfei在斩杀了一些虾兵蟹将后,却再次面临命运大迷宫的考验,这是魔王lemon设下的又一个 ...
- hbase建表
import java.util.ArrayList; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hb ...
- NHibernate 慎用Session.Merge
Session.Merge其意思有两个步骤, 一般用法: Session.Merge(obj); 1. 从当前的Session中获取obj对象, 如果未获取到则从数据库获取. 2. 把程序中的obj的 ...
- layui数据表格以及传数据方式
数据表格一: <div style="margin:0px; background-color: white; margin:0 10px;"> <blockqu ...
- 什么是Node.js?带你初识Node
什么是Node.js Nodejs是一个基于Chrome v8引擎的JavaScript运行环境 Node.js使用了一个事件驱动,非阻塞式I/O的模型,使其轻量又高效. Node.js 的包管理器 ...
- SSM 配合 Mysql 数据库和代码数据源主从分离
大型网站为了软解大量的并发访问,除了在网站实现分布式负载均衡,远远不够.到了数据业务层.数据访问层,如果还是传统的数据结构,或者只是单单靠一台服务器扛,如此多的数据库连接操作,数据库必然会崩溃,数据丢 ...
- [转]Spring.Net介绍
转自:http://www.cnblogs.com/cilence/archive/2013/02/21/2920478.html Spring.NET下载地址:http://www.springfr ...
- 使用 Rust 构建分布式 Key-Value Store
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 引子 构建一个分布式 Key-Value Store 并不是一件容易的事情,我们需要考虑很多的问题,首先就是我们的系统到底需要提供什么样的功能 ...
- 启用 Brotli 压缩算法，对比 Gzip 压缩 CDN 流量再减少 20%
Google 认为互联网用户的时间是宝贵的,他们的时间不应该消耗在漫长的网页加载中,因此在 2015 年 9 月 Google 推出了无损压缩算法 Brotli.Brotli 通过变种的 LZ77 算 ...
- selenium与表格的二三事
今天遇到的问题是selenium与表格中行和列的问题! 我想要做的事情是统计当前的table有多少行,表格形式如下如所示: 图中所示为2行,我的定位方式是这样的 : table=driver.find ...