• HTML与标记属性


    网站部分:UI:AI、PS  

    前端:html、css、js  

    网站:是一个存放在网络服务器上的完整信息的集合体。由域名、空间服务器、网站程序、数据库等组成。由多个网页以一定的方式连接在一起,成为一个整体。

    首页(index.html):制作首页要突出重点、分类准确、操作简单


     网页的三层结构:

    结构层:html    结构框架

    表现层:css     美化

    行为层:js   javascript    实现动态交互

    万维网:WWW  (World Wide web)一种基于超文本方式的信息检索服务工具

    用超链接的方式将各种不同空间的文字信息组织在一起的网状文本

    HTML:超文本标记语言,是构成web页面的基础    是WWW的母语

          HTML标记可以说明文字、图形、动画、声音、 表格、链接等

    超链接:特殊的文字标识,跳转到指向www中的资源

    统一资源定位符:URL   资源指向的地址 

    用于描述Internet上资源的位置和访问方式

      

    协议名://网址或IP端口号/URL

    http://www.baidu.com:80/路径

     主机    域名  端口号(http默认值)

    通信协议:http---超文本传输协议

    ftp传输文件


    HTML文档结构:

    <html>  开始代码

    <head>        头部标记(不被显示在正文,)

    <title>…</title>     

    </head>

    <body>

    页面内容

    </body>

    </html>  结束代码

    HTML标记:

    头部:

    <link> ; <meta> ; <title>…</title>  

    <style>…</style>  ;  <script>…</script>(插入js)

    属性间用空格隔开,属性值用“ ”括起来

    <meta>标记的属性:

    1.name 设定本网页的制作工具

    2.keywords 设定网页的关键字,便于搜索引擎搜索

    <meta name=“keywords” content=“关键字描述”>

    3.discription  设定网页的描述

    4.Content-Type  声明本网页所采用的字符集

    <meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

    文本格式

    编写网页的开头:DOCTYPE标记来声明是用什么语言版本来解释当前文本     

      <!DOCTYPE html>

    单标记:eg:<br>换行  <img src=“##.jpg ”>添加图片  <input>

    双标记:eg:<b>…</b>粗体

    块级标记:eg:<h1>…</h1>(标题)

    行内标记:

    标记属性:附加信息

    样式设置:单标记直接在标记内设置eg:<hr width=”” align=””>

    注释:<!—注释内容—>  注释会被浏览器忽略

    注:

    标记可以嵌套,不可以交叉

    文件名只能是英文字母、数字或下划线组成

    文件名区分大小写

    首页一般为index.html


     文字与段落

    标题字:共六级  字体依次递减  默认加粗显示    本身具有自动换行

    <h# align=“left/right/center”>标题文字</h#>

     水平对齐

    特殊符号:(注意最后的分号)

        空格:&nbsp;不管文字间有几个空格,都被视作一个空格

                  &lt;(小于号)      &gt;(大于号)    &copy;(版权符©) 

                  &reg;(注册符®)     &amp; &符       &times;(x符号)

    注释:<!—注释内容—>

    文字样式:16px  字体默认宋体  字号默认3  属性中的属性值都没有单位

    <font face=”” size=”1-7(字号表示)” color=””>  </font>

                                    字号依次递增    red/#00ffff

    嵌套:块级可以嵌套行级,行级不可以嵌套块级,同级可相互嵌套

    eg: <h#><font>…</font></h#>

    <b>…</b>    <strong>…</strong>  加粗

    <i>…</i>   <em></em>  斜体

    <del>…</del>  删除线

    <u>…</u>  下划线

    <sup>…</sup>  上标      <sub>…</sub>  下标

    <address>…</address> 通常显示为斜体 地址文字(E-mail、地址)(块级元素)

    段落:<p align=””>…</p>    一个p空一行

    换行:<br>

          <nobr>…</nobr>

          <wbr>…</wbr>

    居中标记:<center>…</center>  图片、表格、表单(H5不可用)  块级

    水平分隔线:<hr width=””size=”” color=”” align=”” noshade>

                               宽度        粗细

    预格式化:<pre>…</pre>   保持文档输出样式,原样输出  块级

    段落缩进:<blockquote>…</blockquote> 

    段前段后缩进5个字符,产生层次关系,可多个嵌套连用


    列表

    无序ul、有序ol、定义dl  目录dir  菜单menu

    无序列表:没有特定顺序的相关条目,呈并列关系。默认距离页面40px,

    <ul type=””>      设置项目符号样式:disc(默认)/circle/square

      <li>…</li>

      <li>…</li>

         …

    </ul>

    有序列表:   编号的样式:1/a/A/i/I

    <ol type=”” start=““>      改变编号的起始值,取阿拉伯数字

    <li>…</li>

      <li type=”1“>…</li>

    <li value=”5“>…</li>    改变本身及之后的值

         …

    </ol>

    原则:就近原则:在列表<ol></ol>的type属性和列表项标记<li></li>的type属性发生冲突的情况下,在指定的单个列表项遵循<li></li>的type属性进行显示。

    嵌套:整组嵌套,互相嵌套,

    一级默认实心圆,二级默认空心圆,三级默认实心方块

    √定义列表:

    <dl>    

    <dt>…</dt>            

        <dd>…</dd>

        <dd>…</dd>

            …

    <dt>…</dt>

        <dd>…</dd>

        <dd>…</dd>

    </dl>                                      

    (菜单列表,一般不嵌套)

     


    超链接

    指由一个网页指向一个目标的连接关系,可以是另一个网页、图片、邮件地址、文件、应用程序…         (属于网页的一部分)

    各个网页链接在一起后才能真正构成一个网站

    <a href=路径>…</a>

    分类:

      外部链接:跳转到当前网站的外部  一般要用绝对路径,要有完整的URL地址

      内部连接:在同一个网站内部  相对路径,明确指向哪个文件

    路径:

      绝对路径:完整的URL地址

    <a href="http://www.baidu.com">跳转到百度</a>

    √相对路径:以当前文件所在的路径为起点,进行文件查找。通常只包括文件夹名和文件名     (在本地不可以跨盘符)

      1.链接到同一目录下的文件:<a href=“index.html”>

      2.链接到下一级子目录a中的文件:<a href=“a/index.html”>

      3.链接到上一级目录中的文件:<a href=“../index.html”>

      4.链接到上两级目录中的文件:<a href=“../../index.html”>

      根路径:

      根目录:

    创建超链接:

    <a href=“url” title=“指向链接的文字” target=“目标窗口”>…</a>

                                             _self(在当前窗口打开)  _blank(新窗口打开)

    书签链接:跳转到指定的位置

      <a name=“书签名称”>连接内容</a>

      <a href=“#书签名称”>链接标题</a> (同一页面内)

     <a href=“URL地址#书签名称”>链接标题</a> (不同页面)

    下载文件:

    <a href“url”>链接内容</a>    (相对路径或绝对路径—word、pdf、文件)

    图片

    插入图片标记:                    设置宽/高,等比例缩放

    <img src=“URL”border=“ ” width=“ ” height=“ ” >

    title=“” 鼠标划入时显示信息

    alt=“图片加载失败时显示的内容”

    align=“ ” 定义图片的对齐方式 (影响跟在图片后边的内容)

    hspace=“ ” 水平间距

    vspace=“ ” 垂直间距

    图片连接:

      <a href=””><img src=””></a>


     滚动文字

    <marquee>文字或图片</marquee>  块级

      设置属性的值单位:px

    behavior:scroll(循环滚动/默认)  slide(滚动一次)  alternate(来回交替)

    direction:left  right  up  down

    bgcolor:red/十六进制

    width/height:数字/百分比

    hspace/vspace:数字

    loop:正整数n/infinite (循环次数)

      scrollamount:**px 文字每次移动的距离

      scrolldelay:**ms 间歇时间  1000ms=1s

    插入背景音乐:

    <bgsound src=”” loop=””>

    插入多媒体文件:

    <embed src=”” loop=””autostart=”true/false” width=”” height =”” type=”media-type” pluginspage=”pluge” >可插入各种多媒体文件


     表格(table tr td)罗列数据、布局

    <table>

      <caption>表格标题<caption>

    <tr>

    <th>…</th>  <!—表头、默认居中加粗显示-->

        …

    </tr>

    <tr>

    <td>…</td>   <!—单元格-->

        …

    </tr>

    </table>

    属性:

    border、bordercolor、width、height、bgcolor(背景颜色)background(背景图)

    边框样式:<table frame=”” rules=””>

    单元格间距:<table cellspacing=””> 间距为0,边框粗细值合并

    单元格边距:<table cellpadding=””>

    表格的水平对齐方式:<table align=””>

    tr(行)属性:

      <tr align=””>…</tr>  水平对齐

      <tr valign=”top/middle/bottom”>…</tr> 垂直对齐

      bgcolor、bordercolor、

    td(单元格)属性:

    align、valign、bgcolor、background、bordercolor、width、height、

    (rowspan、colspan跨行、列合并)

    <td rowspan/colspan=”行数/列数”></td>


    框架:

      <frame> 定义框架

      <framesel> 定义框架集

    结构:

    <html>

    <head>

    <title>…</title> 

    </head>    框架的边框

    <feameset border=””  rows=”10%,20%,*”>

      <frame src=“  ”>

    </frameset>

    </html>

    水平分割:rows   垂直分割:cols

    嵌套分割:用n个<frameset>连接

    target=”name=”””连接两个板块

    <frameset frameborder=”1/0”yes/no>  框架边框  默认为1  0为不显示

    <frame noresize>  不可移动

    <frame scrolling=”yes/no auto”>  滚动条

    浮动框架:<iframe src=””>…</iframe> 可以包含在body中


    表单

    form:name   action—传输到某个地址   method ---(get/post)

    get:浏览器将表单中的各个值添加到action属性后

    缺点:1.地址栏允许输入的URL长度有限,最多为2048个字符,不适合数据较多的表单,安全性较低。 2.get方法提交数据是明文的。

    post:传输较大数据

       (file:///F:/HTML/a.html?username=123&pwd=1234

    单行文本输入框:<input>单标记    

    <input name=””

              type=”text”

              size=”” 文本框大小

              mexlength=”n” 可输入的最大字符数

              value=“  ”  首次被载入时显示的值

             checked=”” 

      input type=”类型”                                与内容一样可省略

                         text      文本框

                         password  密码框  name  mexlength  size  value

                         checkbox  复选框  name  value(必填) checked(默认被选中)

                                                       <input name="" type="checkbox" value="3" checked>排

                         radio        单选框  name  type  value  checked

                                         (实现多选一,所有属性的name值应相同)

                         file      文件选择输入框 

                                    对于允许上传的文件,不能使用get方法

                                    <form name=”” action=”” method=”post” enctype=”上传格式”>

                                    <input type=”file”>

                         hidden    隐藏域  name  type  value()

     提交按钮:type=”submit” value=”“

    重置按钮:type=”reset” value=”“

    value的属性值显示在按钮上的字  默认为提交

    图片按钮(提交) <input name=”” type=”image” src=””>

    <input type=”button” value=””>


    多行文本输入框

    <form>               显示文本字符多少            victual 自动换行默认

    <textarea name=””cols=”” rows=”” wrap=  ”physical”显示换行符

    </textarea>       宽/列       高/行            off  不自动换行

    </form>

    标签中间内容是显示文本框的初始信息

    下拉列表          显示框大小       

    <select name=”” size=”1” multiple>实现多选:按ctrl多选

      <option value=””>    列表项    

      …

    </select> 

    默认值为第一项

    href和src的区别:

      href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接

      src是source的缩写,指向外部资源的位置,指向的内容将会嵌套到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内

  • 相关阅读:
    jquery正则表达式验证:正整数(限制长度)
    H5页面快速搭建之高级字体应用实践
    如何用Python写一个贪吃蛇AI
    HashMap多线程并发问题分析
    为RecyclerView打造通用Adapter 让RecyclerView更加好用
    学好Mac常用命令,助力iOS开发
    使用 Realm 和 Swift 创建 ToDo 应用
    看Facebook是如何优化React Native性能
    利用github搭建个人maven仓库
    Objective-C Runtime之着魔的UIAlertView
  • 原文地址:https://www.cnblogs.com/yxm440/p/7663741.html
Copyright © 2020-2023  润新知