html基础用法(上) html基础语句

   2023-03-08 学习力0
核心提示:html的定义:html超文本标记语言,标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片,链接,甚至音乐,程序等非文字语言。超文本标记语言的结构包括“头”部分(head),和“主体”部分(body),期中“头”部提供关于网页的信息,“主体”

html的定义:

html超文本标记语言,标准通用标记语言下的一个应用。

“超文本”就是指页面内可以包含图片,链接,甚至音乐,程序等非文字语言。

超文本标记语言的结构包括“头”部分(head),和“主体”部分(body),期中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。

超文本标记语言是标准通用语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。

html的基本结构:

1 <html>
2          <head>
3                   <meta charset="utf-8">
4                   <title></title>
5          </head>
6          <body>
7          </body>
8 </html>

从上面可以看的,第一个<html>是告诉浏览器这是html文档的开始,然后最后一个</html>是告诉浏览器这是html的终止。标签<head>  之间的文本是头部信息,<title>

之间的文本是文档标题,会显示在浏览器窗口的标题栏。<meta charset="utf-8">是设置网页编码的语句,让浏览器读取到本编码属于utf-8。<body>之间的是文本的正文。

html的标签元素:

 1 <html>
 2          <head>
 3                   <meta charset="utf-8">
 4                   <title></title>
 5          </head>
 6          <body>
 7                    <ul type="disc">
 8                         <li>这是无需列表</li>
 9                         <li>这是无序列表</li>
10                         <li>这是无序列表</li>
11                    </ul>
12                    <ol type="a" start="1">
13                         <li>这是有序列表</li>
14                         <li>这是有序列表</li>
15                         <li>这是有序列表</li>
16                    </ol>
17                    <dl>
18                         <dt>标题一</dt>
19                              <dd>123</dd>
20                              <dd>321</dd>
21                         <dt>标题二</dt>
22                               <dd>344</dd>
23                               <dd>455</dd>
24                         <dt>标题三</dt>
25                               <dd>676</dd>
26                               <dd>665</dd>
27                    </dl>
28                    <p>好好学习天天向上!</p><p>好好学习天天向上!</p><p>好好学习天天向上</p>
29                    好好学习天天向上!<br />好好学习天天向上!<br />好好学习天天向上!<br/>
30           
31          </body>
32 
33 </html>

 <ul>在html中表示的是无序列表,其中属性type有属性值:disc(列表前的符号:实心圆点)circle(列表前的符号:符号为空心圆)square(列表前的符号:符号为方形)。

<ol>在html中表示的是有序列表,其中属性type有属性值:1,a,A,i,l(用来设置项目前面的标记),属性start属性值是:数值(排序的起点数值)。

<dl>在html中表示的是定义列表。

<br />是换行符。

<p>标签是用来定义一个段落,也可以用来换行。

超链接 :

/>
 4                  <title>超链接</title>
 5         </head>
 6         <body>
 7                  <a href="http://www.baidu,com" target="_blank">百度一下</a>
 8                  <a href="http://www.jd.com" target="_self">到京东</a>
 9                  <a href="#target">点我跳到指定的位置</a>
10                  <p>学习编程没有捷径</p>
11                  <p>学习编程没有捷径</p>
12                  <p>学习编程没有捷径</p>
13                  <p>学习编程没有捷径</p>
14                  <hr width="500" color="red" size="5" align="center">
<a name="target">跳到这里来!</a>
15 <p>学习编程没有捷径</p> 16 <p>学习编程没有捷径</p> 17 <p>学习编程没有捷径</p> 18 </body> 19 </html>

定义超链接<a href="URL"></a>

a标签用来定义一条超链接,其中要有的是href属性,href的作用是指明超链接要链接到的网址。除了href属性,还有title属性表示连接的提示信息。target属性表示链接的打开方式,即当点击了链接,选择是在另一个页面打开还是在本页面打开。其属性值包括_blank(新的空白页),_self(当前页),_top(当前页)

<a href="#target" _blank>百度一下</a> href 的值可以是外部链接,也可以是内部文件,如***.html

锚点:有时候我们在浏览网页会发现,有些网页比较人性化,会有点击返回的按钮。这样的效果其实用锚点标签就能做到。锚点就是点击使用户跳到文档的某个部分。上面的:

<a href="#target">带你我跳到指定位置</a>

<a name="target" >调到这</a>

align.可以对段落进行设置。属性align的值包括left(左对齐),center(居中),right(右对齐)。

img标签:

 

1 1 <html> 
2 2          <head>
3 3                   <meta charset="utf-8" />
4 4                   <title>坂井泉水真美!</title>
5 5          </head>
6 6          <body>
7 7                    <img src="bjqs.jpg" width="500" height="500" title="女神啊!" alt="图片损坏" />
8 8          </body>
9 9 </html>

 

属性:src,属性值:url,说明:图像资源的地址

