初试前端html笔记二

文本

大家都知道一个静态页面(不包括后端的网页)由以下元素构成

 

  文字        图片       超链接          音频和视频

 

只是带有特效动图等不会被叫做动态界面

即使使用了JavaScript,除非使用了后端技术否则都不会被称作后端技术

首先介绍文本

标题标签

其中标题分为h1 h2 h3 h4 h5 h6 共六级

<h1>文本内容</h1>

段落标签

<p> 文本内容</p>

换行标签

<br/>

例如:<p>生活如此美好<br>换行了</p>

运行显示

文本标签

不过一般不常用,一般使用css进行修饰

粗体标签:strong b

斜体标签:I em cite

上标标签:sup

下表标签:sub

中划线标签:s

下划线标签:u

大字号标签:big

小子号标签:small

例如粗体标签<strong></strong>

 

水平线标签

<hr/>

<p>生活如此美好<br>换行了</p>

<hr />

<p>生活如此美好<br>换行了</p>

此效果会加一条水平线位于文本中间

 

运行显示:

 

div标签

在HTML之中我们使用div来划分区域,就像某个规划的小区,每一块楼都是一个div,在每个楼可以是各种样式,div内部可以放下文本标签水平线标签等等,划分区域可以使条理思路更加清晰。

<div>

         

      </div>

自闭合标签

此例标签不需要两个标签进行闭合

例如

定义网页标签<meta name="" content=""/>

引入外部的css<link rel="stylesheet" type="text/css" href=""/>

换行标签<br/>

水平线标签<hr/>

图片标签<img src=""/>

表单标签<input type="" name="" id="" value="" />

 

下面介绍块元素和行内元素

关于块元素与行内元素关系:一般块元素可以容纳行内元素与其他块元素

而行内元素只能容纳行内元素不能容纳块元素

Html常见块元素

标题元素h1-h6

段落元素p

Div div元素

水平线hr

有序列表ol

无序列表 ul

 

有些特殊符号键盘上难以输入的需要&代码 来输入

就不给一一介绍了,网上大部分都有

 

列表

有序列表

<ol type="属性值">

          <li>列表内容</li>

          <li>列表内容</li>

          <li>列表内容</li>

      </ol>

 

Type代表属性

列表属性取值

1:阿拉伯数字

a:小写英文字母

A:大写英文字母

i:小写罗马数字

I:大写罗马数字

无序列表

<ul type="">

          <li>文本内容</li>

          <li>文本内容</li>

          <li>文本内容</li>

      </ul>

 

 

属性值

disc实心圆

circle空心圆

square正方形

运行显示

注意ul元素的子元素只能是li,不能是其他元素

ul元素内部的文本,只能在li元素内部添加,不能再li元素外部添加

定义标签

由两部分组成:名词和描述

<dl>

          <dt>名词</dt>

          <dd>描述</dd>

      </dl>

 

运行显示

接下来介绍表格

由以下三个部分组成

表格:table

行:tr标签

单元格:td标签

<caption>单元格标题</caption>

<table border="" cellspacing="" cellpadding="">

      <tr><th>标头</th></tr>

      <tr>

          <td>Data1</td>

          <td>Data2</td>

      </tr>

      <tr>

          <td>Data3</td>

          <td>Data4</td>

      </tr>

   </table>

运行显示

至于单元格表格形式就要看css来修饰了

合并行 rowspan

<table border="" cellspacing="" cellpadding="">

      <tr><th>标头</th></tr>

      <tr>

          <td rowspan="2"></td>

          <td>Data1</td>

          <td>Data2</td>

      </tr>

      <tr>

          <td>Data3</td>

          <td>Data4</td>

      </tr>

 

合并列   colspan

<table border="" cellspacing="" cellpadding="">

      <tr><th>标头</th></tr>

      <tr><td colspan="2">合并列</td></tr>

      <tr>

         

          <td>Data1</td>

          <td>Data2</td>

      </tr>

      <tr>

          <td>Data3</td>

          <td>Data4</td>

      </tr>

   </table>

添加图片

<img src="图片路径" alt="描述图片" title="主题" />

 

Title属性是当鼠标移向图片时,

图片显示图片名字

 

Alt 属性 是用来给搜索引擎看的

 

图片格式

 

超链接

<a href="链接地址" target="属性">文本或者图片</a>

 

属性

默认值,在原来的窗口打开链接

_self

在新窗口打开链接

_blank

在父窗口打开链接

_parent

在顶层窗口打开链接

_top

 

 

内部链接

 

跳转到自身的网站

 

瞄点链接

 

直接跳转到文章或者图片的哪个位置

使其地址指向标签的id

猜你喜欢

转载自blog.csdn.net/qq_20017379/article/details/81204693
今日推荐