Web-HTML基础

最新推荐文章于 2023-03-06 17:15:50 发布

Jagger_Lin

最新推荐文章于 2023-03-06 17:15:50 发布

阅读量307

点赞数

分类专栏： Java学习

本文链接：https://blog.csdn.net/Jagger_Lin/article/details/86007895

版权

Java学习专栏收录该内容

29 篇文章 0 订阅

订阅专栏

一、概述
1.概念：HTML:（HyperText Markup Language）超级文本标记语言

超文本：指页面内容可以包含图片、链接等非文字内容；
标记：指使用标签的方法将需要的内容包起来；

2.作用：HTML用于编写网页，显示数据；一般网页内容包括HTML、CSS、JavaScript等语言代码；

HTML：显示；
CSS：美化；
JavaScript：交互；

3.特点：

HTML文件不需要编译，直接使用浏览器阅读即可；
HTML文件的扩展名是*.html (推荐)或 *.htm；
HTML的标签：
1）标签是预定义好的,我们只要了解其功能，直接拿过来使用即可
2）标签的名字是不区分大小写的
3）通常情况下标签由开始标签< a >、结束标签< /a >组成，< a > Hello World < /a > 标签之间的文本叫做内容
4）如果没有内容，以/结尾，写成 < a/ > 自闭合标签
HTML的元素：
元素指的是从开始标签到结束标签之间所有的代码
HTML的属性：
属性用来修饰标签的
HTML的注释：
html使用< !-- 内容-- > 进行注释
HTML的语言设置：
< meta charset=“UTF-8” >

4.示例：

<html>  // 只要是HTML网页,要求 必须有一个根标签HTML

	<head>	//head标签,叫头标签，保存网页中的最重要的信息，而且这些信息打开网页是开不见
			<meta> //meta标签保存页面重要信息,编码,关键字等
			<title> //title标签保存网页的标题
	</head>
	
	<body>  //body标签保存网页主体内容
	//...
	</body>

</html>

二、基本元素
示例：

<html>
    <head>
        <meta charset = UTF-8>
    </head>

    <body>
        <h2>AMD</h2>
        <img src="file://C:/Users/Administrator/Pictures/temp/amd1.png"/>
        <img src="http://how2j.cn/example.gif" title="猪猪" alt="显示的是一张图片"/>
        <img src="./amd1.PNG"/>
        <hr size = "1px">
        <b><i> 加粗斜体 </i></b>
        <ol type="1">
            <li><a href="https://www.amd.com/zh-hans" target="_blank">介绍</a></li>
            <li>代码</li>
        </ol>
        <ul type="circle">
            <li>介绍</li>
            <li>代码</li>
        </ul>
        <p>AMD表示，这款处理器是世界上第一款7nm主流CPU，也将成为世界上第一款支持PCI-E 4.0 X16的主流CPU。</p>
        新处理器由两块芯片封装而成:<br>
        <p>一块为台积电制造的7nm 8核心芯片，另一块为前女友GlobalFoundries制造的14nm I/O芯片，集成了双通道内存控制器和PCI-E通道等外围电路。</p>
        <del>过期内容已删除</del>
        <pre>
            public class HelloWorld {
            ...
             }
        </pre>
        <table border="2px" align="center" bgcolor="#7fffd4" width="1280" >
            <tr align="center">
                <td>RX Vega 系列</td>
                <td>RX 500 系列</td>
                <td>RX 400 系列</td>
            </tr>
            <tr align="center">
                <td>RX VEGA 64</td>
                <td>RX 580</td>
                <td>RX 480</td>
            </tr>
          	<tr align="center">
                <td rowspan="2">RX VEGA 56</td>
                <td>RX 570</td>
                <td>RX 470</td>
            </tr>
            <tr align="center">
                <td>RX 560</td>
                <td>RX 460</td>
            </tr>
        </table>
    </body>
</html>

在这里插入图片描述
1.标题标签< h1 >-< h6 >
标题为粗体并且自动换行，使用< h1 > 到 < h6 > 表示由大到小的标题；

2. 水平线标签 < hr >
属性 size:水平线的高度
属性 noshade:设置纯色效果
属性 width:设置宽度

3. 字体标签< font >
属性size：字体大小有值1-7, 其中7最大
属性color：字体颜色,颜色有两种表示 a.英文单词 b.#RGB #ff0000
属性face：设置字体,比如微软雅黑,宋体

4. 换行标签< br >
换行：< br >

5. 段落标签< p >
段落：< p >，特点：自动换行，上下留白

6.粗体标签< b > / < strong >
第一种方式< b > ：b是bold的缩写，仅仅表示该文本是粗体的，并不暗示这段文字的重要性；
第二种方式< strong > ：strong虽然也是粗体，但是更多的是强调语义上的加重，提醒用户该文本的重要性，推荐使用strong；

7.斜体标签< i > / < em >
第一种方式< i > ：i是italic的缩写，仅仅表示该文本是斜体的，并不暗示这段文字的重要性；
第二种方式< em > ：em 是 Emphasized的缩写，虽然也是斜体，但是更多的是强调语义上的加重，提醒用户该文本的重要性；

8.删除效果标签< del >
< del >即删除标签：delete的缩写；

9.预格式标签< PRE >
需要在网页上显示代码的时候使用< PRE >；

10.图像标签< img >
10.1 路径格式：< img src=“路径”/ >
10.2 绝对路径:

引用网站地址： < img src=“http://how2j.cn/example.gif”/ >
引用本地地址： < img src=“file://C:/Users/Administrator/Pictures/temp/amd1.png”/ >
10.3 相对路径:
两种路径格式：
./表示本文件夹 < img src="./amd1.PNG"/ >
…/上一层文件夹

