【Html】基础

一米阳光_Angel

已于 2023-01-29 13:57:39 修改

阅读量500

点赞数 1

分类专栏： ② b/s 文章标签： html 前端 java

于 2018-12-25 11:40:28 首次发布

本文链接：https://blog.csdn.net/zhaofen_7/article/details/85245495

版权

② b/s 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

前言：

在专业课上学过一点Dreamweaver和JSP的东西，平时也总是用网页，前段时间刚敲完牛腩里面也有一些关于html的东西,总是感觉对这个东西很模糊，所以总结一下！

Html基础：

HTML 是用来描述网页的一种语言。全称超文本标记语言 (Hyper Text Markup Language)
它不是一种编程语言，而是一种标记语言 (markup language)，具有一套标记标签 (markup tag)，html语言通过使用标记标签来描述网页！

html文本之所以称为超文本是因为它具有普通文本不具有的超链接功能，在浏览html文档时，可通过关键字来跳转界面

要让超链接可以正常工作，需要通过URL统一资源定位符来定位internet上的资源
URL由三部分组成：协议，主机名称，文件目录或文件名

例如：http://www.sunxin.org/vidio/vidio.asp
1. http：表示超文本传输协议
2. 访问主机名或域名www.sunxin.org
3. 文件位置：video目录下的video的asp文件

建立超链接 href=“URL” href用于指定链接的目标，目标的地址由URL定位

<a href="form.html">表单的例子</a>  当前目录下
<a href="../form.html">表单的例子</a>  上一级目录下
<a href="E:/JSPLesson/form.html">表单的例子</a>  本地的绝对路径
<a href="http://www.sunxin.org">孙鑫的个人网站</a>

html中嵌入图形：
GIF：不需要大量颜色的图片
JPEG：图片质量较高
<img src="URL" width=n height=n> 不指定高度会使用加载时的宽高

html中基本元素

HTML元素的四种形式（属性+内容+起止标记的组合）

1.空元素                <br>
2.带有属性的元素         <hr color="blur">
3.带有内容的元素        <tittle>http://www.sunxin.org</title>
4.带有内容和属性的元素    <font color="red">http://www.sunxin.org</font>

<html>                  //开始html文档
    <head>              //开始文档头部
        <title>         //开始文档标题
            this is first page.  //标题内容
        </title>        //结束文档标题
    </head>             //结束文档头部
    <body>              //开始文档体
        hello world!    //文档体内容
    </body>             //结束文档体
</html>                 //结束html文档

其他元素

<p> paragrahp段      align:段落的对齐方式 left center right justify
<br>                 link bread 换行
<hr>                 horizontal rule水平线 color属性：预定义颜色；16进制颜色值，颜色加#00（Red)00(Green)00(Blue)(十进制0~255)
<center></center>    文本居中显示
<hn align="#">       <hn>文档标题1~6依次减小
<font size=n color="clr">  </font>  size字体大小 n(1~7)
<b></b>                             文本加粗
<i></i>                             文本斜体

特殊字符

特殊字符的引用方式有两种：字符引用和实体引用（&开始，;结束)
字符引用：&#十进制/十六进制;
实体引用：&助记符;(区分大小写)
在这里插入图片描述

列表 —建立数字编号的列表

<ol> start属性设置起始的序号
<li> value属性改变列表内编号顺序
type:编号系统的类型

在这里插入图片描述

表单

网页中重要的一个东西是表单，用来向服务提交请求，服务器将处理后的数据返回，通过浏览器将内容转为html文档来查看
表单元素+嵌入其中的控件

发送表单是所使用的http方法

<input type="type" name="name" size="size" value="value">

type:创建控件的类型
name:控件名称
size:表单中控件的初始宽度
value:指定控件的初始值


单行文本输入控件	<type=“text”>
提交按钮	<type=“submit”>
重置按钮	<type=“reset”>
口令输入控件	<type=“password”>
单选按钮	<type=“radio”>
复选框	<type=“checkbox”>
隐藏控件	<type=“hidden”>
列表框`<select>元素`创建，列表框中的各个元素用`<option>`提供
多行文本输入控件	`<textarea name="name" rows="number of rows" cols="number of columns"></textarea>`

表单的例子

<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
  <form method="get" action="reg.jsp">
    <table>
      <tr>
        <td>用户名：</td>
        <td><input type="text" name="user" value="游客" size="30"></td>
      </tr>
      <tr>
        <td>密码：</td>
        <td><input type="password" name="pwd"></td>
      </tr>
      <tr>
        <td>性别：</td>
        <td>
          <input type="radio" name="sex" value="1" checked>男
          <input type="radio" name="sex" value="0" checked>女
        </td>
      </tr>
      <tr>
        <td>兴趣爱好：</td>
        <td>
          <input type="checkbox" name="interest" value="football">足球
          <input type="checkbox" name="interest" value="basketball">篮球
          <input type="checkbox" name="interest" value="volleyball">排球
          <input type="checkbox" name="interest" value="swim">游泳<br>
        </td>
      </tr>
      <tr>
        <td>最高学历：</td>
        <td>
          <select size="1" name="education">
            <option value="" selected> <option>
            <option value="高中">高中</option>
            <option value="大学">大学</option>
            <option value="硕士">硕士</option>
            <option value="博士">博士</option>
          </select>
        </td>
      </tr>
      <tr>
        <td align="center"> 个人简介:</td>
        <td>
          <textarea name="personal" rows="5" cols="30">个人简介</textarea><br>
          <!--//可以删除<input type="hidden" name="id" value="001">-->
        </td>
      </tr>
      <tr>
        <input type="reset" value="重写">
        <input type="submit" value="注册">
      </tr>
    </table>
  </form></body>
</html>

表格–定义表格

<html>
    <head><title>表格的例子</title></head>             
    <body>              
        <table border="1" align="center" bgcolor="#ffdddd">
            <caption>2018年度期末考试成绩单</caption>
            <tr align="center" valign="middle">
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
            </tr> 
            <tr align="center" valign="middle">
                <td>李四</td>
                <td>99</td>
                <td>55</td>
                <td>88</td>
            </tr> 
            <tr align="center" valign="middle">
                <td>王五</td>
                <td>98</td>
                <td>78</td>
                <td>67</td>
            </tr> 
        </table>   
    </body>             
</html>