GVKun编程网logo

前端技术：HTML部分---Head标签中包含的头文件标签，body标签包含的内部标签

87

如果您对前端技术：HTML部分---Head标签中包含的头文件标签，body标签包含的内部标签感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解前端技术：HTML部分---Head标签中包含的头文

如果您对前端技术：HTML部分---Head标签中包含的头文件标签，body标签包含的内部标签感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解前端技术：HTML部分---Head标签中包含的头文件标签，body标签包含的内部标签的各种细节，此外还有关于02-body标签中相关标签、03-body标签中相关标签、03-HTML的body标签（文本标签）学习、AngularJS-渲染字符串中包含的HTML标签的实用技巧。

本文目录一览：

前端技术：HTML部分---Head标签中包含的头文件标签，body标签包含的内部标签

前端技术：HTML部分---Head标签中包含的头文件标签，body标签包含的内部标签

1、Head标签中包含的 头文件标签的作用：

（1）title标签：定义网页的标题。

（2）Meta标签：一般用于定义页面的特殊信息，例如页面的关键字、页面描述等

（3）link标签：用于引入外部样式文件（CSS 文件）。

（4）style标签：用于定义元素的CSS样式。

（5）script标签：用于定义页面的JavaScript代码，或者引入外部JavaScript文件。

 

Meta标签包含的属性

（1）charset属性：字符集编码方式；

ASCII：数字、英文字母、字符进行编码

GB2312：简体中文

Unicode：所有语言

UTF-8：所有语言，占用空间更小（现在一般都用这个）

eg:

<Meta charset="UTF-8" >

（2）name属性：把content属性关联到一个名词

（3）http-equiv属性：把content属性关联到HTML头部

（2）+（3）：（4）content属性：定义与http-equiv或name属性相关的元信息。

分享图片

 

link包含的属性：

分享图片

2、body标签包含的内部标签（1）

(1)标题标签：h1~h6

(2)段内换行：br

(3)段内分组：span

(4)段落：p

(5)预留格式：pre

(6)水平线：hr

 

标题标签：h1~h6

分享图片

段落标签：p

分享图片

段内换行：br

分享图片

空格字符：&nbsp；

分享图片

预留格式：pre

分享图片

行内组合：span

分享图片

水平线：hr

分享图片

2、body标签包含的内部标签（2）

（1）超链接标签：a

（2）图片标签：img

超链接:a

一般运用在：文字超链接、图片超链接、导航栏

分享图片

锚点连接：a

分享图片

 图片标签：img

分享图片

2、body标签包含的内部标签（3）

（1）列表：ul 、ol、li

（2）表格：table 、tr 、td

（3）区域：div

无序列表：ul 、li

分享图片

 

 有序列表：ol 、li

分享图片

列表：

分享图片

表格：table 、tr 、td、th

分享图片

th

分享图片

合并行、列

分享图片

 

 区域：div

分享图片

块元素和行内元素：（左边为块元素的描述，右边为行内元素的描述）

分享图片

                    

分享图片

块元素与行内元素的转换

 

分享图片

2、body标签包含的内部标签（4）

 表单与表单元素

（1）表单：form

（2）表单元素：input

（3）表单元素：select、option

（4）表单元素：textarea

分享图片

表单：form

分享图片

文本框、密码框：input

分享图片

提交\重置按钮：input---submit\reset

分享图片

单选框、复选框：input---radio checkBox

分享图片

eg:

分享图片

下拉列表框：select  option

分享图片

文本域：textarea

 

分享图片

内嵌框架：iframe

分享图片

 

注释内容

分享图片

02-body标签中相关标签

02-body标签中相关标签

今日内容：

  • 字体标签：

    h1~h6、、、、、、

  • 排版标签

　　　
、 、
、、
、



一、字体标签


字体标签包含：h1~h6、、、、、、


标题标签h1~h6


标题使用
至
标签进行定义。
定义最大的标题，
定义最小的标题。具有align属性，属性值可以是：left、center、right。