10.4 属性：

属性width：图片宽度,可以使用像素,也可以百分比
属性height：图片高度,可以使用像素,也可以百分比
不要同时设置宽度和高度都使用百分比，图片会等比例放大或者缩小，否则会失真
属性atl：图片显示有问题时的代替文本
属性title：鼠标移动到图片上面时显示的文字

11.列表标签 < ul > < ol >
< ul >：无序列表（unordered）
< ol >：有序列表（ordered）
列表标签想要显示必须有列表项标签< li >
属性type：
ol中type的取值: 1(默认的) a A i I
ul中type的取值: circle(空心圆点) disc(小黑点,默认的) square(小方点)

12.超链接标签< a >

属性href: 表示点击后跳转的页面
属性target:表示点击后网页的打开位置
值:_self 在本页面直接打开
_blank 在新页面打开
framename 指定的框架打开

13. 表格标签< table >
子标签：< tr > 表示行标签
子标签：< td >表示行中的单元格

table标签的属性:
border：边框的粗细，像素单位 px
align：水平对齐方式,有左对齐left 、右对齐right 、中间对齐center
width：宽度，像素单位px
bgcolor：设置整个表格的背景色，tr和td也有bgcolor
align属性
用在table上表示整个表格的对齐方式
用在tr上表示行中所有单元格内容的对齐方式
用在td上表示某一个单元格内容的对齐方式
< td >:合并单元格的属性
rowspan: 跨行合并,属性具体的值表示跨几行
colspan:跨列合并,属性具体的值表示跨几列

14. < div > 和< span >
这两种标签都是布局用的，这种标签本身没有任何显示效果，通常是用来结合css进行页面布局；

二、表单元素
1.表单标签< FORM >
< form >用于向服务器提交数据；

属性：method
值：get或post

get和post的区别：
get是form默认的提交方式，如果通过一个超链访问某个地址（get方式），如果在地址栏直接输入某个地址（get方式），提交数据会在浏览器显示出来，不可以用于提交二进制数据，比如上传文件；
post 必须在form上通过 method="post"显示，指定提交数据不会在浏览器显示出来，可以用于提交二进制数据，比如上传文件；

属性action：定义一个 URL，当点击提交按钮时，向这个 URL 发送数据。

2.输入域标签< input >

type属性：
1）text（默认）：文本输入域，显示的文本内容(20个字符)
2）password：密码输入框,显示的是*号代替文本
3）radio：单选框
4）checkbox：复选框
5）button：普通按钮，不具备提交form的效果
6）reset：重置按钮，可以把输入框的改动复原
7）submit：提交按钮，用于提交form，把数据提交到服务端
8）image：图片按钮，使用图像作为按钮进行form的提交
9）hidden：隐藏域，数据会提交,但是页面上看不见
10）file：文件上传组件
name属性：
1）命名标签；
2）分组就是设置name属性相同：多个单选框，都在一个分组里，同一时间，只能选中一个单选框；
3）标签的name属性进行赋值的才能提交数据；
value属性：
1）给按钮上的文字赋值；
2）当标签是单选框或者复选框,那么每一个选项必须有value值,否则提交时的值都是on；
注意：
< input > 标签很特别，一般是不需要写成< input / >或者< input >< /input > 这样，并且这样的写法也是满足标准的；

3.文本域标签< textarea >
文本域可以有多行，并且可以有滚动条

属性cols：设置高度
属性rows：设置宽度

4.下拉列表标签< SELECT >
需要配合< option >使用

5.按钮标签 < BUTTON >
< button >< /button >即按钮标签与< input type=“button” >不同的是，< button >标签功能更为丰富，按钮标签里的内容可以是文字也可以是图像，如果button的type=“submit” ，那么它就具备提交form的功能；

6.标签的显示默认值设置
type=text：标签的默认值通过value属性设置
type=passowrd：标签的默认值通过value属性设置
type=radio：标签的默认值通过checked属性设置 checked=checked"" 或者 checked=“true” 或者 checked
type=checkbox：标签的默认值通过checked属性设置 checked=checked"" 或者 checked=“true” 或者 checked
< textarea >：标签的默认值就是写在开始和结束标签之间的内容
< select >：标签的默认值在子标签option中加上selected=“selected” 或者 selected

7. 注册界面的简单设计（HTML）：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <form method="post">
            账号：<input type="text" name="user" placeholder="请输入用户名"><br>
            密码：<input type="password" name="password" placeholder="请输入密码"><br>
            确认密码：<input type="password" name="confirm" placeholder="请再次输入密码"><br>
            Email：   <input type="text" name="email" placeholder="请输入邮箱"><br>
            真实姓名：<input type="text" name="realname"><br>
            男：<input type="radio" name="sex" value="boy" checked="checked">
            女：<input type="radio" name="sex" value="girl"><br>
            生日：
            <select name="birth">
                <option>2000</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option>
            </select> 年
            <select name="year">
                <option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option>
            </select>月
            <select>
                <option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option>
                <option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option>
                <option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option>
            </select>日<br>
            手机：<input type="text" name="phone"><br>
            个人签名：<textarea rows="2" cols="50"></textarea><br>
            <input type="reset" value="重置信息">
            <input type="submit" value="提交"><br>

        </form>
    </body>
</html>

Jagger_Lin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web-HTML基础

一、概述1.概念：HTML:（HyperText Markup Language）超级文本标记语言超文本：指页面内容可以包含图片、链接等非文字内容；标记：指使用标签的方法将需要的内容包起来；2.作用：HTML用于编写网页，一般网页内容包括HTML、CSS、JavaScript等语言代码；HTML：显示；CSS：美化；JavaScript：动态；...
复制链接

扫一扫