JavaWeb笔记---html/css基础学习3(常用的标签介绍1)

1.font字体
需要一:在网页上显示,我是字体标签, 并修改字体为宋体,颜色为红色

<font color="red" size="7" face="宋体">我是字体</font>

2.–特殊字符
需求:把<br>换行标签变成文本,转换成字符显示在页面上

<br/>
&lt; <号显示方法
&gt; >号显示方法
&nbsp  空格显示方法

3.标题标签
需求:标题1到标题6,h1-h6都是标题标签:h1最大,h6最小
align属性对齐属性:left:左对齐
right:右对齐
center:居中–>

<h1 align="left">标题一</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题一</h3>
<h4 align="left">标题一</h4>
<h5 align="left">标题一</h5>
<h6 align="left">标题一</h6>

4.超链接:
a 标签是超链接
href 属性设置连接的地址
target 属性设置哪个目标进行跳转
_self 表示当前页面 ( 默认值 )
_blank 表示打开新页面来进行跳转

 <a href="https://www.baidu.com/" target="_self">这是个百度链接</a>

5.列表标签
需求:使用无序列表方式,把湖人队首发展示出来(湖人总冠军!!!)

   <ul type="none">
        <!--ul是无序的意思;type属性修改列表前的符号-->
        <li>詹姆斯mvp</li>
        <li>戴维斯</li>
        <li>比克二代</li>
        <li>考德维尔波普</li>
        <li>庄神</li>
   </ul>

6.img标签
需求 1 ：使用 img 标签显示一张美女的照片。并修改宽高，和边框属性
img 标签是图片标签 , 用来显示图片
src 属性可以设置图片的路径
width 属性设置图片的宽度
height 属性设置图片的高度
border 属性设置图片边框大小
alt 属性设置当指定路径找不到图片时 , 用来代替显示的文本内容
在 JavaSE 中路径也分为相对路径和绝对路径 .
相对路径 : 从工程名开始算
绝对路径 : 盘符 😕 目录 / 文件名
在 web 中路径分为相对路径和绝对路径两种
相对路径 :
. 表示当前文件所在的目录
… 表示当前文件所在的上一级目录
文件名 表示当前文件所在目录的文件,相当于./文件名./可以省略
绝对路径:
正确格式是 : http://ip:port/工程名/资源路径
错误格式是 : 盘符 😕 目录 / 文件名

<img src="../../1.jpg" width="950" height="1425" border="10" alt="美女找不到"/>
<img src="../../imgs/12.jpg" width="950" height="1425" border="10" alt="美女找不到"/>
<img src="../../imgs/11.jpg" width="950" height="1425" border="10" alt="美女找不到"/>

7.表格标签
需求 1：做一个带表头的 ，三行，三列的表格，并显示边框
需求 2：修改表格的宽度，高度，表格的对齐方式，单元格间距。
table 标签是表格标签
border 设置表格标签
width 设置表格宽度
height 设置表格高度
align 设置表格相对于页面的对齐方式
cellspacing 设置单元格间距
tr 是行标签
th 是表头标签
td 是单元格标签
align 设置单元格文本对齐方式
b 是加粗标签

<table width="50" height="70" align="center" cellspacing="0" border="1">
    <tr>
        <th>1.1</th>
        <th>1.2</th>
        <th>1.3</th>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>

8.跨行跨列标签
需求 1：
新建一个五行，五列的表格，
第一行，第一列的单元格要跨两列，
第二行第一列的单元格跨两行，
第四行第四列的单元格跨两行两列。
colspan 属性设置跨列
rowspan 属性设置跨行

 <table border="1">
        <tr>
            <th colspan="2">1.1</th>
            <th>1.2</th>
            <th>1.3</th>
            <th>1.4</th>
        </tr>
        <tr>
            <th rowspan="2">2.1</th>
            <th>2.2</th>
            <th>2.3</th>
            <th>2.4</th>
            <th>2.5</th>
        </tr>
        <tr>
            <th>3.2</th>
            <th>3.3</th>
            <th>3.4</th>
            <th>3.5</th>
        </tr>
        <tr>
            <th>4.1</th>
            <th>4.2</th>
            <th>4.3</th>
            <th rowspan="2" colspan="2">4.4</th>
        </tr>
        <tr>
            <th>5.1</th>
            <th>5.2</th>
            <th>5.3</th>
        </tr>
    </table>

9.了解frame框架标签
ifarme标签它可以在一个html页面上,打开一个小窗口,去加载一个单独的页面
ifarme 标签可以在页面上开辟一个小区域显示一个单独的页面
ifarme 和 a 标签组合使用的步骤:
1 在 iframe 标签中使用 name 属性定义一个名称
2 在 a 标签的 target 属性上设置 iframe 的 name 的属性值

<iframe src="1-font标签.html" name = "target">这是一个内嵌窗口</iframe>
<a href="0-标签语法.html" target="target">点击</a>