2021-10-25

最新推荐文章于 2025-05-09 15:29:25 发布

xingxingeyes

最新推荐文章于 2025-05-09 15:29:25 发布

阅读量118

点赞数

分类专栏： JavaWeb 文章标签： html 前端 css

本文链接：https://blog.youkuaiyun.com/xingxingeyes/article/details/120951472

版权

JavaWeb 专栏收录该内容

1 篇文章

订阅专栏

HTML学习

1.标签语法

1.标签格式
<标签名>封装的数据<标签名/>
2.标签名大小写不敏感
3.标签拥有自己的属性
i.基本属性：bgcolor=“aqua”
ii.事件属性：οnclick=“alert(’’);”

2.font标签

 <font color="red" face="宋体" size="7">这里是内容</font>

3.特殊标签

&lt;  <
&gt; >
&nbsp; 空格

4.标题标签

h1 - h6都是标题标签
h1最大 h6最小
align 属性是对齐属性
	left   左对齐（默认）
	center 居中
	right 右对齐

<h1 align="center">标题1</h1>
<h2>标题1</h2>

5.超链接

a标签是超链接
        href是链接地址
        target属性设置哪个目标进行跳转
           _blank当前页面跳转
           _self打开新页面

    <a href="http://www.baidu.com">百度</a><br/> <!-- 默认当前页面跳转 -->
    <a href="http://www.baidu.com" target="_blank">百度</a><br/> <!-- 默认当前页面跳转 -->
    <a href="http://www.baidu.com" target="_self">百度</a><br/> <!--打开新页面 -->

6.列表标签

ul 是无序列表  ol 是
type 属性可以修改列表项前面的符号
li 是列表项

   <ul type="none">
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

    <ol type="none">
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>

7.图片标签

img标签是图片标签
        src 属性可以用来设置图片的路径
        width 属性用来设置图片的宽度
        height 属性用来设置图片的高
        border 属性设置图片的边框大小
        alt 属性设置当前图片找不到是用来替代显示的文本

      在JavaSE中分为相对路径和绝对路径
        相对路径: 从工程名开始算
        绝对路径：盘符:/目录/文件名

      在JavaWeb中分为相对路径和绝对路径
        相对路径：
            .       表示当前文件所在的目录
            ..      表示当前文件上一级所在的目录
            ./      表示当前文件所在目录的文件，相当于./文件名  ./可以省略

<img src="img/1.jpg" width="350" height="550" border="0" alt="图片找不到"/>

8.表格标签

table 表格标签
           border 属性设置边框大小
           weidth 属性设置表格宽度
           height 属性设置表格高度
           align  属性设置表格相对于页面对齐方式
           cellspacing 属性设置单元格间距
     tr 是行标签
     th 是表头标签
     td 是单元格标签
        align 属性设置单元格文本对齐方式
        colspan 属性设置跨列
        rowspan 属性设置跨行 
     b 是加粗标签

 <table border="1" width="300" height="100" align="center" cellspacing="0">
        <tr>
            <th>1.1</th>
            <th>1.2</th>
            <th>1.3</th>
            <th>1.4</th>
            <th>1.5</th>
        </tr>
        <tr align="center">
            <td><b/>2.1</td>
            <td colspan="2" rowspan="2">2.2</td>
<!--            <td>2.3</td>-->
            <td>2.4</td>
            <td>2.5</td>
        </tr>
        <tr>
            <td>3.1</td>
<!--            <td>3.2</td>-->
<!--            <td>3.3</td>-->
            <td>3.4</td>
            <td>3.5</td>
        </tr>
    </table>

9.了解iframe框架标签（内嵌窗口）

iframe标签可以在页面上开辟一片小区域显示一个单独的页面
    iframe 和 a 标签组合使用步骤
       1.在iframe标签中使用name属性定一个名称
       2.在a标签的target属性上设置iframe的name的属性值

<iframe src="3.标题标签.html" width="300" height="500" name="abc"></iframe><br/>
    <ul>
        <li><a href="1-标签语法" target="abc">1-标签语法</a></li>
        <li><a href="2-front标签" target="abc">2-front标签</a></li>
        <li><a href="3-特殊标签" target="abc">3-特殊标签</a></li>
    </ul>

10.from表单

   题目： 创建一个个人信息注册表单界面。包含用户名、密码、确认密码。性别（单选）、爱好（多选）、国籍（下拉列表）。隐藏域、自我评价（多行文本域）。重置、提交。
    form 标签就是表单
    input 标签规定了用户可以在其中输入数据的输入字段。
        属性 type="text"        是文件输入框    value="设置默认显示内容"
        属性 type="password"    是密码输入框    value="设置默认显示内容"
        属性 type="radio"       是单选框       name="可以对其分组"      checked="checked"表示默认选中
        属性 type="checkbox"    是复选框       checked="checked"表示默认选中
        属性 type="reset"       是重置按钮      value="修改按钮上的文本"
        属性 type="submit"      是提交按钮      value="修改按钮上的文本"
        属性 type="button"      是按钮         value="修改按钮上的文本"
        属性 type="file"        是文件上传域
        属性 type="hidden"      是隐藏域        当我们要发送某些信息，而这些信息不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）
   select 标签是下拉框标签
   option 标签是下拉框中的选项
        属性 selected="selected"设置默认选中
   textarea 标签是多行文本输入框（起始标签和结束标签中间的内容为默认值）
        属性 rows=""            设置可以显示几行高度
        属性 cols=""            设置每行可以显示几个字符宽度

