Linux——网络（6）

最新推荐文章于 2024-10-04 21:58:42 发布

SAGE辰兮

最新推荐文章于 2024-10-04 21:58:42 发布

阅读量1.1k

点赞数 18

文章标签： linux 网络运维

本文链接：https://blog.csdn.net/qq_63574400/article/details/141916074

版权

一、html（超文本标记语言）

HTML:超文本标记语言
HyperText Markup Language
一种用于创建网页的标准标记语言
HTML 运行在浏览器上，由浏览器来解析

1.格式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中文测试。。。。</title>
</head>
<body>
这里是测试body测试内容。。。
</body>
</html>

        <!DOCTYPE html> 声明为 HTML5（最新的HTML标准）文档告诉浏览器按照标准模式进行解析渲染页面，有助于浏览器中正确显示网页
        <html> </html>元素是 HTML 页面的根元素
        <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
        <title> 元素描述了文档的标题
        <body> 元素包含了可见的页面内容

2.标签在body内

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签大部分是成对出现的，比如 <b> 和 </b>，还有少部分为单标签，比如<hr>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<h1></h1>双标签标题，加粗，换行  1-6 ---》小
        <p></p> 双标签  段落，有换行功效
        <hr> 单标签  左到右分割符(横线)
        注释

3.元素的属性

给元素提供附件信息，大部分的元素属性
            属性一般描述于开始标签
            属性总是以"名称=值对"的形式出现，比如：name="value"。
语法：<标签属性名称=参数1>
        1) bgcolor ，body的属性设置网页的背景色
<body bgcolor="ff1234">
        2）background  body的属性设置网页的背景图片
        3）align属性值： left，right，center

4.文本元素属性

b 元素 <b>内容</b> 加粗
br 换行<br>
i元素，字体倾斜<i></i>
del元素删除文字<del></del>
strong 强调一段文字，效果类似 b标签
ins元素，插入文字（下划线<ins></ins>）
small元素，超小字体<small></small>
sub 下标<sub></sub>
sup 上标<sup></sup>
<br>h<sub>2</sub>0
<br>100m<sup>2</sup>

5、img 单标签

<img src="url" alt="some_text"> //src 图像来源
//alt 如果不能正确打开，显示的替换文字
width, height
<img src="abc.jpg" alt="美女" width="50" height="60">
<img src="abc.jpg" alt="美女" width="50%" height="200%">
//百分比是相对于网页而言的，高度百分比无效的
&nbsp 空格

6、超链接

5种形式
基本语法
<a href="url">链接文本</a>

1.链接外部网站
2.链接本地文件
3.图片链接
4.电子邮件链接打开电子邮件
5.下载文件链接

        <a href="http://www.baidu.com">baidu</a>
        <br><a href="1.html">链接文件</a>
        <br><a href="1.html"><img src="abc.jpg"></a>
        <br><a href="mailto:123@13.com">发送邮件</a>
        <br><a href="abc.jpg">下载</a>

     上面的方法在打开新网页时，老的网页会关闭
        target 属性
                _self :当前位置打开默认值
_blank 新窗口中打开
        <a href="http://www.baidu.com" target="_blank">baidu</a>

7、列表

1）有序列表
2）无需序列
3）自定义列表

1）无序列表前面无数字

<ul type=square>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>

        type属性文字最前面的符号
        disc 黑色实心圆
        circle 白色空心圆
        square 黑色方块

2）有序列表，前面有数字

<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>

        其中可以放文字，图片，或链接
        有type属性，设置排序使用什么数字
        a 表示小写英文字母编号
        A 表示大写英文字母编号
        i 表示小写罗马数字编号
        I 表示大写罗马数字编号
        1 表示数字编号（默认）

8、表格的构成

table，外框
tr 行
td 列

        <table border="1">
        <tr><td>1-1</td><td>1-2</td><td>1-3</td></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>
        3行 3列
表格的属性
         border 边框粗细
         th,是tr的属性，列标题，自动居中，加粗（和tr用法一样）
         colspan，横向合并单元格，需要整形参数
<tr><th colspan="3">name</th></tr>
表格的合并
        rowspan ,列项合并，整数参数

9、表单传递参数，数据

HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
        <form>
        </form>
属性 :        action，指定表单发送的地址（表单转向的网页等）
属性 :        method 发送的方式 get，p

        get方法数据会附加到url的后面传递给服务器默认
       post，将数据包大包发给服务器，等候服务器来读取表单中重要的字元素 input button
<form method="get" action="">
   username: <input type="text" name="用户名"><br>
   passward: <input type="text" name="密码">
   </form>

10、input元素

（输入框）他是表单的一个字属性
指定表单中的内容项，比如输入内容的文本框
可以指定表单属性，也可以放在表单的外面。

   input元素的属性：
                type，指定输入框的类型，
               text 单行文本，
               password 密码，
               submit 提交按钮，
               radio 单选按钮
               reset 重置按键，
               image 图片式按键
                   <input type="image" src="1.jpg" alt="图标" width="48" height="48"
                   点击图片会上交点击的坐标（get方式url中可以看到）
                 name：名称，输入内容识别名称，传递参数时候的参数名称
                 value：默认值，输入框默认填入的内容，
             maxlength，指定最大长度maxlength="3"
         placeholder,设置提示信息的。
                 required:表示内容必须填写，不然不能提交。
<form action="xxx.html" method="get" align="center">
username: <input type="text" name="用户名" required><br>
   passward: <input type="password" name="密码" maxlength="3" placeholder="你猜"><br>
   <input type="reset" value="重置">
   <input type="submit" value="提交">
   <input type="button" value="按键">
   <input type="image" src="img_submit.gif" alt="图标" width="48" height="48">
</form>