html&css基础知识

***定义字符编码:一般为UTF-8(年国际通用编码)

***响应式界面:可以智能地根据用户行为以及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的布局,可以兼容多个终端。

在webstorm中给代码加注释:ctrl+shift+/

***img 标签:单标签。

<img src="17.JPG" alt="xiezheng" width="1000px "/>

1.src:图片路径
  2.alt:图片名称,描述或摘要。①鼠标放上去有提示②图片未加载出现文字代替
  3.width,height:图片大小。①对有形状的图片尽量只给一个尺寸,另一个自动变(防止变形)②可以以百分比来确定
***a标签:超链接-实现一个页面到另一个页面的跳转
<a href="http://www.baidu.com" target="_blank">百度</a>

1.href:跳转的目标地址

2.target:目标窗口(-blank:在新窗口中打开 -parent:在原窗口中打开 不写默认原窗口)

3.标签中间写提示文字

***表单:

<form action="#"method="get" ></form>

1.form中间内容作为一个整体提交

2.action:提交的目标地址

3.method:提交方式(get/post)不写默认get。GET一般用于获取/查询资源信息,而POST一般用于更新资源信息。get仅仅是获取资源信息,就像数据库查询一样,不会修改,增加数据。POST表示可能修改服务器上的资源的请求。GET请求的数据会附在URL之后,POST把提交的数据则放置在是HTTP包的包体中。(详解见hyddd博客)

***表单元素:p*6可以出现6个p标签

<form action="">
<p>用户名:<input type="text"/></p> 文本框
<p>密码:<input type="password"/></p>  密码框
<p>性别:<input type="radio" name="sex"/>男  单选框
    <input type="radio" name="sex" checked/>女</p>  默认选框
<p>爱好:<input type="checkbox"/>吉他  复选框
    <input type="checkbox"/>游泳
    <input type="checkbox"/>轮滑</p>
<p> 其他:<textarea name="" id="" cols="30" rows="10"></textarea></p>  多行文本框
<p><input type="submit"  value="提交"/> <input type="reset" value="重置"/></p>  按钮
    <p>时间:<select name="" id="">  
        <option value="">2007</option>
        <option value="">2008</option>
        <option value="">2009</option>
   </select></p>  下拉选框

</p> 照片:<input type="file"/></p>  文件域
</form>

***换行标签:<br>      分隔线标签:<hr>

***css样式:

<title></title>
    <style>
        p{color:yellow}  ②页面内样式

        @import url(css.css);  ③导入式
    </style>
    <link rel="stylesheet" href="css.css"/> ④ 链接式
</head>
<body>
<p style="color:green">cssssss</p>①行内样式:优先级最高
<p>sun</p>
<p>night</p>

***选择器:

<style>
   p{color:red}   ①标签选择器
    .xx{color:green;}        ②类选择器
        #xxj{color:yellow;}          ③ id选择器
    </style>
</head>
<body>
<p>ffff</p>
<p class="xx">sun</p>
<p id="xxj">night</p>

④伪类选择器(超链接设置)

<style>
       a{color:black}      代表四种状态
        /*a:link{color:red}*/    访问前
        a:hover{color:green}    鼠标悬停
        a:active{color:yellow}      点击激活
        a:visited{color:darkgrey}      访问后
    </style>
</head>
<body>
<a href="#">日月星辰</a>

⑤后代选择器:见下文无序列表后

background:url("../image/bg.gif")

***背景:url(地址)

repeat-x: 水平重复          left:水平左对齐

repeat-y: 垂直重复          bottom:垂直下对齐

no_repeat: 不重复

***<1>:倾斜<em>:倾斜     <b>:加粗

***去掉下划线:text-decoration:none

去掉下划线:text-decoration:underline

***三种列表:

<ul type="square">  --无序列表:Type属性值:
<li>sun</li>                  circle:空心圆                   disc: 圆点
 <li>sun</li>               square: 正方形
 <li>sun</li>                默认状态:disc: 圆点

</ul>

<ol type="a" start="3">       --有序列表-->

<li>hello </li>             --type="编号样式" start="编号起始值"
<li>hello </li>
    <li>hello </li></ol>

Type属性:
      1 阿拉伯数字
      a 英文小写
      A 英文大写
      i 罗马小写数字
      I 罗马大写数字

<dl>                       --自定义列表
    <dt>毛猪</dt>          一对:作解释
    <dd>洋娃娃</dd>
</dl>

后代选择器:
.news li{
    line-height: 30px;  /*行高*/
    list-style: none;    /*去除列表默认的点*/
    text-indent: 12px;      /*首行缩进*/
    border-bottom:dashed 1px #aaa;

***同页面跳转:

hello<a name="bottom"></a>    单击返回顶部跳转到hello

<p><a href="#bottom">返回顶部</a></p>

<a href="#di">news</a>    单击news跳转到di所在处

<a name="di"></a>

***表格:

<body>
<table border="2" width="30px" cellspacing="0" cellpadding="50px">
    <thead>
<tr>
    <th>rr</th>

<th>rr</th>    标题写在thead标签中,标题行用<th>

<th>rr</th></tr></thead>
    <tr>
        <td colspan="3">rr</td></tr>  合并列
</table>

***div:

div{
    width:900px;
    height:500px;
    background:#E9FBFF url(../images/img1.jpg) no-repeat right bottom;
    margin:100px auto;    边距(四边)
    border:double 8px red;   
    color:purple;
    padding:10px;       填充(四边)

一个:padding-left

两个:上下   左右

三个:上    左右     下

四个:上    右      下     左

Word-spacing:词与词间距

Letter-spacing:字母或汉字间距

position:absolute:绝对定位:参考点:浏览器左上角

relative:相对定位:参考点:它的父元素(有定位的父元素)

溢出隐藏:overflow:hidden

清空浮动:给空的div调用样式——clear:both

上一篇:java--实现将文字生成二维码图片,并在中间附上logo,下方附上文字


下一篇:iOS摇一摇功能、震动功能、简单的摇动动画、生成二维码图片与发送短信等几个功能