整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html开发笔记06- 字体标签和文字标签

、字体标签:用于在页面中 加粗、倾斜、加下划线等操作(不推荐)。

字体标签分为:<b>加粗</b>,<i> 倾斜</i> ,<u> 下划线</u> 三个,都是成对使用。

2、文字标签:也是用于页面中 加粗、倾斜、加下划线等操作(推荐)。

文字标签分为:<strong> 加粗</strong> 、<em>倾斜</em> 、<ins>下划线</ins>

3、字体标签 和 文字标签的区别:

文字标签带有语义,更容易被搜索引擎识别;字体标签没有语义,就是单纯的增加字体效果。

4、代码演示效果:↓

下面演示的是文字标签,字体标签用法一样,只是拼写不一样而已,不做演示。

5、代码实例展示:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>这是测试网页</title>

</head>

<body>

<!--也可以分行写,分行标签要在文字标签外面-->

<strong>白日依山尽,</strong><em>黄河入海流。</em><ins>欲穷千里目,更上一层楼。</ins>

</body>

</html>

这里面接下来讲解css基础部分的简答题、填空题。

·列入当前的另一个标记就是css外列式,type里面写上当前的文本类型文本,c、c、s、s之后在iel里面写上当前对应的什么?层叠样式表。这个没什么好讲的,在cs类选择题里面点进行标识。

·cs具有继承性和层叠性,所谓的层叠性指的是多种属性叠加,这里面应该是指的是cs样式的叠加,表达不具体。

·未页面中的p标签当前对应的内容添加,内嵌式的cs可以使用,选择器有p选,是可以使用标签选择器,比如当地p标签或者id选择器井号当前的这个以及类名点上当前对应的这个,是这个意思。

·atm中通过什么?对于属性进行转换,对于属性元素的类型运转。

·display前面也强调过了常见的display no隐藏,display inline行内,display block会计,display none隐藏,display inline block行内块以及在当前初级部分不会考的display flag弹性布局。

·在cs中设置a标记,字体大小为二十四像素,防弹钢 size冒号二十四,封号这个东西一定要写清楚,记住a标签代码为什么要写清楚。

·在cs中设置英文单词之间的间距属性,这个应该是word space设置英文文,设置文字之间的later gun space,这边单词就是what,a later指的是,其实应该指的是信弦,就是文字的部分。

·行内饰也被称作为内线是通过标记,style的属性应该是style属性来设置样式,把前括号去掉。

·text the condecoration指的是文本修饰,在这里面可以做文本的线的清楚,text the condextration none和underline以及lands于我就是下滑线穿过去都可以。这个腰带是下滑线,单词不要拼错,千万不要拼错,这里明显少了一个字母l。

·列入式是将所有的样式放在一个或者多个的点cs文件的拓展名中,通过link表情将外部的样式链接到h t m当中,这个没有问题,但是在这个标记的时候要加,因为它是单标记,友情提示是比较特别。

·在cs中肯定指的是内编剧,没什么好讲的,内嵌式是可以将css代码集中写在html的资料标记里面,这里面有问题,那件事应该是写在黑的标题中,并且用什么?style,其实有的时候来做这个的时候会模拟两可,应该itt们什么标记要不要写成双标,但是在这里面建议各位要参考答案。

但是如果是个人改卷,可能说写单标或者双标都会给你,但是我会建议尽量给双标。想拉开盒子跟盒子间距合理的布局,使用外边距或者弦码紧也应该是可以的。但在这里面尽量按照它的答案来走,因为我自己是真的没参加过这个考试,讲真话。

那时候不需要考这个,在htm中请列举六个常用的会计元素,如果脸可以不要,能不能写成h1到h6,但是它是常见的,就写常见的知道的就好了。在cs中喷顶属性,就是设置那边去没什么好讲的。id首先用井号,ok,在cs中用于设置行间距。

蓝害的单词有拼错,这个基础真差。字体风格如字体倾斜,在cs里面,防得杠style,这个是属于hbml里面的一目标签跟i标签,可以做填写。在cs中a标签设置为a标签设置自己加速的代码应该写个a,防得杠weightbud,能不能写上七百?可以。

但我不知道计算机不知道自动答题的会不会给你检测对,但是就写一个稳重一点的css的定义,有三部分组成,分别是选择符属性跟值,这个是要去记得没办法。在这里面接下去往下看,这里应该算是简答了吗?一百八十次题算简答,选择题就不填空题就讲完了,希望对你有所帮助,谢谢。


ntroduction

