zoukankan      html  css  js  c++  java
  • 初识HMTL标签

    浏览器可以识别的语言非常少,有HTML/XML、CSS、JS

    HTML(HyperText Marked Language)超文本标记语言

    HTML 文档结构

    <html>
        <head></head> :head内部的内容不是给用户看的,是给浏览器去识别做相应操作的
        <body></body> :body内部的内容是浏览器展示给用户看的各种眼花缭乱的页面
    </html>
    

    HTML注释(注释是代码之母)

    单行注释:<!--当前为单行注释-->
    多行注释:<!--
    		多行注释1
    		多行注释2
    		-->
    

    由于html页面结构相对而言,多而复杂,不便于后期的维护和修改,通常在编写页面的时候,可以通过增加注释的方式人为的划分代码区域(养成习惯):

    <!--顶部导航条样式开始-->
    <!--顶部导航条样式结束-->
    <!--左侧菜单栏样式开始-->
    <!--左侧菜单栏样式结束-->
    ...
    

    标签的分类方式一,根据是否有结束标签来划分

    1.双标签  --有结束标签
    html,head,body
    2.自闭和标签  --没有结束标签,自身通过/>结束
    meta,img,br,hr
    

    标签的分类方式二,标签占用的区域划分

    1.块级标签  --独占一行
    h1~h6,p,br,hr,div
    注意:
    Ⅰ块级标签内部可以嵌套任意的块级标签和行内标签,除了p标签
    Ⅱ特例,p标签的内部只能嵌套行内标签,不能嵌套块级标签.强行嵌套没有问题,但符合html语法规范
    2.行内标签  --自身文本有多大,就占用多大的空间
    u,s,i,b,span
    注意:
    Ⅰ行内标签内部不能嵌套块级标签和行内标签
    

    head标签内常用标签

    <title>定义网页标题</title>
    <style>编写css代码(内部样式表)</style>
    <link>
    	1.用于引入外部css文件(样式表文件)
    	2.网站图标
    </link>
    <script>
    	1.该标签内可以直接编写js代码
        2.可以通过src属性引用外部js代码文件
    </script>
    <meta />
    1.可提供有关页面的元信息(meta-information),针对搜索引擎和更新频度的描述和关键词
    2.可不包含任何内容
    3.提供的信息时用户不可见的
    要注意的是:
    <!--1.指定文档的编码类型(需要知道)--->
    <meta http-equiv="content-Type" charset="UTF8" />
    <!--2.2秒后跳转到对应的网址,注意引号(了解)-->
    <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"/>
    <!--3.name属性: 主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的-->
    <meta name='keywords' content='meta总结,html meta,meta属性,meta跳转' />
    <meta name='description' content='Web开发基础知识总结'/>
    

    body标签内常用标签

    • 基本标签
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <!--字体加删除线标签-->
    <s>字体加删除线标签</s>
    <!--字体加粗标签-->
    <b>字体加粗标签</b>
    <!--字体加下划线标签-->
    <u>字体加下划线标签</u>
    <!--字体为斜体标签-->
    <i>字体为斜体标签</i>
    <!--段落标签,文本独占一行-->
    <p>段落标签,文本独占一行</p>
    <!--换行标签-->
    <br /> 换行标签
    <!--水平分割线标签-->
    <hr /> 水平分割线标签
    
    • 特殊符号标签(在p标签中演示)
    <!--空格字符: &nbsp;  注意是&开头 ;结尾-->
    <p>君不见&nbsp;黄河之水天上来&nbsp;&nbsp;奔流到海不复回</p>
    <p>君不见&nbsp;高堂明镜悲白发&nbsp;&nbsp;朝如青丝暮成雪</p>
    <!--大于字符: &gt; 注意是&开头 ;结尾-->
    <p>a大于b的表达式: a &gt; b</p>
    <!--小于字符: &lt; 注意是&开头 ;结尾-->
    <p>a大于b的表达式: a &lt; b</p>
    <!--and(&)字符: &amp; 注意是&开头 ;结尾-->
    <p>a&b a &amp; b</p>
    <!--人民币字符: &yen; 注意是&开头 ;结尾-->
    <p>人民币 &yen; 10000000元</p>
    <!--版权标识: &copy; 注意是&开头 ;结尾-->
    <p>版权标识 &copy;</p>
    <!--注册商标:&reg; 注意是&开头 ;结尾-->
    <p>注册商标 &reg;</p>
    
    • 常用标签
    <!--div 块级标签;本身没有任何特殊意义,多用于前期页面布局-->
    <div></div>
    <!--span 行内标签;本身没有任何特殊意义,多用于前期页面布局-->
    <span></span>
    <!--img 用于显示图片-->
    <img src="" alt="">
    <!--
        src中的内容:
        1.可以设置一个网站图片地址
        2.可以设置一个本地的图片地址
        3.可以设置成url,自动向该url发送get请求获取数据
        alt:当图片加载不出来的时候,默认展示的提示信息
        title:当鼠标悬浮在图片上的时候,展示的提示信息
        width,height:图片的宽和高,一般修改其中一个属性,另一个属性就会自动等比例缩放;两个都修改的话,图片就会失真
    -->
    <!--a 连接标签-->
    <a href=""></a>
    <!--
        href:
        1.用于设置超链接,点击该标签会跳转到该url所对应的资源
        2.锚点功能,设置为#+标签id值,点击就会跳转到该id值所对应的a标签所在的位置,例如:
            <a href="#div1"></a>
            <div id="div1"></div>
        target:控制是否在当前页跳转,默认是在当前页跳转,参数值有
            _self:当前页面跳转
            _blank:新建页面跳转
    -->
    
    • 列表标签
    <!--无序列表(使用频率较高),默认以·排序,类似word文档中无序项目符号-->
    <ul>
        <li>0001</li>				<!--显示结果:· 0001-->
        <li>0002</li>				<!--显示结果:· 0002-->
        <li>0003</li>				<!--显示结果:· 0003-->
    </ul>
    
    <!--有序列表,默认以数字排序,类似word文档中有序项目符号-->
    <ol>
        <li>0001</li>				<!--显示结果:1. 0001-->
        <li>0002</li>				<!--显示结果:2. 0002-->
        <li>0003</li>				<!--显示结果:3. 0003-->
        <li>0004</li>				<!--显示结果:4. 0004-->
    </ol>
    
    <!--标题列表,类似于word文档中多级项目符号-->
    <dl>
        <dt>标题1</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
        <dt>标题2</dt>
            <dd>内容1</dd>
            <dd>内容2</dd>
    </dl>
    
    • 表格列表
    <!--表格标签--
        table:定义表格框架
        thead:表格每一列的标题,可省略
        tbody:表格的主体部分,可省略
        tr:定义表格的行,表示一行,可放在table、thead和tbody中
    	th:定义表格的标题列,表示一列,必须放在tr中,不然没有意义了
        td:定义表格的列,表示一列,必须放在tr中,不然没有意义了
    	th和td之间的区别就是th内文本自动加粗
        定义一个标准版的table
    	属性
    		border:表格边框宽度,单位可用px(像素)
    		cellpadding:单元格内边距,边框距离内部元素的距离
    		cellspacing:单元格间距(也可理解为外边距),单元格之间的距离
    		colspan:左右合并单元格,值表示合并几个
    		rowspan:上下合并单元格,值表示合并几个
    -->
    <table border="1" cellpadding="2" cellspacing="0">
        <thead>  <!--标题行,用于自己加粗,可省略,直接写tr-->
        <tr>
            <td>标题行列1</td>
            <td>标题行列2</td>
            <td>标题行列3</td>
        </tr>
        </thead>
        <tbody> <!--内容行,跟thead标签搭配使用,可省略,直接写tr-->
        <tr>
            <td>内容行1列1</td>
            <td>内容行1列2</td>
            <td>内容行1列3</td>
        </tr>
        <tr>
            <td>内容行2列1</td>
            <td>内容行2列2</td>
            <td>内容行2列3</td>
        </tr>
        </tbody>
    </table>
    

    扩展知识

    以下适用于pycharm中的快捷方式

    1.书写html标签时,可只写标签名,然后点击,tab键,可自动补全.因为pycharm中存在emmet插件

    2.出现需要重复写多个相同标签(以li标签举例)时,可使用*n ,n表示数量,然后点击tab键

     <!--快捷方式:
    	>表示后续标签放在当前标签内部,
    	{$$$}表示li标签中的内容,
    	*4,表示重复4次
    -->
        ul>li{$$$$}*4 + tab键 
    <!--等价于以下内容-->
    <ul>
        <li>0001</li>
        <li>0002</li>
        <li>0003</li>
        <li>0004</li>
    </ul>
    
  • 相关阅读:
    idea设置全局ignore
    win 2012 安装mysql 5.7.20 及报错 This application requires Visual Studio 2013 Redistributable. Please ins
    win 2012 安装mysql 5.7.20 及报错 This application requires Visual Studio 2013 Redistr
    kafka 删除 topic
    java编译中出现了Exception in thread “main" java.lang.UnsupportedClassVersionError
    Centos中使用yum安装java时,没有jps的问题的解决
    Spring 整合Junit
    Spring纯注解配置
    Spring 基于注解的 IOC 配置
    打印java系统的信息
  • 原文地址:https://www.cnblogs.com/xiaodan1040/p/12102255.html
Copyright © 2011-2022 走看看