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元素设置背景颜色

 

posted @ 2017-07-18 20:35  木子丘  Views(219)  Comments(0Edit  收藏  举报