HTML 是一种描述网页语言, 指的是超文本标记语言 (Hyper Text Markup Language)。其中,超文本指的是网页上可以包含图片,视频,连接信息。标记也叫做标签,所以标签书写的是<内容>。语言就是一种交流工具,HTML 是用户与浏览器之间交互工具。

简单说,HTML 是由浏览器解析执行的,它不会将 HTML 标签展示出来,而是会解析 HTML 标签,以特定效果展示出来。

Syntax

  1. HTML 可以直接使用文本编辑器来编写
  2. HTML 文件它的后缀名是 .htm 或 .html
  3. <html> 标签它代表当前页面是一个 HTML
  4. <head> 标签中可以声明 HTML 页面的相关信息
  5. <body> 标签中它主要是用于显示页面信息
  6. 标签要有开始,有结束。开始标签与结束标签中的内容是标签的内容,如果没有标签内容,可以让标签自关闭 <br/>。
  7. 大多数标签它具有属性,属性值要使用引号引起来。
  8. HTML 本身是不区分大小写的。
<html>
    <head>HEAD</head>
    <body>BODY</body>
</html>

Tools

可以使用 JetBrains WebStorm 或者 VS Code 进行开发。


HTML Tags

文件标签

<html> 代表当前书写的是一个 HTML 文档

<head> 存储的本页面的一些重要的信息,它不会显示

标签下有一个子标签 <title> 它是用于定义页面的标题的

<body> 书写的内容会显示出来,属性:1. text 用于设置文字颜色;2. bgcolor 用于设置页面的背景色;3. background 用于设置页面的背景图片

排版标签

HTML 注释

<!-- 注释不会在浏览器中显示 -->

<br/> 标签

br 标签就是一个换行功能标签

<p> 标签

在 p 标签中的内容会在开始与结束之间产生一个空白行并且它会自动换行

常用属性 align 的作用是设置段落中的内容对齐方式,可取值有 left right center

<hr> 标签

hr 标签会在页面上产生一个水平线

常用属性:

align:可取值有 left right center 代表水平线位置

size:代表水平线高度(厚度)

width:代表水平线宽度

color:水平线的颜色

关于 HTML 中标签属性

两种方式:

  1. 直接设置值,默认单位是 px (像素) <HR WIDTH="200">
  2. 可以设置百分比 <HR WIDTH="35%">

<div> 标签

Div 是一个块标签

Div 与 CSS 结合,会更好对页面进行排版

<span> 标签

Span 标签也是一个块标签Div 与 span 区别:Div 会自动换行,我们也叫这样的标签为行级元素Span 标签它不会自动换行,我们也叫它为行内元素

字体标签

<font> 标签

Font 标签可以设置字体,字的大小及颜色

常用属性:

Face:用于设置字体,例如 宋体 隶书 楷体

Size:用于设置字的大小

Color:用于设置字的颜色

我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的。每一种颜色的饱和度和透明度都是可以变化的,用 0~255 的数值来表示。如纯红色表示为 (255,0,0),十六进制表示为 #FF0000。按这种表达方式,理论上我们可以得到 256 * 256 *256=16777216 种颜色。

  1. 使用十六进制方式,取值范围 #000000 ~ #FFFFFF (黑色到白色)。当颜色值为 #cc3300 时,也可以使用 #c30 这种简化的方式来表示。
  2. RGB 颜色表示法:RGB(x,y,z),x、y、z 是 0 ~ 255 之间的整数。
  3. 在线颜色选择器:http://www.86y.org/code/colorpicker/color.html


标题标记

<h1> 最大 <h6> 最小,它们代表的是标题,可以使用 <b> <i> 对文字设置加粗或倾斜

注意:在 HTML 中允许标签进行嵌套的,但是一般都包裹嵌套,而不可以进行交叉嵌套

清单标记(列表标记)

有序清单:

<!-- 有序列表 I II III-->
<ol type="I" start="3">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ol>
<!-- 无序列表 -->
<ul type="square">
    <li>Java</li>
    <li>Python</li>
    <li>C#</li>
</ul>

图形标签

<img> 可以让我们在网页引入一张图片

常用属性

  1. src 代表的图片的路径
  2. width 图片的宽度
  3. height 图片的高度
  4. border 用于设置图片的边框
  5. alt 如果图片不可以显示时,默认显示的文本信息
  6. align 图片附件文字的对齐方式,取值有 :left right middle top bottom

超连接标签

<a> 标签可以实现跳转到其它页面操作。超链接内容不仅可以是文本,也可以是图片等信息

常用属性

  1. href 代表的要跳转的路径
  2. name 属性可以在本页面设置一个锚点
  3. target 这个属性规定在何处打开这个链接文档,可取值:_blank _self _parent _top framename

