学习笔记——JavaEE基础<1>HTML基础

最新推荐文章于 2021-12-26 02:06:59 发布

thewaiting

最新推荐文章于 2021-12-26 02:06:59 发布

阅读量620

点赞数

分类专栏： javaee学习笔记_web前端基础文章标签： html

本文链接：https://blog.csdn.net/thewaiting/article/details/73382516

版权

javaee学习笔记_web前端基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一，HTML介绍
二，HTML结构
三，HTML的常用标签
四，框架标签
五，表格标签
六，表单标签
七，多媒体标签

一，HTML介绍

html是超文本标记语言
html是标记语言
标记语言是一套标记标签
html使用标记标签来描述网页

二，HTML结构

1，html基本结构
2，head标签内常用的元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>one</title>
    </head>
    <body>
        <p>主题内容</p>
    </body>
</html>

主要标签
title 用于定义文档标题
script 用于包含javascript脚本
link 用于来链接外部css资源文件
style 用于定义内部css样式
meta 用于html页面的元数据

        <meta content="text/html; charset=UTF-8" http-equiv="content-type"/>

–http-equiv指定元信息的名称，该属性指定的名称具有特殊的意义，它可以向浏览器回传一些有用的信息，帮助浏览器正确地处理网页内容
–name指定元信息名称，该名称可以随意指定
–content指定元信息的值
都可以省略

三，HTML的常用标签

1，块级标签
<1>常用块级标签p,h1-h6,div,ul

h–标题标签
p–段落标签
hr–水平线标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>html学习</title>
    </head>
    <body>
        <hi>一级标签</hi>
        <hr 水平线 />
        <p>欢迎</p>
        <p>你</p>
    </body>
</html>

<2>有序列表标签语法
ol,li
<3>无序列表
ul,li

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>html学习</title>
    </head>
    <body>
        <h1>一级标签</h1>
        <hr 水平线 />
        <p>欢迎</p>
        <p>你</p>
        <ol>
            <h3>列表</h3>
            <li>列表1</li>
            <li>列表2</li>
        </ol>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
        </ul>
    </body>
</html>

<4>定义描述标签
dl,dt,dd

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>html学习</title>
    </head>
    <body>
        <dl>
            <dt>标题</dt>
            <dd>描述</dd>
        </dl>
    </body>
</html>

<5>分区标签
一般当作结构化块状元素使用，一般最常见的用途是对网页进行整体分块布局，即当容器来使用
div

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>html学习</title>
    </head>
    <body>
        <div>分区1</div>
        <div>分区2</div>
    </body>
</html>

2，行级标签
文本格式化元素
b-粗体
i-斜体
em-强调
strong-粗体
small-小号
sub-下标
sup-上标
bdo-文本显示方向，内有dir属性，只能取值ltr或rtl

span

<span>文本等行级内容</span>

br换行

<br/>换行符

3，超链接标签
href 指定超链接所关联的另一个资源
target 指定框架集中哪个框架来装载另一个资源，该属性可以是-blank-self-top-parent四个值，分别代表使用自身，新窗口，顶层框架，父框架来装载新的资源

<a href="链接地址" target="目标窗口">链接文本或图片</a>

4，图像标签

<img src= "图片地址" alt= "提示文字">

四，框架标签

1，frameset框架集
<1>创建各个子窗口对应的HTML文件
<2>创建整个框架文件，分别引用子窗口文件
cols:pixels % *定义框架集中列的数目和尺寸
rows:pixls % * 定义框架集中行的数目和尺寸

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>html学习</title>
    </head>

        <frameset cols="25%,50%">
            <frame src="1.html" />
            <frame src="2.html" />
        </frameset>

</html>

2，iframe内嵌框架
iframe常用属性
frame border：0，1规定是否显示框架周围的边框
name frame_name：规定iframe的名称
scrolling yes,no,auto：规定是否在iframe中显示滚动条
src URL：规定在iframe中显示的文档的URL

<body>
            <iframe src="1.html" name="1" frameborder="边框" scrolling="yes"/>
        </body>

五，表格标签

表格标签的使用
表格的相关元素
table 定义表格
tr 定义表格行，该元素只能包含td或者th两种元素
td 定义单元格，包含两个主要的属性：colspan-指定单元格跨多少列，rowspan-指定单元格可横跨的行数
caption 定义单元格标题
th 定义表格页眉的单元格
tbody 定义表格的主题
thead 定义表格的头
tfoot 定义表格的脚
这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>html学习</title>
    </head>

        <body>
            <table width="50%" height="200px" border="1">
                <caption>歌单</caption>
                <thead>
                    <tr>
                        <th>歌名</th>
                        <th>歌手</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td rowspan="2">3</td>
                    </tr>
                    <tr>
                        <td>4</td>
                    </tr>
                </tbody>
                <tfoot >
                    <tr>
                        <td colspan="2">5</td>
                    </tr>
                </tfoot>
            </table>
        </body>
