Web前端

原创于 2022-09-14 17:26:02 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #java #html

本文详细介绍了HTML的基本概念，包括超文本、标记、基本语法、头部标签、常用标签如标题、段落、链接、图像，以及表格、表单、内联框架的使用。此外，还提到了字符转义、特殊符号以及表单元素如文本域、按钮的功能。

HTML概述

●HTML 指的是超文本标记语言 (HyperText Markup Language)。

超文本:是指页面内可以包含图片、链接、声音,视频等内容

标记:标签(通过标记符号来告诉浏览器网页内容该如何显示)

●用HTML语言把我们需要显示的内容显示在浏览器上，但是HTML语言本身并不显示

HTML基本语法

● Head标签(标签)包含了所有的头部标签标签。

● 头部区域的标签标签为: <title>, <style>, <meta>, <link>, <script>, <base>.

    <title>标签可定义网页的标题 
    <meta> 标签可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
    <meta> 标签位于文档的头部 
    <meta charset="utf-8" /> 
        
    标题处添加图标 
    <link href="ico地址" rel="icon" >

基本常用标签

标题标签：<h1></h1>.......<h6></h6>

段落标签：<p></p>

换行标签：

列表：无序列表：<ul></ul>

有序列表：<ol></ol>

超链接：<a></a>

图像标签：<img/>

<a>超链接

a标签:HTML 使用超级链接与网络上的另一个文档相连，通俗的说就是通过连接来访问其他网页资源。

图像标签

特殊符号转义

在HTML中预留了一些字符。这些预留字符是不能在网页中直接使用的。

比如< 和 >,我们不能直接在页面中使用< 和 >号，因为浏览器会将它解析为html标签。

例如：<b> 会被解析为b标签，空格,再多的空格都会当一个空格处理。

为了可以使用这些预留字符，我们必须在html中使用字符转义。

表格

table：表示表格 border：边距

tr：表格中的行 rowspan：行合并

th：表格的表头（单元格），默认加粗，居中

td：表格单元格 colspan：列合并 cellspacing：单元格之间的距离

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table border="1" width="300" bgcolor="aquamarine" cellspacing="0">
            <tr bgcolor="red">
                <th colspan="4">2022期末考试成绩表</th>
            </tr>
            <tr bgcolor="aqua">
                <th>姓名</th>
                <th>语文</th>
                <th>英语</th>
                <th>备注</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>89</td>
                <td>75</td>
                <td rowspan="3">90</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <td>94</td>
                
            </tr>
            <tr>
                <td>王五</td>
                <td>56</td>
                <td>86</td>
                
            </tr>
        </table>
    </body>
</html>

表单

form标签：表单

action="访问后端服务器地址" method="向服务器端提交数据的方式 http get/post"

文本域：

文本域：<form><fieldset><legend>个人信息表</legend></fieldset></form>

文本框：

<input type = "text" ：文本输入框， name = "userName" ， value = "张三"：输入标签的默认值：张三，

readonly = "readonly"：内容只读， placeholder = "请输入用户名"：提示信息，

disabled = "disabled"：内容置灰不可使用>

密码框：

单选按钮：

checked="checked"：默认选中

复选框：

<input type="checkbox" name="1" value="java"/>java

<input type="checkbox" name="2" value="c++"/>c++

注意：单选框通过name属性来分组，name相同是一组才可实现单选。单选和复选不能输入内容，所以必须指定value的值。 （单选框的name必须一样，复选框的name不能一样。）

文件选择框：

下拉框：

国家：<select name="country"> <option value="101" selected = "selected">中国</option>

selected = "selected"：默认选中

下拉框的name,id,事件等需要在select中定义，而value需要在option中定义。

多行文本域

《textarea name="textarea" cols="40" rows="6"> 文本域中的内容 </ textarea >

按钮

<input type="reset" value="重置"> 重置表单内容

<input type="submit" value="提交"> 提交表单内容到服务器

<input type="button" value="普通按钮"> 普通按钮没有功能，只能被点击触发事件用

<body>
        <form action="" method="">
            用户名：<input type="text" name="uesrName" value="" placeholder="请输入用户名" disabled="disabled"/><br />
            密码：<input type="password" name="passWord" value="" placeholder="请输入密码" /><br />
            确定密码：<input type="password" name="passWord" value="" placeholder="请再次输入密码" /><br />
            性别：<input type="radio" name="gender" value="男" checked="checked" />男 
                 <input type="radio" name="gender"  value="女"/>女<br />
            技术：<input type="checkbox" value="java"/>java
                  <input type="checkbox" value="Jsp"/>Jsp
                  <input type="checkbox" value="Servlet" />Servlet<br />
            国家：<select name="country">
                  <option >中国</option>
                  <option>美国</option>
                  <option>英国</option>
                  <option>印度</option>
            </select><br />
            地址：<textarea rows="5" cols="10" name="adress"></textarea><br />
            <input type="button" value="提交数据" />
            <input type="button" value="清除数据" />
        </form>
</body>

内联框架

内联框架可以在一个窗口内嵌入一个子窗口,从而在子窗口中引入一个外部页面

<body>
        <!--
            src="";初始页面
            name="";框架名称
            frameborder="";框架的边框宽度
            target="_self";当前的窗口打开
            target="_blank";新的窗口打开
            target="_parent";在上一级窗口打开
            target="_top";在最顶级的窗口打开
            target="iframeWork";在指定的窗口打开
        -->
        内联
        <a href="写信.html" target=" _parent">写信</a>
        <a href="收件箱.html" target="iframeWork">收件箱</a>
        <iframe name="iframeWork" src="默认页面.html" width="500" height="500"></iframe>
    </body>