html+css

男娘i 2022-06-14 05:40 122阅读 0赞

###    1. html 部分: ###

html和.htm 结尾的静态网页   根标签<html></html>

字体标签:<font>写字</font>  
     属性: color 颜色(英文单词或使用16进制数:\#FFFFFF,\#FFF)    size 大小 (1-7)   face属性:字体

标题标签: h标签<h1>...<h6> 越小  都能够嵌套:

段落标签 :<p></p>

字体加粗: <b></b>

字体斜体: <i></i>

内容居中: <center></center>

下划线: u标签

src是img的地址  href是超链接要跳转的地址

HTML5:<!DOCTYPE html>

原生标签: <pre>

图片标签: <img>  
         属性: src:图片的上来源, width:图片的宽度, height:高度, alt: 图片找不到显示的内容

图片引入路径问题:  
              相对路径:直接写文件名或前面加./    
              如果放在上两级问题: 加../../  
              下一级目录: 加 下一级文件夹名/文件名

有序列表 标签: <ol> <li> 属性type :  1 数字类型  a:英文字符  i:罗马字符

无序列表  <ul> <li>文字</li> <ul>  ul:属性type :  disc 实心点, circle:空心圆 , square:方块 start: 从哪里开始的, 可以写100,就从100开始;

超链接标签: <a></a> 属性: href: 跳转的路径  ../案例1项目/demo1  target:  打开的方式   \_self:在自身页面打开(默认)     
                     \_blank:新打开一个窗口   \_parent:在有框架情况能使用,

表格标签: 表格中 cellspacing表格行之间的间隔  
             <table>  
                   <tr> 带表的行  
                   <tb>列</tb>  
                   </tr>  
              </table>

table: width 表格宽   Height: 高  Border:边框  Align:表格的水平位置: left right center

td属性: ...................... colspan=列,rowspan=行, 合并单元格

&nbsp空格  bgcolor="aliceblue"背景颜色

表单标签: background背景图片  
   <form>  action属性:提交的路径,默认提交到当前页面 mothod属性:请求方式,get和post,默认get get限制大小和post没有限制

表单元素: <input type="">  
       type属性: text文本框常用属性: name:表单元素的名称后台接受用,value:文本框默认值  size文本框长度  
                 maxlength:输入的最大长度   readonly:只读    
   
         password:密码 属性和type一样的  
          radio:单选按钮  checkbox:复选框的默认值为checked   button:普通按钮  
         image:图片按钮  submit: 提交按钮   reset:重置按钮   file : 文件上传  hidden: 隐藏字段

下拉列表 <select> <option>北京   option标签的selected默认  
   1.下拉列表内容全部显示出来:<select multiple="multiple" >;

文本域: <textarea> 属性 cols 行 rows列 默认值在中间写值

注意:name是写在同一种特性当中, value 是自己单独特性;  
   
   html新特性: <input> 属性有 data color email

1.HTML的框架标签: <frameset> 和 body冲突;  
          属性: rows  cols 可以设置每一块所占的比例,用,隔开,最后用\*代表所有  
   
    必须加这个标签才会显示;使用<frame>标签,代表切分的每个部分属性 src引入其他页面

2.显示到指定块  
     在from 属性 name,然后在超链接标签中的属性target=name, name是你想要显示的地方

3.特殊符号: < < > >

4.表面上是一个页面,但是本质上是由多个页面组成;

建立一个表格,首先用div把表格大小位置都固定好,而表格标签要做的只是撑起div,还有固定表单间距

### css部分 ###

水平居中 text-align: center  垂直居中vertical-align: Middle

HTML的块标签:  
  <div> :默认单独占一行  
  <span> :默认在同一行

css:就是层叠样式表,用来美化页面的;

语法: 选择器\{属性1:属性值1;属性2:属性值2;..\}

三种引入方式:  
  ①行内引入, <h1 style="color:red;font-size:200px;">

②页面内样式: 在<head>标签中使用<style>标签设置css  
  <head>  
    <style>  
      h1\{color:red;font-size:200px; \}  
    </style>

③外部引入:单独定义一个.css文件,在HTML中引入该css文件.  
    <link href="../demo.css" rel="stylesheet" type="text/css" />  
       rel:告诉你就是个样式表

css 选择器: 优先级  
  3. 元素选择器:  
       标签名称\{属性:属性值\}  
  1. ID选择器:  
      需要在标签内写入id,然后在<style>中\#id的名称\{属性:属性值\}  
  2.类选择器:  
     .需要在标签内写入class属性,然后在<style>中 .class属性的名称\{属性:属性值\}  
css的浮动:

float属性 属性值 left right  
清除浮动:写一个<div class="clear">,   .clear\{clear:both\} 清除两侧浮动;

css的其他选择器  
  属性选择器;  
    指定的input改变格式; input\[type="text"\]\{\}  
   
  后代选择器  
       \#d1 div\{\} ,查找的是所有的div;

子元素选择器  
    \#d1 > span\{\},查找div第一层级的span元素;,前提是span元素外面有包裹的其他元素;  
css背景  background;

css的盒子模型   上右下左    是div里面的内容  
   padding内边距  
   margin外边距  
   border边框

css定位;  
  position属性设置定位;  
     绝对定位 absolute  
     相对定位 relative

使用另外两个属性: left,top

每一个标签中都有display属性: inline显示到一行;

css的伪类  
  id 标签:link  原始的  
         :visited  点了  
         :hover  鼠标放在上面  
         :active  鼠标松开