java-HTML学习笔记

最新推荐文章于 2024-07-16 15:41:31 发布

历练。

最新推荐文章于 2024-07-16 15:41:31 发布

阅读量156

点赞数

分类专栏： javaweb 文章标签： html html5

本文链接：https://blog.csdn.net/weixin_44822338/article/details/105626766

版权

javaweb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、HTML简介

1. 什么是HTML

HTML：HyperText Markup Language，超文本标记语言。
作用：用来编写网页的。

2. 写一个简单的HTML

 <html>
    	<head>
    		<title>page title</title>
    	</head>
    	<body>
    		<font color="red">hello, kitty</font>
    	</body>
    </html>

在这里插入图片描述

3. HTML的语法特点

文件后缀名是：.html或者 .htm
由一堆标签组成的。
- 标签：<关键字>内容</关键字> 或者<关键字/>（自闭合标签）
- 标签可以嵌套(标签里面的标签)
开始标签上可以加属性
- 属性：对标签的进一步修饰
- <关键字属性名="值" 属性名="值">内容</关键字>
不区分大小写
不需要编译，可以使用浏览器直接打开

4. idea编写html

创建项目 static web，创建html file。项目的目录结构如下：

在这里插入图片描述

HTML中的注释<!-- Ctrl+shift + /  -->

二、HTML标签

1. 文字排版

1.1 标题标签h1~h6

   <h1>程序员1</h1>
    <h2>程序员2</h2>
    <h3>程序员3</h3>
    <h4>程序员4</h4>
    <h5>程序员5</h5>
    <h6>程序员6</h6>

特点：
- 默认加粗
- 内置字号：h1最大，h6最小
- 独占一行

1.2 横线标签hr

   <hr color="red" size="20px" width="500px" align="left"/>

属性：
- color：横线的颜色
- size：横线的粗细
- width：横线的长短
- algin：横线的水平位置。left / center（默认）/ right

1.3 段落标签p和换行标签br

 <p>
        一个p标签，是一个段落。段落之间有空白的间隔； 如果要换行，写<br/>后边内容会另起一行显示，行之间没有空白间隔
    </p>

1.4 文字标签font，粗体字标签b，斜体字标签i

<font color="red" size="7" face="华文彩云">黑马程序员7</font>
<i>这是斜体字</i> 
<b>这是粗体字</b>

<font color="red" size="7" face="华文行楷"><i><b>加粗又变斜，红色的，行楷</b></i></font>

font标签的属性
- color：文字的颜色
- size：文字的大小，最小1，最大7，默认3
- face：文字的字体

2. 图片显示

2.1 图片标签`img`

  <img src="../img/mm.jpg" height="500px" title="美女" alt="漂亮"/>

属性
- src：图片的路径，必须
- width：图片显示的宽度
- height：图片显示的高度。通常只加width或者只加height，图片会等比例缩放显示，而不会变形
- title：鼠标悬浮提示
- alt：图片加载不出来时，显示的文字描述

3. 清单标签和超链接标签

3.1 超链接标签a

   <a href="http://www.baidu.com">点我跳转到百度</a>
    <a href="../_02图片显示/_02练习-图片显示.html">点我跳转到图片显示页面</a>

属性：
- href：跳转的路径
- target：在哪显示新页面，常用值有：
  - _self：在当前窗口显示（原页面被覆盖掉）
  - _blank：在新窗口显示

3.2 清单标签

<!-- 无序清单：ul+li -->
<ul type="square">
    <li>Alibaba</li>
    <li>Tencent</li>
    <li>Amazon</li>
    <li>Netease</li>
</ul>

<!-- 有序清单：ol + li -->
<ol type="A">
    <li>烤鸭</li>
    <li>烧鸡</li>
    <li>乳鸽</li>
    <li>包子</li>
</ol>

ul标签的type属性：每个清单项前边的符号类型，常用值有：
- disc：小圆点，默认值
- circle：小圆圈
- square：小方块
ol标签的type属性：每个清单项前边的序号类型，常用值有：
- 1：阿拉伯数字序号
- a/A：英文字母序号
- i/I：罗马数字序号

4. 表格标签

