HTML基础 小白

HTML

超文本*标记语言*   （不止是有文本还有其他得一些东西图片视频等）

页面可包含图片链接甚至音乐程序等等 非文字元素

HTML：组织内容和结构

CSS：对内容进行美化

JS：响应用户得交互

<a href="网站或者路径"  target="_blank">这个地方写图片或者文字就表示图片或者文字加上超链接</a>  // <a href=  " "  如果写得是网站必须加上 端口号  ；表示超链接标签  target="_blank"表示是否用新窗口打开 如果不需要新窗口打开去掉这行代码

<b></b>或者<strong></strong> //加粗字体   比如 

 <a href="www.baidu.com"  target="_blank"><b>百度一下你就知道 </b></a>

<br>换行标签

<font> 百度</font>//文字标签

<h1> - <h6>  标题标签h1最大h6最小 比如<h1>百度</h1>

<hr>//水平线标签

<marquee>滚动字幕标签</marquee>//滚动字幕标签

<marquee direction="right">往右滚动字幕标签</marquee>//往右滚动字幕标签

<i>字体倾斜</i>   //都是轴对称得任何标签结束得时候都是离自己最近得那一个<i><b>字体加粗</b></i>

<img src="图片路径" strle="图片样式" width="图片宽度" height="图片高度">//图片标签 也可直接写图片路径  如果在一个文件侠侠 可直接写这个图片得文件名称  如果是下一层目录就images/图片名字即可

路径也可直接写在线网络地址要加 http//    当然图片也可加超链接

<p> </p> //段落文字标签

<div> 
   <ul> 
         <li>里标签</li>//里标签 也可以是图片
         <li>里标签</li>
         <li>里标签</li>
         <li>里标签</li>
   </ul>

</div>//块级元素


基本属性代码

margin:0 auto; //居中  0代表上下 auto代表自动
margin:5px;//代表上下左右都是10个像素
margin:1px 2px 3px 4px;//外边距离 px就是像素 上右下左得顺序 也就是说上面得外边距离是1个像素右边得外边距离是2个像素
paddimg:1px 2px 3px 0;//内边距离（顺时针）paddimg-top：//上内边距
margin-top:1px;//上面得外边距离是1个像素  right右 bottom下 left左 center中间（这些代码可以在div标签中使用）

背景
background //背景
background-color：#020200;//背景颜色
background-image:url();//背景图片 ()中写图片得地址不用加双引号
background-position:left center;//背景位置 水平靠左垂直在中间
background-repeat:no-repeat; 背景得重复方式 不重复
比如 
<div style="backgount-color:#020200;width:200px;height:200px"> //这个块设置样式  颜色  所有得标签都可以设置样式
....
</div>
比如
<div style="background-image:url(.....);width:200px;height:200px"> //这个块设置样式  图片  所有得标签都可以设置样式
....
</div>
比如
<div style="background-image:url(.....);background-repeat:no-repeat;background-position:left left;width:200px;height:200px"> //这个块设置样式  图片重复方式为不重复 图片得位置为水平靠左垂直在中间  所有得标签都可以设置样式
....
</div>
也可以
<div style="background-image:url(.....) #020200 no-repeat left center;width:200px;height:200px"> //这个块设置样式  颜色 图片重复方式为不重复 图片得位置为水平靠左垂直在中间  所有得标签都可以设置样式
....
</div>

边框
border:1px solid#000000;//实线边框 dashed 虚线  dotted点线
border:-top:1px solid #000000;//上边框
border:-bottom  下; top上 right右 bottom下 left左


clear：xx;//清除 他只有left左 right右 both双方  这三个参数
float:xx;//浮动 他只有left左 right右 这两参数

font-family: xx;//字体Microsoft Yahei 微软雅黑
font-size:xx;//字体得大小
font—weigth:bold;//字体的粗细（粗） normal正常
height 高度
width 宽度

letter-sapcing:1px;//字符间距
line-height:22px;//行距

overflow:hidden;//超出对象指定得高度和宽度如何显示内容（隐藏）  auto 代表自动  scroll 滚动
display:none;//隐藏某个标签点了个什么东西就冒出来了  这些属性都是设置style






text-align  //文字对齐方式 left 左对齐 right右对齐 center居中
text-decoration:underline;//文字的装饰  鼠标移动过去有的装饰 none 什么都没有 underline下划线 align 水平对齐

position:fixed;//位置固定在屏幕上拉动滚动条也固定
position:absolute;//位置绝对跟随滚动条网上走或消失
z-index：  //元素的堆叠顺序 就是指图片
//或者其他元素的z值 取值范围-999-999 值越大越靠前、





内联css得写法
<style>
    .di_yi_ceng{
    
    不需要加引号 这里写样式}  //第一层框架 如果用class前面需要加一个.
    #di_er_ceng{不需要加引号 这里写样式}  //第二层框架 如果用id前面需要加一个#

</style>//样式标签

<div class="di_yi_ceng">如果用class前面需要加一个.
<div id="di_yi_ceng">如果用id前面需要加一个#      //块标签元素




<link rel="stylesheet" href="xxx.css" type="text/css"> //外联css的固定写法 将<style></style>中所有得数据都剪切到
css文件中不包括<style></style>
这行代码声明到开始名字改为样式表得名字即可注须在同一目录