zoukankan      html  css  js  c++  java
  • 前端语言之HTML基础语句

    sublime text3怎么快速生成html代码

    1. Ctrl + N,新建一个文档。

    2. Ctrl + Shift + P,打开命令模式,再输入 sshtml 进行模糊匹配,将语法切换到html模式。

    3. 输入 !,再按下 Tab键或者 Ctrl + E ,就能快速打开HTML5的整体结构。

         image

    一、什么是html

    html(超文本标记语言) 用于创建网页的标准标记语言,可以直接由浏览器执行

    二、常见的标签

    1.h类标签

    image

    2.p标签

    image

    3.图片标签

    <img src="图片地址"/>

    4.a 标签是超链接,点击可跳转到其他的网页

    image

    5.<div></div>标签 是一个块级标签,相当于一个盒子

    6.其他标签

    <br/>    换行

    &nbsp;   空格

    <hr/>    水平分割线

    <span></span> 与其他标签在同一行,不换行

    7.无序列表和有序列表

    image


    ul标签type属性
    disc 实心圆
    circle 空心圆
    square 小方块
    ol标签的type属性
    1数字表示(1,2,3...)
    A 大写字母表示(A,B,C...)
    A 小写字母表示(a,b,c...)
    I 大写罗马数字表示(I,II,III…)
    i小写罗马数字表示(i,ii,iii…)

    8.样式

    image

    三、表格

    <caption> 表格标题 </caption>

    <table>表格</table>

    <th>表头</th>

    <tr>行</tr>   

    <td>列</td> 

    <table border="1">  边框

    <table cellspacing="0"> 设置单元格与单元格之间的距离 
    <table cellpadding="2px"> 设置文字与单元格之间的距离
    <table width="3px">  设置表格的宽度
    <table height="3px"> 设置表格的高度 
    <table bgcolor="green"> 背景颜色

    <th colspan="2">合并兩列</th>

    <th rowspan="2">合并兩行</th>


    四、表单

    1.基本操作

    <form name=”” method=”” action=””>

    <!-- name:表单的名字

    method:请求方式:get post

    action:有效的url,如果没有则发送到包含表达的页面的url -->

    </form>


    2.表单对象

    <form>

    <input type="text" name="控件名称" value="文字字段的默认取值"
           size="控件的长度" maxlength="最长字符数"/>   

           <!--type:text(文本),password(密码) ,submit(提交),reset(重置)
           radio (单选)checkbox (复选框)-->
           <!--单选 name 需要一样-->
           <input type="radio" name="sex" value="male" checked />男
            <input type="radio" name="sex" value="female" />女

    </form>


    3.下拉菜单

    <select name="select">

    <option value="福州">福州</option>

    <option value="广州">广州 </option>

    <option value="北京">北京</option>

    <option value="上海">上海</option>

    </select>


    4.文本域

    多行文本用:

    <textarea cols=”30” rows=”5”>

    clos 代表列数,rows 代表行数

    </textarea>


    5.图像

    <img src=”url” alt=””/>

    src:图片的地址

    alt :图片不显示时代替的文本


    五、框架的使用

    <iframe src="URL" frameborder="0"  >

       <!-- URL指向不同的页面

        frameborder :显示边框–>

    </iframe>

    六、HTML5新特性

    image

    <section>章节、页眉、标题</section>

    <article>文章</article>

    <nav>定义超链接的区域</nav>

    <header>定义文档的页面,通常引用引导导航信息</header>

    <footer>页脚</footer>

    <aside>侧边栏:嵌入内容</aside>


    七、html5表单

           1.

    <datalist>带搜索的选择框</datalist>

    <form autocomplete="on" novalidate="ture">
      <!--
       autocomplete="on":记忆输入过的值
       nvalidate="ture":不验证
      <input> 类型:text,  arch, url, telephone, email, password, datepickers, range 以及 color。
      -->
         <input autofocus="autofocus"/> 光标获取的焦点
         <input multiple=""/>可选择多个值email file
         <input pattern="[A-z]{4}" /> 正则表达式
      <input placeholder="提示" />  提示
      <input required="required" /> 必填


    2.输入类型type

    <input type="email" name="user_email" /> 邮箱地址验证

    <input type="url" name="user_url" />    url地址

      <input  type="number" name="points" min="0" max="10" step="2"   value="2"/> :数值,min:最小值;max:最大值;step;间隔 ;value:默认值

    <input  type="range" name="points" min="0" max="10" step="2" value="2"/>:滚动条

    <input type="color" name="colordemo" />颜色选择

    日期选择器

    • date - 选取日、月、年

    • month - 选取月、年

    • week - 选取周和年

    • time - 选取时间(小时和分钟)

    刚出炉的小菜鸟
  • 相关阅读:
    SonarQube 插件之 Issues Report & SonarLint 的配置及使用
    Docker搭建自己的Gitlab CI Runner
    Nexus OSS 3 搭建并配置使用 Docker & Git LFS 仓库
    js字符串去掉回车和空格
    使用QtCreator来进行UML建模
    Qt字符串转二维码字符串
    C++10进制转16进制字符串互转
    Qt设置控件透明度
    Qt在槽函数里判断是哪个对象触发的信号
    Qt求极值
  • 原文地址:https://www.cnblogs.com/zengch/p/13637599.html
Copyright © 2011-2022 走看看