zoukankan      html  css  js  c++  java
  • html基础

    <标记 属性="属性值" 属性 = "属性值"> 内容 </标记>
    开始标签(开放标签) 元素内容 结束标签(闭合标签)
    空标记: <标记 属性 = "属性值" /> 最后要以"/"结束
    标签可以拥有属性为元素提供更多的信息
    属性以键值对的形式出现
    通用属性: class 规定元素的类名,id规定元素的唯一id,style规定元素的样式, title规定元素的额外信息
    target = "_self / _blank"
    文本标题 (共分六级标题)
    <h1>一级标题</h1> <h2>二级标题</h2> ...<h3>三级标题</h3>
    段落 <p>段落文本内容</p>
    空格 &nbsp; 最后需要";"
    加粗 <b> </b> / <strong> </strong>(加重语气)
    强制换行(空标记) <br />
    倾斜 <i> </i> / <em> </em>(着重文字)
    大号字 <big> </big> 小号字 <small> </small>
    上标字 <sup> </sup> 下标字 <sub> </sub>
    插入字 <ins> </ins> 删除字<del> </del>
    标签:<style>:样式定义 <link>:资源引用
    属性 rel="stylesheet" :外部样式表
    type="text/css":引入文档类型
    margin-left:边距
    列表 :
    无序列表 <ul type ="disc/circle/square"> <li> 列表项内容</li> <li> 列表项内容 </li>... </ul>
    属性:disc 、 circle 、square 列表前标志
    有序列表 <ol> <li> 列表项内容</li> <li> 列表项内容 </li>... </ol>
    属性: A 、a 、I 、i 、start
    自定义列表 <dl> <dt>名词<dt> <dd>名词解释</dd> <dt>名词<dt> <dd>名词解释</dd> ... </dl>
    超链接 <a href = "目标文件的路径及全称"> 名称 </a>
    文档内的链接
    <a name="top">内容</a>
    <a href="#top">链接</a> 当点击链接时,会跳转至name属性的内容页面显示区域
    图片 <img src = "目标文件的路径及全称" />
    weight,height,alt=""(当图片不能显示时,会将属性值的文本内容显示)
    点击图片完成超链接 <a href = "目标路径的路径及全称"> <img src = "目标文件的路径及全称"></a>
    水平线 <hr />
    div元素也被称为块元素,主要是组合HTML元素的容器
    <div id="" / class="" > </div>
    文档区域,文档布局对象
    span元素是内联元素,可作为文本的容器
    <span> </span>
    文本节点(某一小段文本或某一个字)
    表格
    <table weight = "#" height = "#" border = "#" align = "left/center/right" cellspacing = "单元格间距" bgcolor="背景颜色" background="背景图片" cellpadding="单元格边距" >
    <caption>标题</caption>
    <tr>
    <th>表头</th>
    <th></th>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>

    </table>
    合并单元格属性
    colspan="所要合并的单元格的列数..合并列";
    rowspan="所要合并的单元格的行数..合并行";
    表单:用来收集用户信息
    <form name="表单名称" method="post/get" action="" >
    <input type="text" value="默认值" />
    <input type="password" />
    <input type="button" value="按钮内容" />
    <input type="submit" value="按钮内容">
    <input type="checkbox">(复选框)
    <input type="radio" name="sex">
    <input type-"radio" name="sex"> (单选框,必须增加name属性且name属性值一致才能保证单选框的实现)
    <select>
    <option>下拉选内容</option>
    <option>下拉选内容</option>
    <option>下拉选内容</option>
    </select>
    </form>
    <textarea rosl="3" cols="3"> 文本域提示内容</textarea>
    、 <lable> 控制标签、 <filedset>定义域
    <legend>域的标题 、 <select>选择列表、 <optgroup>选项组
    <option>下拉列表的选项、 <button> 按钮

    表单框form作为整体框架,其他的框架作为子框架必须嵌套在表单框内

    块元素:块元素在显示时,通常会以新行开始 eg:<h1> <p> <ul>
    内联元素:内联元素通常不会以新行开始 eg:<b> <a> <img>
    布局:div布局、table布局
    HTML框架标签(frame):框架对于页面的设计有着很大的作用
    由于现在frame和frameset已被div+css取代,已过时
    但是iframe标签仍然经常被使用
    实体:HTML中预留字符串必须被替换成字符实体


    CSS 汉译层叠样式表
    样式表创建: 内部样式表
    <style type="text/css">
    body{background-color:red}
    p{margin-left:20px}
    </style>
    外部样式表
    <link rel="stylesheet" type="text/css" href = "mystyle.css">
    行内样式表(内联样式表)
    <p style = "color:red">
    创建内部样式表语法:
    <style type = "text/css">
    /*CSS语句*/
    <style>
    说明:用style元素来创建样式表时,必须将改标记写在文件头部<head></head>之间
    CSS由选择器(选择符)和声明(属性和属性值)两部分组成
    CSS语法: 选择符{属性 : 属性值;}
    说明:属性和属性值之间用":"分隔,声明必须放在花括号内
    一个选择符可以有多个属性,属性和属性之间用分号隔开
    一个属性可以有多个属性值,属性值和属性值之间用空格分开
    选择符表示要定义样式的对象,可以是元素本身,也可以是一类元素或制定名称的元素。
    css中也可以继承:嵌套内层的标签如果没有定义自己的样式,则使用外层的样式,若是定义了自己的样式则使用自己定义的样式

    常用选择符有:
    类型选择符:语法:元素名称1,元素名称2{属性:属性值 ;属性:属性值}
    ID选择符:
    语法: #id名{属性 : 属性值;}
    <div id = "top"> <p></p> <h1><h1> </div>
    #top{weight:100px ; height:50px ...}
    如果只想改变p标签的css样式,不改变h1标签,则可以在id后面空格+标签名
    #top p{weight:100px ; height:50px ...}
    id不能是关键字,一个id名称只能对应文档中一个具体的元素对象
    最大用处:创建网页的外围结构
    常和派生选择器组合使用
    <p id="pid"> <strong>p标签</strong></p>
    <h1> <strong>h1标签</strong></h1>
    若是想为p标签内的strong标签增加样式:
    #pid strong{
    color:red;
    }
    class选择符:
    语法:.class名{属性 : 属性值;}
    <div class ="top"> </div>
    .top{weight:1010px; height:200px ...}
    用法:class选择符更适合定义一类样式
    通配符:
    群组选择符:
    语法: 选择符1,选择符2,选择符3...{属性 :属性值}
    包含选择符:
    伪类选择符:
    伪对象选择符
    派生选择器:主要用于嵌套的标签内具体定义某一个标签的具体样式效果
    <p> <strong>p标签</strong></p>
    <h1> <strong>h1标签</strong></h1>
    若是想为h1标签内的strong标签增加样式:
    h1 strong{
    color:red;
    }
    若是单独为strong标签增加效果
    strong{color:blue} 但是增加此选择器不会更改h1内的strong的效果样式,只会更改p内strong的效果,因为h1内的strong标签已经单独实现样式效果们不会被覆盖
    属性选择器/属性和值选择器
    内部样式定义:
    <style type="text/css">{
    [title]{
    color:red;
    }
    [title="ti"]{
    color:bule;
    }
    }
    <p title="ss">属性选择器</p>
    <p title="ti">属性和值选择器</p>
    css中若是为title指定具体的值那么只有当title的值相同时才能实现样式效果
    css背景:css允许应用纯色作为背景,也允许使用背景图片作为背景。
    background-attachment :背景图像是否固定或者随着页面的其他部分滚动
    background-color :设置元素的背景颜色
    background-image:url("图片名称 a.jpg") :设置图片为背景
    background-position :设置背景图片的起始位置
    background-repeat :设置背景图片是否及如何重复
    background-size:规定背景图片的尺寸
    background-origin:规定背景图片的定位区域
    background-clip:规定背景的绘制区域
    css文本:css文本属性可定义文本的外观,通过文本属性可改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进等
    color:文本颜色 direction: 文本方向 line-height:行高
    letter-spacing:字符间距 text-align:对齐元素中的文本
    text-decoration:向文本添加修饰
    css字体:css字体属性定义文本的字体系列、大小、加粗、风格和变形等
    font-family:字体系列 font-size:字体尺寸 font-style:字体风格
    font-variant:以小型大写字体或正常文本字体显示文本 font-weight:字体粗细
    css链接的四种状态:
    a:link: 普通的、未被访问的链接
    a:visited: 用户已访问的链接
    a:hover: 鼠标指针位于链接的上方
    a:active: 链接被点击的时刻
    <a href="链接地址">链接名</a>
    更改状态 :a:link{color:颜色;} a:visited{color:颜色;}...分别改变不同状态时的颜色
    text-decoration属性大多用于去掉链接的下划线



  • 相关阅读:
    No configuration found for this host:al
    相对路径和绝对路径
    工具类学习
    JRebel没有自动部署的解决方法
    之前写了http解析高德地图时,json转对象搞了半天 , 今天同事用GSON把json转对象,一句代码就解决了,代码如下
    导入项目时遇到的问题
    解析Http请求调用高德地图的api(货车路径规划)
    二进制中的符号位的区分以及表示
    svn提交及更新时的常见问题
    JDBC 连接池下重构操作
  • 原文地址:https://www.cnblogs.com/nordon-wang/p/6040766.html
Copyright © 2011-2022 走看看