路飞学城
    路飞学城
    路飞学城
    路飞学城
    路飞学城
    路飞学城





字体标签(已废弃)


    

  • 
color="红色"或color="#ff00cc"或color="new rgb(0,255)"：设置字体颜色。设置方式：单词   #ff00cc   rgb(0,255)
    • 



    

  • 
size：设置字体大小。 取值范围只能是：1至7。取值时，如果取值大于7那就按照7来算，如果取值小于1那就按照1来算。如果想要更大的字体，那就只能通过css样式来解决
    • 

  • 

    face="微软雅黑"：设置字体类型。注意在写字体时，“微软雅黑”这个字不能写错。
    

    • 



实例：

字体





粗体标签或(已放弃)


示例：

小马哥
小马哥



效果：




 中划线标记（已废弃）


示例：

小马哥
小马哥



效果：




或（已废弃）


示例：

小马哥
小马哥


效果：




上标 下标


上小标这两个标签容易混淆，怎么记呢？这样记：b的意思是bottom：底部


例子：

522


效果：




 特殊字符


    

  • 
&nbsp;：空格 （non-breaking spacing，不断打空格）
    • 

  • 
&lt;：小于号（less than）
    • 

  • 
&gt;：大于号（greater than）
    • 

  • 
&amp;：符号&

    • 

  • 
&quot;：双引号
    • 

  • 
&apos;：单引号
    • 

  • 
&copy;：版权©

    • 

  • 
&trade;：商标™

    • 



要求大家背过的特殊字符：&nbsp;、&lt;、&gt;、&copy


比如说，你想把
作为一个文本在页面上显示，直接写
是肯定不行的，因为这代表的是一个段落标签，所以这里需要用到转义字符。应该这么写：


<div>


这是一个HTML语言的p标签


03-body标签中相关标签
03-body标签中相关标签
标签中相关标签


今日主要内容：



一、列表标签


列表标签分为三种。




英文单词解释如下：



示例：


         张三    
         李四    
         王五    

    


效果：




注意：


    

  • li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
    • 

  • 我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。
    • 



属性：


    

  • 
type="属性值"。属性值可以选： disc(实心原点，默认)，square(实心方点)，circle(空心圆)。
    • 



效果如下：




列表之间是可以嵌套的。我们来举个例子：代码：

  
    <北京市
        
            海淀区
            朝阳区
            东城区

    <span&gt;</</span><span&gt;ul</span><span&gt;></span>
<span&gt;</</span><span&gt;li</span><span&gt;></span>

<span&gt;<</span><span&gt;li</span><span&gt;><</span><span&gt;b</span><span&gt;></span>广州市<span&gt;</</span><span&gt;b</span><span&gt;></span>
    <span&gt;<</span><span&gt;ul</span><span&gt;></span>
        <span&gt;<</span><span&gt;li</span><span&gt;></span>天河区<span&gt;</</span><span&gt;li</span><span&gt;></span>
        <span&gt;<</span><span&gt;li</span><span&gt;></span>越秀区<span&gt;</</span><span&gt;li</span><span&gt;></span>
    <span&gt;</</span><span&gt;ul</span><span&gt;></span>
<span&gt;</</span><span&gt;li</span><span&gt;></span>


<span></<span>ul<span>>



效果:




声明：ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放。甚至可以再放一个ul。


    ，里面的每一项是
  1. 



英文单词：Ordered List。


例如：

   
        嘿哈
       哼哈
        呵呵



效果：


301cabb8f3b319e463e256f15be6d6.png" alt="" width="430" height="228">


属性：


    

  • 
type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始。
    • 



效果：




和无序列表一样，有序列表也是可以嵌套的哦，这里就不举类似的例子了。


ol和ul就是语义不一样，怎么使用都是一样的。ol里面只能有li，li必须被ol包裹。li是容器级。


ol这个东西用的不多，如果想表达顺序，大家一般也用ul。举例如下：


    1. 嘿哈
    2. 哼哈
    3. 呵呵