4.1 基本表格

 <table border="1" width="500px" bgcolor="yellow" cellspacing="0" align="center">
        <tr align="center">
            <td align="right">1-1</td>
            <td>1-2</td>
            <td>1-3</td>
            <td>1-4</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
            <td>2-4</td>
        </tr>
        <tr>
            <td>3-1</td>
            <td>3-2</td>
            <td>3-3</td>
            <td>3-4</td>
        </tr>
        <tr>
            <td>4-1</td>
            <td>4-2</td>
            <td>4-3</td>
            <td>4-4</td>
        </tr>
    </table>

border 表格外边框粗细 cellspacing设置单元格之间的间隔

table标签：表格本身
- align：表格本身的水平位置
tr标签：表格里的行
- align：行里内容的水平位置
td标签：行里的单元格
- align：单元格里内容的水平位置
th标签：行里的表头单元格，是一种特殊的td，用法和td完全一样，自带样式：加粗并居中
caption标签：表格里的标题

4.2 单元格合并

用到的单元格（td、th）的属性有：colspan, rowspan
步骤：
1. 确定用哪个属性：跨行(上下)用rowspan，跨列用colspan
2. 确定属性值是几：要合并几个单元格，值就是几
3. 确定属性加在哪：加在要合并的单元格中，最前边的那个单元格上
4. 删除被合并掉的单元格

 <!--
    要求：创建一个4行4列的表格，其中：
        1-1 和 1-2 合并   colspan="2"
        2-4 和 3-4 合并
        3-2、3-3、4-2、4-3 合并
    -->
    <table border="1" width="500px" cellspacing="0" align="center">
        <tr>
            <td colspan="2">1-1</td>
            <td>1-3</td>
            <td>1-4</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
            <td rowspan="2">2-4</td>
        </tr>
        <tr>
            <td>3-1</td>
            <td colspan="2" rowspan="2">3-2</td>
        </tr>
        <tr>
            <td>4-1</td>
            <td>4-4</td>
        </tr>
    </table>

5. 文档声明和head标签

<!DOCTYPE html>
<!--文档声明：声明的是当前网页是使用哪个版本的HTML编写的，声明给浏览器使用的，要写到HTML的最前边-->
<html lang="zh-CN">
<head>
    <!--charset：当前网页的字符集-->
    <meta charset="UTF-8">
    <!--title：网页标题-->
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <!--Keywords：给搜索引擎使用的搜索关键字 百度搜索 --> 
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,
    居家,母婴,美妆,个护,食品,生鲜,京东" />
    <!--description：给搜索引擎使用的，在搜索结果上显示的网站描述-->
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城，
    为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，
    囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />
    <!--icon：网页标题前边的图标-->
    <link rel="icon" href="http://www.jd.com/favicon.ico" type="image/x-icon" />
</head>
<body>
    <h1>一级标题</h1>
</body>
</html>

在这里插入图片描述

三、其它内容

颜色的写法

颜色的名称，比如：red, blue, green, ...
十六进制的色码，比如：#FF0000。如果六位数字一样，可以简写，比如：#666666简写成：#666

尺寸的写法

固定像素，比如：500px
百分比，比如：50%。注意：根据父容器计算的百分比

路径的写法

绝对路径：
- 带盘符的路径，比如：C:\a.jpg不建议使用
- url网址，比如：http://www.xxx.com/aa.jpg
- 以/开头的路径（在web核心里有少量使用）
相对路径：
- 以./开头的，从当前文件夹里查找。./可以省略不写
- 以../开头的，从上级文件夹里查找

特殊字符的写法

有些字符是HTML 语法里需要使用的，比如：> <等等，这些字符就是特殊字符。
要使用实体字符代替特殊字符

 &lt; &amp; &gt; &copy; &spades; &clubs; &hearts; &diams;
 <     &     >    ©       ♠        ♣        ♥        ♦

历练。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java-HTML学习笔记

一、HTML简介1. 什么是HTMLHTML：HyperText Markup Language，超文本标记语言。作用：用来编写网页的。2. 写一个简单的HTML <html> <head> <title>page title</title> </head> <body>...
复制链接

扫一扫