html讲课笔记

最新推荐文章于 2023-12-08 12:27:38 发布

原创最新推荐文章于 2023-12-08 12:27:38 发布 · 462 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

java 专栏收录该内容

28 篇文章

订阅专栏

HTML简介

什么是HTML：HyperText Markup Language 超文本传输语言
HTML是最基础的网页语言
HTML作用：Java web界面，可以使用html开发java界面

HTML的基本格式

<html>
        <head>
                存放head里边的内容会先加载
                存放属性的信息或者辅助性的信息
                引入外部的文件(CSS javaScript js)
        </head>
       <body>
       </body>
</html>

HTML的注意事项

大多数的标签都是由开始和结束标签组成，个别的标签只有单一的功能，或者没有要修饰的内容，可以在标签内部结束。
标签上包含属性，通过改变属性的值，可以达到更好的显示的效果。
属性名和属性值，属性名和属性值之间用=连接，属性的值使用双引号、单引号或者不用引号。

HTML的排版标签

注释：<!--注释-->
<p> </p>    段落标签：标签的开始和结尾位置产生一行空行  
<br/>       换行标签:   
<hr/>       水平线:    
color       颜色属性:直接写英文单词 或者rgb三原色
<div></div>     声明一块区域 跟着换行:               
<span></span> 在网页上生命一块位置  不换行；
<font></font> 字体标签 color 字体颜色 size 字体大小 最大值7 最小值1 face 字体类型
标题标签
<h1>一级标题</h1>
<h1>二级标题</h1>
<h1>三级标题</h1>
<h1>四级标题</h1>
<h1>五级标题</h1>
<h1>六级标题</h1>
<b></b> 粗体  <i>斜体</i>
<i><b>粗体斜体</b></i>

HTML的列表标签

列表标签:把数据封装成列表
<dl>
    <dt>上层项目</dt>
    <dt>上层项目</dt>
    <dt>上层项目</dt>
</dl>

有序列表（重点）:
<ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>


    <ul type="square">
    <li>成龙</li>
    <li>李连杰</li>
    <li>周润发</li>
</ul>

<ol type="a">
    <li>林青霞</li>
    <li>张曼玉</li>
    <li>钟楚红</li>
</ol>

HTML 图片标签

图片标签：有一个单独的图片，需要把图片和HTML的文件关联到一起。
    <img /> 引入一种图片
        src：要链接图片的地址
        width   ：图片的显示宽度
        height  ：图片的显示高度
        alt     ：图片的说明文字

    <marquee>浮动</marquee>

HTML 框架标签

<frameset cols="35%,*">

    <frame noresize="noresize" bordercolor="red" src="图像标签.html"
        frameborder="1" scrolling="nos">
    <frameset rows="50%,*">
        <frame src="列表标签.html">
        <frame src="表格标签.html">
    </frameset>
</frameset>

超链接标签

<a href="http://wwww.baidu.com"> 百度 </a>

<a href="http://www.baidu.com" target="_blank">百度</a> <br />
<a href="girl.jpg">美女</a> <br />
<a href="1.rar">1.rar</a> <br />
<a href="04-图片标签.html">04-图片标签.html</a> <br />

<a href="http://www.xunlei.com/moves/ybzy.rmvb">一步之遥</a> <br /><!-- 下载窗口弹出的浏览器默认的下载窗口 -->

<a href="thunder://sdfsdfoijweirji">一步之遥</a> <br />

<a name="top">顶部位置</a>

<a href="#top">返回顶部位置</a><br />

HTML表格标签（重点）

<table> ：封装表格的范围
        border：表格的格线
        width:表格的宽度
        height：代表的表格高度
        cellpadding:文字距离表格线的长度
    <tr>    ：代表表格的行
        align：单元格中文字的对齐方式
    <td>    ：代表单元格
    <th>    ：代表单元格
        th和td的区别：th文本内容默认加粗和居中的。th表格的表头
        td非常重要的属性：合并单元格。
            行合并:rowspan=合并几个单元格值就是几
            列合并：colspan=合并几个单元格值就是几
    <caption>：表格标题

HTML表单标签

表单标签：收集用户输入的数据。
封装表单标签的范围   
<form>
        form包含属性    
            action  ：表单要提交的地址（后台去提交）
            method:get post

        用户的输入项的内容：例如：普通的文本框 普通的密码   使用<input type="值的不同，显示不同的输入 text password" >
        ***** 注意：input标签上有两个属性  name（必须要指定） value   （不一定要指定）   name的名称  value的值
        ***** 注意：name属性必须要指定的，value的属性不一定指定

        type="text"         普通的文本框
        type="password"     密码框
        type="radio"        单选按钮    只能选择一个
            添加一个属性：组的概念，指定相同的name属性
            有默认值：checked="checked"
        type="checkbox"     多选按钮
            组的概念：指定相同的name属性
            有默认值：checked = "checked"    
        type="file"     文件上传    name属性也是必须指定的
        type="hidden"       隐藏组件    用户不需要看到的数据，就可以使用隐藏组件隐藏起来。
        type="button"       按钮（和js语言和在一起使用）

        type="submit"       提交：表单收集用户的数据，点击就可以把表单提交到后台
            ?sex=on                     单选按钮的name的属性的值。
            ?username=zhaosi&sex=on     
            ?username=张三&password=123&sex=nan
        type="reset"        重置：恢复到最初的状态

        选择下拉框
        <select name="必须指定的，并且需要指定在select标签上">
            <option value="必须指定，指定在option标签上">北京</option>、
            <option value="必须指定，指定在option标签上">上海</option>
        </select>
        默认值：selected="selected"

        文本域：写入多行多列的内容
        <textarea>
            属性：
                rows 行
                cols 列
        </textarea>
    </form>