<form action="http://127.0.0.1:8080" method="get">
    用户名称: <input type="text" value="默认值"/><br/>
    用户密码: <input type="password" value="默认密码"/><br/>
    确认密码: <input type="password" value="默认密码"/><br/>
    性   别： <input type="radio" name="sex"/>男<input type="radio" name="sex" checked="checked"/>女<br/>
    兴趣爱好: <input type="checkbox" checked="checked"/>Java<input type="checkbox"/>C++<input
        type="checkbox"/>JavaScript<br/>
    国 籍:<select>
            <option selected="selected">-请选择-</option>
            <option>中国</option>
            <option>美国</option>
            <option>日本</option>
         <select/><br/><br/>
    自我评价: <textarea rows="5" cols="30">这里是默认值</textarea><br/>
    <input type="reset"/>
    <input type="submit"/>
</form>

表单提交细节、格式化表单（加表格标签）
  form 标签是表单标签
        action 属性是设置提交服务器的地址
        method 属性是设置提交的方式GET(默认)或者POST

  表单提交的时候没有发送给服务器的三种情况
        1.表单没有name属性值
        2.单选、复选（下拉列表中的option标签）都需要添加value值，以便发送给服务器
        3.表单项不在提交form标签中

  GET 请求的特点是：
        1.浏览器地址栏中的地址是 action 属性[+？+请求参数]
            请求参数的格式是: name=value&name=value
            http://127.0.0.1:8080/?action=login&username=张三&password=默认密码&password=默认密码&sex=girl&hobby=Java&country=none&desc=这里是默认值
        2.不安全
        3.它有数据长度限制

  POST 请求的特点是：
        1.浏览器地址中只有action 属性值
            http://127.0.0.1:8080/
        2.相对于GET 请求要安全
        3.理论上没有长度限制

<form action="http://127.0.0.1:8080" method="post">
    <input type="hidden" name="action" value="login">
    <h1 align="center">用户注册</h1>
    <table align="center">
        <tr>
            <td>用户名称:</td>
            <td><input type="text" name="username" value="张三"/></td>
        </tr>
        <tr>
            <td>用户密码:</td>
            <td><input type="password" name="password" value="默认密码"/></td>
        </tr>
        <tr>
            <td>确认密码:</td>
            <td><input type="password" name="password" value="默认密码"/></td>
        </tr>
        <tr>
            <td>性 别:</td>
            <td><input type="radio" name="sex" value="boy"/>男<input type="radio" name="sex" value="girl"
                                                                    checked="checked"/>女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好:</td>
            <td>
                <input type="checkbox" name="hobby" value="Java" checked="checked"/>Java
                <input type="checkbox" name="hobby" value="C++"/>C++
                <input type="checkbox" name="hobby" value="JavaScript"/>JavaScript
            </td>
        </tr>
        <tr>
            <td>国 籍:</td>
            <td>
                <select name="country">
                    <option selected="selected" value="none">-请选择-</option>
                    <option value="cn">中国</option>
                    <option value="usa">美国</option>
                    <option value="jp">日本</option>
                    <select/>
            </td>
        </tr>
        <tr>
            <td>自我评价:</td>
            <td><textarea rows="5" cols="30" name="desc">这里是默认值</textarea></td>
        </tr>
        <tr align="center">
            <td><input type="reset"/></td>
            <td><input type="submit"/></td>
        </tr>
    </table>
</form>

11.其他标签

其它标签
    div 标签   默认独占一行
    span 标签  它的长度是封装数据的长度
    p 段落标签  默认在段落的上方或者下方各空出一行来（如果已有就不在空）

<div>默认独占一行</div><div>默认独占一行</div><div>默认独占一行</div>
<span>它的长度是封装数据的长度它的长度是封装数据的长度它的长度是封装数据的长度它的长度是封装数据的长度它的长度是封装数据的长度它的长度是封装数据的长度它的长度是封装数据的长度它的长度是封装数据的长度它的长度是封装数据的长度它的长度是封装数据的长度它的长度是封装数据的长度它的长度是封装数据的长度它的长度是封装数据的长度</span>
<p>段落标签  默认在段落的上方或者下方各空出一行来（如果已有就不在空）</p>
<font face="宋体" color="red" size="7">字体标签</font>