美文网首页视觉艺术
前端结构与标签

前端结构与标签

作者: 栀心_d553 | 来源:发表于2019-12-09 14:04 被阅读0次

    格式:

    <html>---根标签

    <head>

    <title> </title>---里面的内容会显示在

    窗口上面

    </head>

    <boad>---body里面的内容都会显示在网页中

    <h1> </h1>

    </boad>

    </html>

    1、</b>加粗,用于想加粗字体前面

    2、< &it;

        > &gt;

        空格  &nbsp;  ----想要几个空格,就写几个

        版权符号  &copy;  --  使用后的结果是,在一段字的前面有

    @

    位置在于想变换的字体前面

    3、 <!DOCTYPE html>用于开头,文档声明,如果不写,会乱

        <meta charset = “utf - 8”/> 转换语言,位置在<title>

    标签的下面,叫字节数标签

    <p>...</p>段落符号,独占一行,且每段与每段之间会有一段空

    位置在body里面

    <br/>  位置:在文字后面,作用是换行,字节数标签

    <hr/> 作用:分割线,独占一行

    都是字节数标签,字节数标签只有一个标签

    4、<img      />  图片标签

        src  图片地址  alt  图片内容(当str中的图片地址在本地中找

    不回来时,会显示图片)

    用法:

    <img src = '11.gif'  alt = ‘这是一张图片' />

    如果图片的路径不在写前端的目录下,系统会找不到图片,这时

    候的src就应该写成: src = ‘1910/2.gif’(类似这个例子),描

    述图片的路径

    ..表示上一级目录

    .表示当前目录

    /路径分隔符

    一般写的路径都为相对路径,也可以写绝对路径,

    绝对路径的写法, src = ‘F:/tmp/22.jpg’开始写

    如果想找网上的图片,则图片地址应该找到图片,然后在右击图

    片,选择---在新标签页中打开图片,复制最上面的图片地址,写

    为 str = '粘贴图片地址'

    或者 右击选择‘复制图片地址’

    或者保存到本地

    width 等比例的缩小视屏 

    用法:

    <img src = '11.gif'  alt = ‘这是一张图片'  width =

    '100px'/>

    height 调整高度

    用法:

    <img src = '11.gif'  alt = ‘这是一张图片'  width = '100px' 

    height  =  ‘500px’/>

    但是不建议width和height同时使用,否则图形会变形

    <img src = '11.gif'  alt = ‘这是一张图片'  width = '100px' 

    height  =  ‘500px’loading = ‘lazy’ />    最后一个

    loading只有谷歌有

    5、<!--  书写内容    -->  叫做注释,作用:书写里面的内容,

    在网页上看不到,在源代码中可以看到

    6、<font  color = ‘red’size = '数字'  > 想改变的内容

    </font> 

    --用来定义文本的字体、颜色、大小

    7、二进制:0和1

        八进制:0-7

        十进制:0-9

        十六进制:0-9 ,a-f------(主要用于颜色上面)

    前段最常用的是:十进制和十六进制

    8、utf-8  解决乱码问题

        <meta charset = “utf - 8”/> 转换语言,位置在<title>

    标签的下面,叫字节数标签

    9、图片格式:jpg 支持颜色比较多,图片可压缩,但是不支持透

    明,一般用他来保存照片,或者颜色丰富的图片

    png:支持颜色比较多,支持复杂的透明

    gif:支持颜色比较小,支持简单的透明,支持动图

    图片使用原则:效果不一致的使用效果好的,效果一致的使用体

    积小的(如何看体积?只有把三种图片都保存到本地,挨个比较

    各自的体积)

    10、meta标签,字节数标签,只有一个

    位置:<title>标签下面

    <meta  charset  =  'utf - 8'/>  ----设置字符集

    <meta  name = 'keywords'    content  = 'HTML,Java,前端,

    python' /> ------作用效果:当用户在百度上搜索到content中

    的任意一个关键字时,就会搜索到你的这个网页(网页关键字)

    ,这是给搜索引擎看的

    <meta name = 'description'  content =

    ‘。。。。。’/>-----作用效果:content中的文字会出现在网

    页搜索内容的简介小字部分(用来指定网页的描述)

    关键字和描述,是不会影响排名的

    <meta  http-equiv = 'refresh'  content = '5;url = http://

    www.baidu.com '  /> ----表示网页在五秒之后跳转到百度这个

    页面上(名称:请求的重定向)

    11、html的注释不能嵌套

    结构必须完整,要么成对出现,要么是字节数标签

    标签可以嵌套,但是不能交叉嵌套

    12、内联框架,位置:<h1>标签下面(仅了解)

    <iframe  src = 'demo10_XHTML的语言规

    范.html'></iframe>

    作用效果:把src引入的html的内容通过小窗口表示出来

    也可以设置宽高

    比如:<iframe  src = 'demo10_XHTML的语言规

    范.html’height = ‘’weight = ‘’ ></iframe>

    13、超链接(重点)

    位置:在<h1>标签下面

    作用:跳转页面

    表示:<a  href = '网址或者自己写的html名称' >我是一个超链

    接</a>

    换行:<br>(一个br标签表示换一行)

    当点超链接的时候在本网页发生跳转,如果不想在本网页发生跳

    转,想再打开一个窗口,方法:

    <a  href = '网址或者自己写的html名称' target  = ‘_blank>

    我是一个超链接</a>

    就可以重新打开一个窗口,进行跳转

    <a  href = '网址或者自己写的html名称' target  = 'tom' >我是

    一个超链接</a>

    <iframe  src = '完整网址或者自己写的前端名称'  name =

    ‘tom’ ></iframe>

    这两个标签组合起来的效果:在点击超链接的时候,跳转的界面

    会在iframe中src的内联框架中显示

    就是指定页面跳转的位置

    !!@@一个网页的形成有:结构、表现、行为

    结构:html

    表现:css

    行为:JavaScript

    相关文章

      网友评论

        本文标题:前端结构与标签

        本文链接:https://www.haomeiwen.com/subject/wqvbgctx.html