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:表示对象文 ...
随机推荐
- poj 3662 Telephone Lines
Telephone Lines Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7115 Accepted: 2603 D ...
- MUI开发记录——我的考勤
已经好久没有更新技术博客了,因为最近一直在做跨平台web app应用的开发,由于是刚做这个,也没太多经验同大家分享,可我是一个闲不住的人,我还是决定于百忙之中抽空整理一篇,记录下开发历程......— ...
- Docker安装和卸载
一:卸载旧版本 老版本的Docker被称为docker或docker-engine.如果安装了这些,请卸载它们以及相关的依赖项. $ sudo yum remove docker \ docker-c ...
- Python 3.X 调用多线程C模块，并在C模块中回调python函数的示例
由于最近在做一个C++面向Python的API封装项目,因此需要用到C扩展Python的相关知识.在此进行简要的总结. 此篇示例分为三部分.第一部分展示了如何用C在Windows中进行多线程编程:第二 ...
- 《天书夜读：从汇编语言到windows内核编程》八 文件操作与注册表操作
1)Windows运用程序的文件与注册表操作进入R0层之后,都有对应的内核函数实现.在windows内核中,无论打开的是文件.注册表或者设备,都需要使用InitializeObjectAttribut ...
- pandas基本介绍-【老鱼学pandas】
前面我们学习了numpy,现在我们来学习一下pandas. Python Data Analysis Library 或 pandas 主要用于处理类似excel一样的数据格式,其中有表头.数据序列号 ...
- [转]我在面试.NET/C#程序员时会提出的问题
http://blog.zhaojie.me/2011/03/my-interview-questions-for-dotnet-programmers.html 说起来我也面试过相当数量的.NET( ...
- 如何使用webpack优化首屏渲染时间
其实说到性能优化,他的范围太广了,今天我们就只聊一聊通过webpack配置减少http请求数量这个点吧. 简单说下工作中遇到的问题吧,我们做的一个项目中首页用了十多张图片,每张图片都是一个静态资源,所 ...
- 实现基于Keepalived主从高可用集群网站架构
背景 上一期我们实现了基于lvs负载均衡集群的电商网站架构,随着业务的发展,网站的访问量越来越大,网站访问量已经从原来的1000QPS,变为3000QPS,目前业务已经通过集群LVS架构可做到随时拓展 ...
- java.lang.Collections
java.lang.Collections 此类完全由在collection上进行操作或返回 collection 的静态方法组成.也就是说Collections提供了对Collection集合操作的 ...