定义列表的作用非常大。




英文单词：deFinition list，没有属性。dl的子元素只能是dt和dd。


    

  • 

    ：deFinition title 列表的标题，这个标签是必须的
    • 

  • 

    ：deFinition description 列表的列表项，如果不需要它，可以不加
    • 



备注：dt、dd只能在dl里面；dl里面只能有dt、dd。


代码：


        第一条规则
        不准睡觉
        不准交头接耳
        不准下神

    <span&gt;<</span><span&gt;dt</span><span&gt;></span>第二条规则<span&gt;</</span><span&gt;dt</span><span&gt;></span>
    <span&gt;<</span><span&gt;dd</span><span&gt;></span>可以泡妞<span&gt;</</span><span&gt;dd</span><span&gt;></span>
    <span&gt;<</span><span&gt;dd</span><span&gt;></span>可以找妹子<span&gt;</</span><span&gt;dd</span><span&gt;></span>
    <span&gt;<</span><span&gt;dd</span><span&gt;></span>可以看mv<span&gt;</</span><span&gt;dd</span><span&gt;></span>


<span></<span>dl<span>>



效果：




上图可以看出，定义列表表达的语义是两层：


    

  • （1）是一个列表，列出了几个dd项目
    • 

  • （2）每一个词儿都有自己的描述项。
    • 



备注：dd是描述dt的。


定义列表用法非常灵活，可以一个dt配很多dd：

   
        北京
        国家首都，政治文化中心
        污染很严重，PM2.0天天报表
        上海
        魔都，有外滩、东方明珠塔、黄浦江
        广州
        中国南大门，有珠江、小蛮腰
    


还可以拆开，让每一个dl里面只有一个dt和dd，这样子感觉清晰一些：

    
        北京
        国家首都，政治文化中心
        污染很严重，PM2.0天天报表
    

<span&gt;<</span><span&gt;dl</span><span&gt;></span>
    <span&gt;<</span><span&gt;dt</span><span&gt;></span>上海<span&gt;</</span><span&gt;dt</span><span&gt;></span>
    <span&gt;<</span><span&gt;dd</span><span&gt;></span>魔都，有外滩、东方明珠塔、黄浦江<span&gt;</</span><span&gt;dd</span><span&gt;></span>
<span&gt;</</span><span&gt;dl</span><span&gt;></span>

<span&gt;<</span><span&gt;dl</span><span&gt;></span>
    <span&gt;<</span><span&gt;dt</span><span&gt;></span>广州<span&gt;</</span><span&gt;dt</span><span&gt;></span>
    <span&gt;<</span><span&gt;dd</span><span&gt;></span>中国南大门，有珠江、小蛮腰<span&gt;</</span><span&gt;dd</span><span&gt;></span>
<span&gt;</</span><span&gt;dl</span><span&gt;></span></pre>



京东案例（京东首页最下方）




dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）。


二、表格标签


表格标签用表示。一个表格是由每行组成的，每行是由组成的。所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。在以前，要想固定标签的位置，唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候，表格作用还是有一些的。


例如，一行的单元格：

    
        
            
            
            
            
        
    


上面的表格中没有加文字，所以在生成的网页中什么都看不到。


