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