zoukankan      html  css  js  c++  java
  • Html基础(二)

    HTML的基本格式

    <!DOCTYPE html>                 <!---命名文档类型HTML5--->
    <html lang="en">                <!---说明我们写的是标记语言HTML文档--->
    <head>                          <!---头部文件(描述区)--->
        <meta charset="UTF-8">      <!---编码格式utf-8、gb2312、gbk--->
        <title>Title</title>        <!---网页标题--->
    </head>
    <body>                          <!---命网页主体--->
    
    </body>
    </html>
    

    HTML5的基本语法

    HTML5标记的语法

    常规标记

    <标记名称 属性1名="属性1值" 属性2名="属性2值" ......></标记名称>

    空标记

    <标记名称 属性1名="属性1值"/>
    标记有两种形式,我们分别称它们为单标记和双标记或者空标记和普通标记;
    说明:
    (1)写在<>括号里的第一个单词,叫做标记,也叫标签,也称做元素;
    (2)标记和属性用空格隔开,属性和属性值用等号相连接,属性值必须用双引号括起来;
    (3)一个标记可以有多个属性,属性和属性之间用空格隔开,属性不分先后顺序;
    (4)空标记是指没有结束标签的标记,必须使用"/"来关闭,例如:


    ;

    HTML5常用标签

    标题标签

    <h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>
    

    标题标签共有六级,一级字体最大;

    字体标签

    段落标签,标识一个段落(默认情况下段落与段落之间有段间距)


    这两个标签都是使字体倾斜,一般情况下推荐使用标签


    设置文本加粗效果的标签,一般情况下推荐使用标签,语义明确


    设置文本下划线的标签


    空标签,换行标签
    空标签,水平线标签

    字符实体(转义字符)

    空格

    >右尖括号

    <左尖括号

    备案中图标

    HTML5列表

    HTML中有三种列表,分别是:无序列表,有序列表,自定义列表

    无序列表

    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    

    有序列表

    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    

    有序列表的属性
    (1)type 规定列表中的列表项目的项目符号的类型
    语法:

    <ol type="A">
        <li></li>
    </ol>
    
    <ol type="I">
        <li></li>
    </ol>
    

    1 数字的有序列表默认有(1,2,3,4)
    a 字母顺序的有序列表有(a,b,c,d)
    A 大写字母的有序列表有(A,B,C,D)
    i 罗马数字小写(i,ii,iii,iv)IV
    I 罗马数字大写(I,II,III,)

    (2)start 属性规定有序列表的开始点
    语法:

    <ol start="5">
        <li></li>
        <li></li>
        <li></li>
    </ol>
    

    自定义列表

    <dl>
        <dt>名词</dt>
            <dd>解释</dd>     <!---definition description 定义描述--->
    </dl>
    

    HTML5超链接和图像

    超链接

    语法:
    链接文本或图片
    空连接

    说明:
    href部分中url后边跟的是链接页面的地址(包含文件名) title属性,当加入title属性是鼠标指针在这个对象上会显示title的内容;
    target 属性定义了打开链接的目标窗口;
    _blank 在新的浏览器标签页上打开一个新的窗口(保留原始页面);
    _self 在当前浏览器标签页打开新的跳转窗口,此为默认;

    图像

    语法:
    图片替代文本

    说明:
    属性src表示图片的来源(图像的存放路径);
    border属性标识了图像的面框;
    width和height设定图像在页面上显示的宽高;
    title这是当鼠标悬停在图片上时要显示的信息;
    alt当图片不能正确显示的时候,可以用作提示的信息给用的属性,这样用户体验也许会好些;

    文件的相对路径与绝对路径

    相对路径

    相对路径的写法:
    (同级)当文件目录与目标目录在同一文件夹下时,直接书写文件名+文件后缀
    (上级找下级)当当前文件夹和目标文件所处的文件夹在同一路径下时,目标文件夹名/目标文件全称+目标文件后缀
    (下级找上级)当当前文件所处的文件夹和目标文件在同一目录时,使用../将当前文件跳转到上一级别目录同级文职再+目标文件名+目标文件后缀;例如../images/a01.jpg

    绝对路径

    例如:

    HTML5常用元素

    快标签

    语法:

    说明:
    没有具体含义,统称为快标签,用来设置文档区域,是文档布局常用对象

    语法:

    说明:
    文本结点标签,可以是某一段文字或是某一个字

    注释

    表格属性

    说明:
    注:一对tr表示一行;一对td表示一个单元格(一列)

    表的相关属性:
    (1)width="表格的宽度"
    (2)height="表格的高度"
    (3)border="表格的边框"
    (4)bordercolor="边框色"
    (5)cellspacing="单元格与单元格的间距"
    (6)cellpadding="单元格与内容的距离"
    (7)aligh="表格的对其方式" 取值:"left"、"center"、"right" (valigh="垂直对齐"、top、buttom、middle)
    (8)合并单元格属性:(td) 合并列:colspan"所有要合并的单元格列数" 合并行:rowspan="所有要合并单元格的行数"

    表单元素与属性

    表单的作用:
    用来收集用户的信息

    表单框

    表单控件

    语法: 说明: `input:`表即可创建按钮、文本输入框、选择框等各种类型的输入字段 `name:`属性标识表单域的名称 `type:`属性标识表单控件的类型,大概有十多种 `value:`属性定义表单域的默认值,其他属性根据type的不同而有所变化 `maxlength`:控制最多输入的字符数 `size:`控制框的宽度(以字符为单位)

    (1)文本框
    (2)密码框
    (3)提交按钮
    (4)重置按钮
    (5)空按钮
    (6)单选按钮组

    默认选中
    (7)复选框组

    disabled="disabled"(禁用) checked="checked"(默认启用)

    下拉菜单

    语法:

    表单域多行文本定义

    语法:

    说明:
    多行文本,row属性和cols属性用来设置文本输入窗口的高度和宽度,单位是字符
    阻止浏览器对窗口的拖到设置:{resize=none;}(这是css属性)

  • 相关阅读:
    web实现rtmp推流拉流(vue + nginx)
    css邊框
    通过IIS操作修改服务器文件没有权限的解决办法
    C#、ASP.NET、WinForm
    阿里云 ECS实例诊断与修复工具,将问题解决周期从24小时缩短至分钟级
    Gartner发布云产品评估报告:阿里云计算能力全球第一
    晓生:这个朋友我交定了!
    从 VMWare 到阿里神龙,虚拟化技术 40 年演进史
    如何在公有云上部署私有云?阿里云专有宿主机轻松搞定
    RHEL6.4安装出现“sda must have a GPT disk label ”解决方法
  • 原文地址:https://www.cnblogs.com/luomit/p/13863490.html
Copyright © 2011-2022 走看看