一、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>

java 处理html文本 java怎么写html_java 处理html文本

3. HTML的语法特点

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

4. idea编写html

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

java 处理html文本 java怎么写html_java 处理html文本_02

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>

java 处理html文本 java怎么写html_图片显示_03

三、其它内容

  1. 颜色的写法
  • 颜色的名称，比如：red, blue, green, ...
  • 十六进制的色码，比如：#FF0000。如果六位数字一样，可以简写，比如：#666666简写成：#666
  1. 尺寸的写法
  • 固定像素，比如：500px
  • 百分比，比如：50%。 注意：根据父容器计算的百分比
  1. 路径的写法
  • 绝对路径：
  • 带盘符的路径，比如：C:\a.jpg不建议使用
  • url网址，比如：http://www.xxx.com/aa.jpg
  • 以/开头的路径（在web核心里有少量使用）
  • 相对路径：
  • 以./开头的，从当前文件夹里查找。./可以省略不写
  • 以../开头的，从上级文件夹里查找
  1. 特殊字符的写法
  • 有些字符是HTML 语法里需要使用的，比如：> <等等，这些字符就是特殊字符。
  • 要使用实体字符代替特殊字符
< & ">> © ♠ ♣ ♥ ♦
 <     &     >    ©       ♠        ♣        ♥        ♦