</html>

六，表单标签

1,from标签
2，常见的表单元素必须和元素一起使用，表单是表单元素的容器

语法

            <form action="表单提交地址" method="提交方法">文本框，按钮等表单元素</form>

常用属性
action：指定表单提交后由服务器上的哪个处理程序进行处理
enctype：用于指定表单数据的编码方式
这里写图片描述
method：指定向服务器提交的方式一般为get和post两种方式get方式的请求会将请求参数的名和值转换成字符串，并附加在原URl之后，因此可以在地址栏中看到的请求参数的名和值。且get请求传送的数据量比较小，一般不能超过2KB*一般超链接是get请求* ；post方式的请求传送的数据量比较大，通常认为可以不受限制，往往取决于服务器的限制。post方式的请求参数是放在HTML的HEADER中传输，用户在地址栏看不见请求参数，安全性相对较高

常见的表单元素
input元素
这里写图片描述
常见的属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>html学习</title>
    </head>
        <body>
            <form name = "regForm" method="post" action="提交地址">
                单行文本框<input type="text" name="uname" id="uname" maxlength="10"/><br />
                密码文本框<input type="password" name="pwd" id="pwd" size="5"/><br />
                隐藏域<input type="hidden" name="hidn" id="hidn" /><br />
                单选按钮<input type="radio" name="sex" id="male" checked="checked"/>男<br />
                     <input type="radio" name="sex" id="female" />女<br />
                复选框<input type="checkbox" name="hobby" value="1" id="football" />足球<br />
                复选框<input type="checkbox" name="hobby" value="2" id="bbasall" />篮球<br />
                图像域<input type="image" src="图像路径" 
                    width="100px" height="20px"
                    name="photo" id="photo"/><br />
                文件上传域<input type="file" name="file" /><br />
                按钮<input type="submit" name="submit" value="提交"/>
                按钮<input type="reset" name="reset" value="重置"/>
                按钮<input type="button" name="button" value="普通"/>
            </form>
        </body>
</html>

button元素
使用button元素

        <button type="按钮类型"> 普通文本 图像等</button>

常用属性
disabled：指定是否禁用此元素，该属性只能是disabled或者省略
name：指定该按钮的唯一名称
type：指定该按钮属于哪种按钮，只能是button，reset，submit

    button提交按钮<br />
                <button name="sub2" type="submit">提交</button><br />
                <button name="reset2" type="reset"><b>重置</b></button><br />
                <button name="bnt2" disabled="disabled" type="button">普通</button><br />

列表框和下拉菜单

                <select name="指定列表名称" size="行数"><option value="选项值" selected="selected"></option></select>

常见的属性
-disable 指定元素是否禁用
-mutple 改列表框是否允许选多行
-size 指定该列表内同时显示多少个列表项
在其元素里，只能包含如下的两种子元素
option 用于指定列表框或菜单项，常见的属性
-selected 指定该列表初始状态是否被选中
-value 指定该选项对应的请求参数值
optgroup用于定义列表项或菜单项组，常见的属性
-label 指定该选项组的标签。必填属性

下拉菜单<br />
                <select name="city" id="city">
                    <option value="beijing">北京</option>
                    <option selected="selected" value="shanghai">上海</option>
                    <option>广州</option>
                </select><br />
                列表框<br />
                <select name="city2" id="city2" size="3">
                    <option value="beijing">北京</option>
                    <option selected="selected" value="shanghai">上海</option>
                    <option>广州</option>
                </select><br />
                选项组列表框<br />
                <select name="city2" id="city2" size="3">
                    <optgroup label="一线城市">
                    <option value="beijing">北京</option>
                    <option selected="selected" value="shanghai">上海</option>
                    <option>广州</option>
                    </optgroup>
                    <option value="beijing">北京</option>
                    <option selected="selected" value="shanghai">上海</option>
                    <option>广州</option>
                </select>

多行文本框

                <textarea name="..." cols="列宽" rows="行宽">文本内容</textarea>

常见的属性
cols 指定文本框的宽度，必填
rows 指定文本框的高度，必填
readonly 指定该文本框只读该属性只能是readonly或者省略

<textarea cols="20" rows="5" name="wenbenkaung" readonly="readonly">
                    文本框内容
                </textarea>

七，多媒体标签

音频和视频的标签
embed 播放音频

            <embed src="音频文件资源" width="200" height="200"></embed>

embed播放flash视频
PLUGINSPAGE设置flash插件的位置

object标签
可以通过object标签来给浏览器加载插件，通过加载的插件来播放音频和视频

<object data="资源">
                <param name="src" value="资源" />
                <param name="autoplay" value="true" />
            </object>

thewaiting

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录