zoukankan      html  css  js  c++  java
  • HTML笔记

    1.简介概念
        1)HTML:超文本标记语言。
        2)浏览器内核(渲染引擎):读取网页内容,整理讯息,计算网页的显示方式并显示页面。
        3)Web标准:W3C。
            原因:浏览器不同,他们显示页面或者排版就有些许差异。
            优点:
                1 让Web发展前景更广阔。
                2 内容能被更广泛的设备访问。
                3 更容易被搜索引擎搜索。
                4 降低网站流量费用。
                5 使网站更易于维护。
                6 提高页面浏览速度。
        4)Web标准构成
            主要包括结构、表现和行为。
            1 *结构:用于对网页元素进行整理和分类,HTML。
            2 表现:用于设置网页元素的版式、颜色、大小等外观样式,CSS。
            3 行为:指网页模型的定义以及交互的编写,JS。
    2.HTML骨架
        1)<!DOCTYPE html>  --当前页面采用的是HTML5版本来显示网页,必须写在第一行,叫做文档类型声明标签。
        2)<html lang="en">  --或zh-CN(推荐)
        3)<meta charset="UTF-8" />  --规定HTML文档应该使用哪种字符编码。
    3.标签
        1)标签的语义:标签是用来干什么的。
        2)常用便签
            1 标题标签:<h1>-<h6></h1>-<h6>
            2 段落和换行标签:<p></p>、<br />
            3 文本格式化标签:
                加粗:<strong></strong>或<b></b>
                倾斜:<em></em>或<i></i>
                删除线:<del></del>或<s></s>
                下划线:<ins></ins>或<u></u>
            4 布局标签,无语义:<div></div>和<span></span>
                div:单独占一行,大盒子
                span:一行可以多个,小盒子
            5 图像标签:<img src="图片URL"/>
                src为必须属性。
                alt为替换文本,图像显示不出来用文字替换。
                title、width、height、border
            6 超链接标签:<a></a>
                href:用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能。
                target:用于指定链接页面的打开方式,其中_self为默认值,_blank为在新窗口中打开方式。
                *分类:外部链接、内部链接、空链接#、下载链接(地址链接是文件)、网页元素链接(文本、图片等)、锚点链接(快速定位到页面中的某个位置id="two"-->href="#two")
            7 注释标签:<!-- 注释内容 -->
            8 表格:
                <table>
                    <tr>
                        <th></th>--表头单元格,加粗居中显示
                        <td></td>
                    </tr>
                    或
                    <thead>
                        <tr>
                            <th></th>
                            <td></td>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
                align(left/center/right):规定表格相对周围元素的对齐方式。
                border:默认无边框,为1表示有边框。
                cellpadding(像素值):规定单元边沿与其内容之间的空白,默认像素1。
                cellspacing(像素值):规定单元格之间的空白,默认像素2。
                width(像素值或百分比):规定表格的宽度。
                *合并单元格:
                    跨行合并:rowspan="合并单元格的个数"
                    跨列合并:colspan="合并单元格的个数"
                    合并后要删除多余单元格
            9 列表
                分类:有序列表,无序列表,自定义列表
                无序列表:<ul><li></li></ul>前面默认是小黑圆点,ul里面只能是li。
                有序列表:<ol><li></ol></ol>
                自定义列表:
                    <dl>
                        <dt></dt>--项目或名字
                        <dd></dd>
                        <dd></dd>
                    </dl>
            10 表单
                包含:表单域、表单控件(表单元素)、提示信息。
                <form></form>
                属性:
                    action:url地址,用于指定接收并处理表单数据的服务器程序的url地址。
                    method:get/post,用于设置表单数据的提交方式。
                    name:名称,以区分同一页面中多个表单域。
                表单元素:
                    <input />
                        属性:
                        type:button、checkbox、file、hidden、image、password、radio、reset、submit、text
                        name、value、checked、maxlength
                        *单/复选框必须都有相同的name,单选框才能实现单选。
                    <select>
                        <option></option>
                    </select>
                    <textarea rows="多少行" cols="一行多少个字符数"></textarea>
            11 label
                为input元素定义标注,用于绑定一个表单元素(通过for=id属性),当点击label文本时,浏览器自动将焦点/光标转到表单元素上。
    4.路径
        1)目录文件夹:就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,如html文件、图片等。
        2)根目录:打开目录文件夹的第一层就是根目录。
        3)相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。
        4)绝对路径:指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。--比较少使用
    5.特殊字符
        空字符:&nbsp;
        <:&lt;
        >:&gt;
        &:&amp;
        ¥:&yen;
        版权C套圈:&copy;
        注册商标R套圈:&reg;
        摄氏度小圈圈:&deg;
        +加-:&plusmn;
        X:&times;
        除号:&divide;
        平方2²:&sup2;
        立方3³:&sup3;
    6.HTML5新特性
        1)新增语义化标签
            <header>:头部标签
            <nav>:导航标签
            <article>:内容标签
            <section>:定义文档某个区域
            <aside>:侧边栏标签
            <footer>:尾部标签
        *在IE9中,这些新增标签需转换为块级元素。
        2)新增多媒体标签
            <audio>:音频--MP3/Wav/Ogg
                属性:autoplay、controls、loop、src
            <video>:视频
                属性:autoplay、controls、width、height、loop、preload、src、poster、muted
            *菜鸟教程有详细教程。
        3)新增input类型
            type="email/url/date/time/month/week/nunmber/tel/search/color";
            优点:有些输入在表单域内不用再另外验证表单。
        4)新增表单属性
            required:required;
            placeholder:提示文本;
            autofocus:autofocus;
            autocomplete:off/on;--默认为on,保存输入过的内容,关闭比较安全。
            multiple:multiple;--可以多选文件提交。
     
    ————学习笔记
  • 相关阅读:
    Git(五):Git分支管理策略
    Git(四):Git远程操作详解
    Git(三):Git 使用规范流程
    Git(二):常用 Git 命令清单
    Git(一):Eclipse中配置Git
    (一)Spring’s MVC Architecture
    Maven(九)”编码 gbk 的不可映射字符“ 问题解决方案
    Maven(八) Maven项目和testng结合应用
    Maven(七) maven 常用命令
    Maven(四-2) Maven pom.xml 配置详解
  • 原文地址:https://www.cnblogs.com/atao24/p/13423512.html
Copyright © 2011-2022 走看看