属性:width,属性值:像素(px),说明:图像宽度

属性:height,属性值:像素(px),说明:图像高度

属性:alt,属性值:替代文字,说明:图像的替代文字

html基础用法(上)

标题:

 1 <html>
 2          <head>
 3                    <meta charset="utf-8" />
 4                    <title>标题</title>
 5          </head>
 6          <body>
 7                    <h1>标题一</h1>
 8                    <h2>标题二</h2>
 9                    <h3>标题三</h3>
10                    <h4>标题四</h4>
11                    <h5>标题五</h5>
12                    <h6>标题六</h6>
13          </body>
14 </html>

html基础用法(上)

文本格式化,一些常用于设置文本字体的元素:

<b>定义粗文本</b><br />

<i>定义斜文本</i><br />

<del>定义删除文本</del><br />

<sup>定义上标字</sup><br />

<sub>定义下标字</sub><br />

实体字符:

&gt;    大于号(>)

&lt;     小于号(<)

&quot;   引号(")

&reg;      注册商标

&copy;    版权

&amp;     &copy;

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • HTML中将背景颜色渐变 html设置背景颜色渐变
    通过使用 css3 渐变可以让背景两个或多个指定的颜色之间显示平稳的过渡,由于用到css3所以需要考虑下浏览器兼容问题,例如:从左到右的线性渐变,且带有透明度的样式:#grad {background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*
    03-08
  • html5 Canvas 如何自适应屏幕大小
    但是这样创建出的画布不能随着浏览器窗口大小的改变而动态的改变画布的大小。而这一点往往又非常重要, 因为我们会经常改变浏览器窗口大小,不会一直保持某个固定的大小。 html代码 canvas width="300" height="300" id="myCanvas"/canvas设置样式 * {
    03-08
  • Vue中出现Do not use built-in or reserved HTML elements as component id:footer等等vue warn问题
    Vue中出现Do not use built-in or reserved HTM
    错误示图:原因:是因为在本地项目对应文件的script中,属性name出现了错误的命名方式,导致浏览器控制台报错!  诸如: name: header 、  、 name: menu , 等等都属于错误的命名方式等 错误代码命名如下:解决办法:办法1: 如果我们采用正确命名
    03-08
  • HTML在网页中插入音频视频简单的滚动效果
    HTML在网页中插入音频视频简单的滚动效果
    每次上网,打开网页后大家都会看到在网页的标签栏会有个属于他们官网的logo,现在学了HTML了,怎么不会制作这个小logo呢,其实很简单,也不需要死记硬背,每当这行代码出现的时候能知道这是什么意思就ok1 link rel="shortcuticon" type="image/x-icon" href="
    03-08
  • HTML的video标签,不能下载视频代码
    !-- 在线视频不能下载代码 --!DOCTYPE html html headscript src="../Demo/demo/book/JQuery/jQuery v2.2.0.js"/script/headbody div style="text-align:center;"video src="../images/PreviewVideo.mp4" width="820"controls="controls&
    03-08
  • ThinkPHP报错 The requested URL /admin/index/login.html was not found on this server.
    ThinkPHP报错 The requested URL /admin/index/
           解决方案在入口文件夹public下查看.htaccess是否存在。不存在则新建,存在的话,那内容替换为下面这串代码 就可以解决Not Fund#IfModule mod_rewrite.c#Options +FollowSymlinks -Multiviews#RewriteEngine On##RewriteCond %{REQUEST_FILENAME
    03-08
  • HTML特殊字符、列表、表格总结 html特殊符号对
            HTML实体字符  在HTML中一些特殊的字符需要用特殊的方式才能显示出来,比如小于号、版权等,  在课堂上老师教了我们一个有点意思的:空格,在教材上字符实体是“nbsp”通过老师  的演示我们发现不同的浏览器他所显示的效果不同,有的比
    03-08
  • 【JavaScript】使用document.write输出覆盖HTML
    您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。分析HTML输出流是指当前数据形式是HTML格式的数据,这部分数据正在被导出、传输或显示,所以称为“流”。通俗的来说就是HTML文档的加载过程,如果遇到document.writ
    03-08
  • ASP.Net MVC 控制@Html.DisplayFor日期显示格式
    在做一個舊表的查詢頁時,遇到一個問題:字段在db里存儲的是DATETIME,但保存的值只有日期,沒有時間數據,比如2018/2/26 0:00:00,顯示出來比較難看,當然也可以做一個ViewModel,在字段上添加Attribute定義來更改名稱和顯示名稱,如下:[Display(Name = "建
    03-08
  • html 基础代码
    title淄博汉企/title/headbody bgcolor="#00CC66" topmargin="200" leftmargin="200" bottommargin="200"a name="top"/a今天br /天气nbsp;nbsp;nbsp;nbsp;nbsp;不错br /font color="#CC0000"格式控制标签br /b 文字加粗方式1\bbr /str
    03-08
点击排行