表格标签

<!-- 学习表格标签 -->
<table border="2" align="center" width="400px">
    <caption>学生成绩单</caption>
    <tr>
        <th>姓名</th>
        <th>语文成绩</th>
        <th>数学成绩</th>
        <td colspan="2" align="center"><b>操作</b></td>
    </tr>
    <tr align="center">
        <td>张三</td>
        <td>99</td>
        <td>100</td>
        <td>修改</td>
        <td>删除</td>
    </tr>
    <tr align="center">
        <td>李四</td>
        <td>90</td>
        <td>66</td>
        <td>修改</td>
        <td>删除</td>
    </tr>
</table>

表单标签

通过表单可以将要提交的数据提交到指定的位置

<!-- 表单:用户注册案例 -->
<form name="form1" action="user/login" method="POST">
    <table border="1" width="64%" align="center">
        <tr>
            <td>用户名:</td>
            <td>
                <input type="text" name="username">
            </td>
        </tr>
        <tr>
            <td>密码:</td>
            <td>
                <input type="password" name="password">
            </td>
        </tr>
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex" checked="checked">男
                <input type="radio" name="sex" >女
            </td>
        </tr>
        <tr>
            <td>地址:</td>
            <td>
                <select name="province">
                    <option value="0">--请选择省--</option>
                    <option value="10001">广东</option>
                    <option value="10002">上海</option>
                    <option value="10003">山东</option>
                </select> 省
                <select name="city">
                    <option>--请选择市--</option>
                    <option value="1000301">广州市</option>
                    <option>深圳市</option>
                    <option>东莞市</option>
                </select> 市
            </td>
        </tr>
        <tr>
            <td>编程语言:</td>
            <td>
                <input type="checkbox" name="language" checked="checked">Java
                <input type="checkbox" name="language">Python
                <input type="checkbox" name="language">Go
            </td>
        </tr>
        <tr>
            <td>照片:</td>
            <td>
                <input type="file" name="image">
            </td>
        </tr>
        <tr>
            <td>自我介绍:</td>
            <td>
                <textarea name="remark" rows="5" cols="100"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit" value="注册"> 
                <input type="reset" value="取消"> 
            </td>
        </tr>
    </table>
</form>

框架标签

通过框架标签可以定制 HTML 页面布局

在 HTML 页面上去描述框架信息时,不可以将 <frameset> 写在 <body> 标签中

framesetTest.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>HTML 框架标签</title>
    </head>
    <!-- rows 定义了三行:第一行 100 像素,第三行:100 像素;第二行:剩下的像素 -->
    <frameset rows="100, * , 100"> 
        <frame name="topModule" src="./top.html"></frame>
        <frameset cols="100, * ">
            <frame name="menuModule" src="./menu.html"></frame>
            <frame name="contentModule" src="./content.html"></frame>
        </frameset>
        <frame name="footModule" src="./foot.html"></frame>
    </frameset>
</html>

top.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>top</title>
    </head>
    <body>
        <div>头部信息</div>
    </body>
</html>

foot.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>footL</title>
    </head>
    <body>
        <div>底部信息</div>
    </body>
</html>

menu.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>menu</title>
    </head>
    <body>
        <div>菜单信息</div>
    </body>
</html>

content.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>content</title>
    </head>
    <body>
        <div>内容显示区</div>
    </body>
</html>

其它标签与特殊字符

<meta> 标签

<meta> 标签必须写在 <head> 标签之间

  1. 它可以对页面进行描述及热词设置,可以方便搜索引擎查找页面
  2. 通过 meta 标签设置 http 响应信息
  3. 通过 meta 标签可以设置页面的编码,<meta http-equiv="Content-Type" content="text/html; charset=gbk">
  4. 通过 meta 标签来设置页面加载后在指定的时间后跳转到指定的页面,<meta http-equiv="refresh" content="5; url=http://www.baidu.com">

<link>标签

使用 link 标签来导入 CSS

特殊字符

详情查看菜鸟教程:https://www.runoob.com/charsets/ref-html-ascii.html


​HTML DOM

Introduction

DOM, Document Object Model -- 文档对象模型,是 HTML 和 XML 文档的编程接口,以树结构表达 HTML 文档。

DOM 是 W3C(万维网联盟)的标准。

DOM 定义了访问 HTML 和 XML 文档的标准。

W3C DOM 标准被分为 3 个不同的部分:

  • 核心 DOM - 针对任何结构化文档的标准模型
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

DOM Node

DOM 是被视为节点树的 HTML。

根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

HTML DOM 将 HTML 文档视作树结构,这种结构被称为节点树。

