HTML5简单学习

最新推荐文章于 2023-09-22 22:19:06 发布

学海无涯le做舟

最新推荐文章于 2023-09-22 22:19:06 发布

阅读量138

点赞数

分类专栏： Ht'm'l 文章标签： html

本文链接：https://blog.csdn.net/qq_40043345/article/details/115487649

版权

Ht'm'l 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5

一、基本标签学习：

文件标签：构成html最基本的标签
- html:html文档的根标签
  - head：头标签。用于指定html文档的一些属性。引入外部的资源
  - title：标题标签。
  - body：体标签
  - ：html5中定义该文档是html文档
1. 文本标签：和文本有关的标签
  - 注释：
    
    h1 to h6：标题标签
    h1~h6:字体大小逐渐递减
    p：段落标签
    br：换行标签
  - hr：展示一条水平线
    - 属性：
      - color：颜色
      - width：宽度
      - size：高度
      - align：对其方式
        center：居中
        left：左对齐
        right：右对齐
  - b：字体加粗
  - i：字体斜体
  - font:字体标签
  - center:文本居中
    - 属性：
      - color：颜色
      - size：大小
      - face：字体
  - 属性定义：
    - color：
      1. 英文单词：red,green,blue
      2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
      3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
    - width：
      1. 数值：width=‘20’ ,数值的单位，默认是 px(像素)
      2. 数值%：占比相对于父元素的比例

3.图片

	    <img src="image/1.jpg" alt="图像的替代文字（图像加载失败时替代）" title="鼠标悬停的提示文字" align="right"  width="500" height="500"/>
	
	    <!--
	        相对路径
	            * 以.开头的路径
	                * ./：代表当前目录  ./image/1.jpg
	                * ../:代表上一级目录
	     -->

列表标签：

有序列表：

li:

<ol>
    <li>Java</li>
    <li>Java</li>
    <li>Java</li>
    <li>Java</li>
</ol>

无序列表：
- ul:
- li:

自定义列表：

dt:列表名
dd:表体

<dl>
    <dt>语言</dt>
    
     <dd>Java</dd>
     <dd>Java</dd>
     <dd>Java</dd>
     <dd>Java</dd>
</dl>

5.链接标签：

a:定义一个超链接
- 属性：
  - href：指定访问资源的URL(统一资源定位符)
    - target：指定打开资源的方式
      - _self:默认值，在当前页面打开
      - _blank：在空白页面打开

<a href="http://www.baidu.cn" target="_blank">点我</a>
<br>
<!--图片超链接-->
<a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg"></a>
<!--功能性链接-->
<!--邮件链接-->
<a href="mailto:123456@qq.com">点击联系我</a>
<!--功能性链接-->

div和span：
- div:每一个div占满一整行。块级标签
- span：文本信息在一行展示，行内标签内联标签

7.语义化标签：html5中为了提高程序的可读性，提供了一些标签。

<header>:页眉
<footer>：页脚
<section>:web页面中一块独立区域
<article>：独立的文章内容
<aside>:常用于侧边栏
<nav>:导航栏

8.表格标签：

table：定义表格
- width：宽度
  - border：边框
    - cellpadding：定义内容和单元格的距离
    - cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
    - bgcolor：背景色
    - align：对齐方式
  - tr：定义行
    - bgcolor：背景色
    - align：对齐方式
  - td：定义单元格
    - colspan：合并列
    - rowspan：合并行
  - th：定义表头单元格
  - ：表格标题
  - ：表示表格的头部分
  - ：表示表格的体部分
  - ：表示表格的脚部分

9 iframe内联框架

在一个网站里面嵌套另一个网站；

<iframe src="PATH（引用页面地址）" name="mainframe（框架名标识）"></iframe>

二、表单标签

表单：

概念：用于采集用户输入的数据的。用于和服务器进行交互。
form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
- 属性：
  - action：指定提交数据的URL
  - method:指定提交方式
    - 分类：一共7种，2种比较常用
      - get：
        请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
        请求参数大小是有限制的。
        不太安全。
      - post：
        2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
        3. 请求参数的大小没有限制。
        4. 较为安全。

表单项中的数据要想被提交：必须指定其name属性

表单项标签：
- input：输入框，可以通过type属性值，改变元素展示的样式
- type属性：
  - text：文本输入框，默认值
  - placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
  - password：密码输入框
  - radio:单选框
  - checkbox：复选框
    ** 注意: **
    1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
      2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
      3. checked属性，可以指定默认值
file：文件选择框

hidden：隐藏域，用于提交一些信息。
- 按钮：
  - submit：提交按钮。可以提交表单
    - button：普通按钮
    - image：图片提交按钮
      - src属性指定图片的路径
- label：指定输入项的文字描述信息
  - 注意：
    - label的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。
select: 下拉列表
- 子元素：option，指定列表项
textarea：文本域
- cols：指定列数，每一行有多少个字符
- rows：默认多少行。

实践代码：

<form action="baisctag.html" method="get">
    <!--文本框-->
    <p>姓名：<input type="text" name="username" value="zr"></p>  <!--表单提交后，目的地址就会收到一个username=value的数据-->
    <p>密码：<input type="password" name="password"></p>

    <p>只读：<input type="password" name="ro" value="admin" readonly> </p>

    <p>隐藏：<input type="password" name="password" hidden></p>
    <!--单选框 name属性值应当一样-->
    <p>
        性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女
        <input type="radio" value="girl" name="sex" disabled>女
    </p>
    <!--多选框 name也一样，提交成数组的-->
    <p>
        爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="coding" name="hobby">敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>
     <!--按钮-->
    <p>
        按钮：
        <input type="button" name="btn1" value="点击">
        图片按钮
        <input type="image" src="../../../1.jpg">
    </p>

    <!--文件域-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

    <!--邮件验证-->
    <p>邮箱：
        <input type="email" value="111" name="email">
    </p>
    <!--URl-->
    <P>
        URl:
        <input type="url" name="url">
    </P>
    <!--数字-->
    <p>
        数字：
        <input type="number" name="num" max="100" min="10" step="10">
    </p>
    <!--滑块-->
    <p>
        音量滑块：
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>

    <!--搜索-->
    <p>
        搜索:
        <input type="search" name="search">
    </p>


    <!--下拉框-->
    <p>
        国籍：
        <select name="列表名称">
            <option value="China">中国</option>
            <option value="UN">英国</option>
            <option value="USA">美国</option>
        </select>
    </p>

    <!--文本域 多行文本-->
    <p>
        <textarea name="textarea" cols="10" rows="5">
            文本内容
        </textarea>
    </p>
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>

    <!--增强鼠标可用性 for="id"-->
    <p>
        <label for="mark">点我</label>
        <input type="text" id="mark">
    </p>
</form>

学海无涯le做舟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5简单学习

HTML5一、基本标签学习：文件标签：构成html最基本的标签html:html文档的根标签head：头标签。用于指定html文档的一些属性。引入外部的资源title：标题标签。body：体标签：html5中定义该文档是html文档文本标签：和文本有关的标签注释：h1 to h6：标题标签h1~h6:字体大小逐渐递减p：段落标签br：换行标签hr：展示一条水平线属性：color：颜色width：宽度size：高度align
复制链接

扫一扫