例如，3行4列的单元格：

  
        
            小马哥
            18
            男
            山东
        

    <span&gt;<</span><span&gt;tr</span><span&gt;></span>
        <span&gt;<</span><span&gt;td</span><span&gt;></span>小岳岳<span&gt;</</span><span&gt;td</span><span&gt;></span>
        <span&gt;<</span><span&gt;td</span><span&gt;></span>45<span&gt;</</span><span&gt;td</span><span&gt;></span>
        <span&gt;<</span><span&gt;td</span><span&gt;></span>男<span&gt;</</span><span&gt;td</span><span&gt;></span>
        <span&gt;<</span><span&gt;td</span><span&gt;></span>河南<span&gt;</</span><span&gt;td</span><span&gt;></span>
    <span&gt;</</span><span&gt;tr</span><span&gt;></span>

    <span&gt;<</span><span&gt;tr</span><span&gt;></span>
        <span&gt;<</span><span&gt;td</span><span&gt;></span>邓紫棋<span&gt;</</span><span&gt;td</span><span&gt;></span>
        <span&gt;<</span><span&gt;td</span><span&gt;></span>23<span&gt;</</span><span&gt;td</span><span&gt;></span>
        <span&gt;<</span><span&gt;td</span><span&gt;></span>女<span&gt;</</span><span&gt;td</span><span&gt;></span>
        <span&gt;<</span><span&gt;td</span><span&gt;></span>香港<span&gt;</</span><span&gt;td</span><span&gt;></span>
    <span&gt;</</span><span&gt;tr</span><span&gt;></span>

<span&gt;</</span><span&gt;table</span><span&gt;></span></pre>



效果：




上图中的表格好像没看到边框呀，不急，接下来看看标签的属性。


的属性：


      

    • 
border：边框。像素为单位。
      • 

    • 
：单元格的线和表格的边框线合并
      • 

    • 
width：宽度。像素为单位。
      • 

    • 
height：高度。像素为单位。
      • 

    • 
bordercolor：表格的边框颜色。
      • 

    • 
align：表格的水平对齐方式。属性值可以填：left right center。注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签进行设置）
      • 

    • 
cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。
      • 

    • 
cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
      • 

    • 
bgcolor="#99cc66"：表格的背景颜色。
      • 

    • 
background="路径src/..."：背景图片。背景图片的优先级大于背景颜色。
      • 



 单元格带边框的效果：




备注：表格中很细表格边线的制作：CSS的写法：




：行


一个表格就是一行一行组成的嘛。属性：


    

  • 
dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
    • 

  • 
bgcolor：设置这一行的单元格的背景色。注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
    • 

  • 
height：一行的高度
    • 

  • 
align="center"：一行的内容水平居中显示，取值：left、center、right
    • 

  • 
valign="center"：一行的内容垂直居中，取值：top、middle、bottom
    • 



<h3 id="td单元格">

<td>：单元格


属性：


    

  • 
align：内容的横向对齐方式。属性值可以填：left right center。如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
    • 

  • 
valign：内容的纵向对齐方式。属性值可以填：top middle bottom
    • 

  • 
width：绝对值或者相对值(%)
    • 

  • 
height：单元格的高度
    • 

  • 
bgcolor：设置这个单元格的背景色。
    • 

  • 
background：设置这个单元格的背景图片。
    • 



<h3 id="单元格的合并">单元格的合并


如果要将两个单元格合并，那肯定就要删掉一个单元格。单元格的属性：


      

    • 
colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
      • 

    • 
rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上
      • 



效果：（横向合并）




效果举例：（纵向合并）




：加粗的单元格。相当于 + 



    

  • 属性同标签
    • 



<h3 id="caption表格的标题使用时和tr标签并列">

：表格的标题。使用时和tr标签并列


效果：




 


标签tfoot标签">表格的标签、标签、标签


这三个标签有与没有的区别：


    

  • 1、如果写了，那么这三个部分的代码顺序可以任意，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。
    • 

  • 2、当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。
    • 



例子：


      人物介绍
      
            
                小马哥
                18
                男
                中国
            
        

<span&gt;<</span><span&gt;tfoot</span><span&gt;></span>
        <span&gt;<</span><span&gt;tr</span><span&gt;></span>
            <span&gt;<</span><span&gt;td</span><span&gt;></span>小岳岳<span&gt;</</span><span&gt;td</span><span&gt;></span>
            <span&gt;<</span><span&gt;td</span><span&gt;></span>45<span&gt;</</span><span&gt;td</span><span&gt;></span>
            <span&gt;<</span><span&gt;td</span><span&gt;></span>男<span&gt;</</span><span&gt;td</span><span&gt;></span>

        <span&gt;</</span><span&gt;tr</span><span&gt;></span>
    <span&gt;</</span><span&gt;tfoot</span><span&gt;></span>