节点树中的节点彼此拥有层级关系。常用父(parent)、子(child)和同胞(sibling)等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。

  • 在节点树中,顶端节点被称为根(root)。
  • 每个节点都有父节点、除了根(它没有父节点)。
  • 一个节点可拥有任意数量的子节点。
  • 同胞是拥有相同父节点的节点。

DOM 方法 & 属性

HTML DOM 方法是可以在节点(HTML 元素)上执行的动作。

HTML DOM 属性是可以在节点(HTML 元素)设置和修改的值。

可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。方法是能够执行的动作(比如添加或修改元素)。属性是能够获取或设置的值(比如节点的名称或内容)。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>DOM</title>
    </head>
    <body>
        <div id="div1">
            <p id="p1">Hello</p>
            <p id="p2">Hello</p>
        </div>
        <script>
            // 先获取 P 元素
            var element = document.getElementById("p1")
            // 直接修改 p 元素的内容
            element.innerHTML = "此时已是修改后的内容"

            // 修改 p2 标签的样式
            var ele = document.getElementById("p2")
            ele.style.color="blue"
            ele.style.fontFamily="宋体"
            ele.style.fontSize="larger"

            // 添加元素
            // 创建一个p元素
            var elementP = document.createElement("p")
            // 创建一个内容
            var nodeText = document.createTextNode("新加的 P 元素")
            // 把文字内容添加到p元素中
            elementP.appendChild(nodeText)
            // 把新创建的p元素添加div1元素中
            var div1 = document.getElementById("div1")
            div1.appendChild(elementP)

            // 插入添加新的元素
            // 创建一个新的元素
            var eleP = document.createElement("p")
            // 创建一个内容
            var noText = document.createTextNode("在 P1 元素前添加的新元素")
            // 把文字内容添加到 p 元素中
            eleP.appendChild(noText)
            // 把新创建的 p 元素添加 div 1 元素中
            var parentDiv1 = document.getElementById("div1")
            // 获取指定被添加的元素
            var p1 = document.getElementById("p1")
            // 在元素前添加;参数说明:1.要添加的元素;2.在那个元素之前添加(指定一个元素)
            parentDiv1.insertBefore(eleP, p1)

            // 删除元素
            // 获取父元素
            var pdiv1 = document.getElementById("div1")
            var removep1 = document.getElementById("p1")
            // 使用父元素删除该元素
            pdiv1.removeChild(removep1)
        </script>
    </body>
</html>

DOM 事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。当事件发生时,可以执行 JavaScript,比如发生用户点击一个 HTML 元素的事件。

如需在用户点击某个元素时执行代码,可以把 JavaScript 代码添加到 HTML 事件属性中:onclick=JavaScript

HTML 事件的例子:

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图片已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当 HTML 表单被提交时
  • 当用户触发按键时
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>DOM 事件</title>
        <!-- JavaScript 代码必须写在 script 中 -->
        <script>
            function onLoadFun(){
                alert("已载入...");
            }
            // 文本框失去焦点事件
            function onBlurFun(){
                alert("此方法是文本框失去焦点事件,用来校验此文本框输入数据的")
            }
            // 表单被提交时执行事件
            function onSubmitFun(){
                alert("此表单已提交,这个方法也可以来作为数据校验的");
            }
            // 元素被改变时触发事件
            function onChangeFun(){
                alert("文本框元素已输入新的数据")
            }
            // 当鼠标悬停在某一个元素上时执行的方法
            function onMouseOverFun(element){
                element.innerHTML = "鼠标已停在H1元素上了"
            }
            // 当鼠标离开某一个元素时执行事件
            function onMouseOutFun(element){
                element.innerHTML = "鼠标已离开H1元素上了..."
            }
        </script>
    </head>
    <!-- 需求:当页面被载入时,执行一个代码,弹框提示已载入 -->
    <body onload="onLoadFun()">
        <!-- 需求:在一个表单中有用户名录入的文本框,当输入完文本框的时候进行名称校验,提交的时候弹框显示 -->
        <form onsubmit="onSubmitFun()">
            用户名:<input id="username" name="username" onchange="onChangeFun()" >
            <br/>
            <button type="submit">提交</button>
        </form>
        <!-- 需求:有一个 H1 标签元素,当鼠标移动到 H1 元素上时,修改文字,当鼠标移出元素时执行事件 -->
        <h1 onmouseover="onMouseOverFun(this)" onmouseout="onMouseOutFun(this)">我是一个标题</h1>
    </body>
</html>


想了解更多,欢迎关注我的微信公众号:Renda_Zhang