<span&gt;<</span><span&gt;thead</span><span&gt;></span>
        <span&gt;<</span><span&gt;tr</span><span&gt;></span>
            <span&gt;<</span><span&gt;td</span><span&gt;></span>邓紫棋<span&gt;</</span><span&gt;td</span><span&gt;></span>
            <span&gt;<</span><span&gt;td</span><span&gt;></span>23<span&gt;</</span><span&gt;td</span><span&gt;></span>
            <span&gt;<</span><span&gt;td</span><span&gt;></span>女<span&gt;</</span><span&gt;td</span><span&gt;></span>           
        <span&gt;</</span><span&gt;tr</span><span&gt;></span>
    <span&gt;</</span><span&gt;thead</span><span&gt;></span>

<span&gt;</</span><span&gt;table</span><span&gt;></span></pre>



效果：




三、表单标签


表单标签用
表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。


属性：


    

  • 
name：表单的名称，用于JS来操作或控制表单时使用；
    • 

  • 
id：表单的名称，用于JS来操作或控制表单时使用；
    • 

  • 
action：指定表单数据的处理程序，一般是PHP，如：action=“login.PHP”
    • 

  • 
method：表单数据的提交方式，一般取值：get(默认)和post
    • 



form标签里面的action属性和method属性，在后面课程给大家讲解。稍微说一下：action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。 


get提交和post提交的区别：GET方式：将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开。特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。


POST方式：将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。


Enctype：表单数据的编码方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。


    

  • Application/x-www-form-urlencoded：默认加密方式，除了上传文件之外的数据都可以
    • 

  • Multipart/form-data：上传附件时，必须使用这种编码方式。
    • 



标签文本框">
：输入标签（文本框）


用于接收用户输入。

 


属性：


      

    • 
type="属性值"：文本类型。属性值可以是：

        

      • 
text（默认）
        • 

      • 
password：密码类型
        • 

      • 
radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
        • 

      • 
checkBox：多选按钮，名字相同的按钮作为一组进行选择。
        • 

      • 
checked：将单选按钮或多选按钮默认处于选中状态。当标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略。
        • 

      • 
hidden：隐藏框，在表单中包含不希望用户看见的信息
        • 

      • 
button：普通按钮，结合js代码进行使用。
        • 

      • 
submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
        • 

      • 
reset：重置按钮，清空当前表单的内容，并设置为最初的默认值
        • 

      • 
image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
        • 

      • 
file：文件选择框。提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。
        • 

      

      • 

    • 
value="内容"：文本框里的默认内容（已经被填好了的）
      • 

    • 
size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。注意size属性值的单位不是像素哦。
      • 

    • 
readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
      • 

    • 
disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。
      • 



例子：

   逗比<disabled<<dio"dio" 女Box"love"Box"love"Box"love"


效果：


fdb069259.png" alt="" width="456" height="271">


四种按钮的举例：


        <
        <
        <
        图片按钮2"<
        文件选择框"



效果：




标签">
标签里面的每一项用表示。select就是“选择”，option“选项”。


select标签和ul、ol、dl一样，都是组标签。


03-HTML的body标签（文本标签）学习
03-HTML的body标签（文本标签）学习
<html>
 <head>
  <title>HTML的body标签-文本标签学习</title>
  <meta charset="utf-8"/>
 </head> 
 <body>
  <!--标题标签-->
  <h1 align="center">今天天气真好，适合学习</h1>
  <h2>今天天气真好，适合学习</h2>
  <h3>今天天气真好，适合学习</h3>
  <h4>今天天气真好，适合学习</h4>
  <h5>今天天气真好，适合学习</h5>
  <h6>今天天气真好，适合学习</h6>
  <hr width="50%" size="20" color="red"/>
  <p>
    君不见，黄河之水天上来，奔流到海不复回。
    君不见，高堂明镜悲白发，朝如青丝暮成雪。
    人生得意须尽欢，莫使金樽空对月。
    天生我材必有用，千金散尽还复来。
    烹羊宰牛且为乐，会须一饮三百杯。
    岑夫子，丹丘生，将进酒，杯莫停。
    与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听)
    钟鼓馔玉不足贵，但愿长醉不复醒。(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒)
    古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯)
    陈王昔时宴平乐，斗酒十千恣欢谑。
    主人何为言少钱，径须沽取对君酌。
    五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。 
  </p>
  <p>
   <b>君不见，黄河之水天上来，奔流到海不复回。</b><br />
   <i>君不见，高堂明镜悲白发，朝如青丝暮成雪。</i><br />
   <u>人生得意须尽欢，莫使金樽空对月。</u><br />
   天生我材必有用，千金散尽还复来。<br />
   烹羊宰牛且为乐，会须一饮三百杯。<br />
   岑夫子，丹丘生，将进酒，杯莫停。<br />
   与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听)<br />
   钟鼓馔玉不足贵，但愿长醉不复醒。<del>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒)</del><br />
   古来圣贤皆寂寞，惟有饮者留其名。<del>(古来 一作：自古；惟 通：唯)</del><br />
   陈王昔时宴平乐，斗酒十千恣欢谑。<br />
   主人何为言少钱，径须沽取对君酌。<br />
   五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。 <br />
  </p>
  
   
 </body>
</html>
<!-- 
 标题标签：
  h1到h6：会将其中的数据加粗加黑显示，并且显示依次减弱，标题标签自带换行功能。（块级标签）
    属性：
     align：center left right
 水平线标签：
   hr：会在页面中显示一条水平线，默认居中显示
    属性：
     width="宽度" 设置水平线的宽度
     size="高度" 设置水平线的高度
     color="颜色" 设置水平线的颜色
 段落标签：
   p:会将一段数据作为整体进行显示，主要是进行CSS和js样式操作时比较方便。会自动换行（块级元素）\
   特点：
    段间距比较大
 换行符：
   br：告诉浏览器需要在此位置换行
 空格符：
   &nbsp：告诉浏览器在此位置增加空格
 权重标签：
   b：会将内容加黑显示
   i：会将内容斜体显示
   u：会将内容增加下划线
   del：增加中划线
   以上标签不会自动换行，并且可以嵌套使用。
     
 注意：
  1、标签的属性是对标签的功能进一步的补充，可以由开发人员自由指定标签的属性值，来达到想要的显示效果。
  2、像素是占据电脑屏幕 的大小，百分比占据的是浏览器窗口的大小。
-->
AngularJS-渲染字符串中包含的HTML标签
AngularJS-渲染字符串中包含的HTML标签

                    
我的数据库存储产品信息，其中许多信息被组织成列表。我将数据加载到Angular中$scope.post。


例如，


$scope.post.size_description = '<li> Fits true to size. Take your normal size\r</li>
   <li> Slim-cut,mid-rise style</li>
   <li> Long in length,alter to fit</li>
   <li> Model wears an IT 48\r</li>
   <li> Model measures: waist size 32,height 6\'1"/ 185cm\r</li>'.



当我尝试将此数据加载到我的Angular应用程序中时，它会以文本形式呈现（即<li>未解析）。我了解这可能是出于安全原因而发生的，但是有什么解决方法吗？

                
今天关于前端技术：HTML部分---Head标签中包含的头文件标签，body标签包含的内部标签的讲解已经结束，谢谢您的阅读，如果想了解更多关于02-body标签中相关标签、03-body标签中相关标签、03-HTML的body标签（文本标签）学习、AngularJS-渲染字符串中包含的HTML标签的相关知识，请在本站搜索。

		

	

本文标签：
 

		




      
    
    

      
 上一篇HTML连载20-并集选择器&兄弟选择器（html中兄弟选择器）   

      
 下一篇CCS背景设置与HTML外部连接（ccs6.0如何设置背景颜色）   

    


    

      
相关文章