HTML

HTML

结构

1.注释：<!-- -->

2.声明：DOCTYPE 表示该文档遵循怎样的规范

<!DOCTYPE html>
<html>
    <!-- 网页头部-->
    <head>
        <meta charset="utf-8">
        <title>My first</title>
    </head>
    <!-- 网页主体部分-->
    <body>
        
    </body>
</html>

meta标签

描述性标签，描述网页的一些信息

<meta name="keyword" content="关键字，搜索的时候，查找这个关键字">
<meta name="description" content="对网页的描述">

基本标签

标题标签

<h1></h1>  
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>

从上到下依次变小，是块元素，元素独占一行

段落标签

<p>独自形成一个段</p>

是块元素,元素独占一行

换行标签

<br/>  <!-- 实现换一行-->

是块元素，自闭合标签

水平线标签

<hr/> <!-- 可以画一条水平线-->

是自闭合标签

字体样式标签

  1. 粗体<strong><strong/> 行内元素

  2. 斜体<em><em/> 行内元素

特殊符号

版权符号：&copy;
空格：&nbsp;
大于：&gt;
小于：&lt;

图片标签

<img src="path" height="高度" width="宽度" alt="描述" title="鼠标悬浮提示" >

超链接标签

<a href="path" target="_blank">超链接</a>

href属性：可以是外部网址，也可以是内部的文件

target属性：_blank 新打开一个网页

_self该网页跳转

锚链接：跳转到指定位置

邮件链接：href="mailto:xxx"

超链接是行内元素

列表

  • 有序列表

  • 无序列表

  • 自定义列表

<!-- 有序列表-->
<ol>
    <li></li>
</ol>
<!-- 无序列表-->
<ul>
    <li></li>
</ul>
<!-- 自定义列表-->
<dl>
    <dt>
        <dd></dd>
        <dd></dd>
    </dt>
</dl>

表格

<table border="1px">      
        <th colspan="2"> 已学内容</th>  //表头
        <tr>                          //行
            <td>java</td>             //列
            <td>java</td>
        </tr>
        <tr>
            <td>python</td>
            <td>python</td>
        </tr>
    </table>

boder属性：设置边框

colspan="n" :n行合并

rowspan="n":n列合并

媒体标签

  1. 视频 video

    <video src="path" autoplay controls></video>

    autoplay：自动播放

    controls：可以控制开始，暂停

  2. 音频 audio

    <audio src="path" autoplay controls></audio>

页面结构

header:标题头部区域内容

feeter:标题脚部区域内容

nav:导航

aside:侧边栏，相关内容或应用

article:独立文章内容

section:Web页面的独立区域

内联框架

iframe:内联框架

<iframe src="path" width="100px" height="300px" name="xxx"></iframe>
<a href="path" target="xxx">跳转</a>  //从内联框架中跳转至path地址

表单

<h2>登录</h2>
    <form action="list.html"  method="get">
        <p>登录名：
            <input type="text" name="username">
        </p>
        <p>密码：
            <input type="password" name="pwd">
        </p>
        <p>
            <input type="submit" name="submit">
            <input type="reset" name="reset">
        </p>
    </form>

  • action：表单提交的位置

  • method：表单提交的方式

    get：url中会显示提交内容，不能传输大文件html/list.htmlusername=ssss&pwd=111&submit=%E6%8F%90%E4%BA%A4%E6%9F%A5%E8%AF%A2

    post：url中不显示提交的内容，可以传输大文件

  • name: 表单元素的名称

  • value：元素初始值

  • type：password:密码不显示

    text:输入文本框

    submit：提交

    reset：重置信息

    checkbox：复选框，checked表示是否被选中

    radio:单选按钮，必须有value初始值，checked表示是否被选中

    hidden:隐藏

    button:普通按钮

    image:图片按钮

  • maxlength:最大长度，表示密码位数或者名字的长度

image-20220711165809732

单选和复选框必须在同一个name组中，否则会全部被勾选出来

button是在value中写值

下拉菜单

<select>
    <option value="china">中国</option>
    <option value="us"  selected>美国</option>  //默认选择
    <option value="uk">英国</option>
</select>

文本域

能够提交多行的文字

<textarea name="get"  rows="10" cols="40">this is a ...</textarea>

文件域

<input type="file" name="files" >
<input type="button" value="上传文件" name="bt2">

功能验证

  1. 邮箱验证：type="email"

  2. url验证： type="url"

  3. 数字验证：type="number" max="100" min="0" step="10"

  4. 滑块验证：type="range" value="voice" max="100" min="0" step="2"

  5. 搜索框：type="search"

应用

  1. 只读：readonly

  2. 禁用：disabled

  3. 隐藏：hidden 用于设置默认值

label标签：

<p><label for="mark">搜索:</label>
            <input type="search" name="search" id="mark">
        </p>

点击搜索文字之后，选中输入框

初级验证

  1. 输入框中有提示内容：placeholder=“xxxx”

  2. 不允许为空：required

  3. 正则表达式：pattern

posted @ 2022-07-11 21:33  lerry1342  阅读(36)  评论(0)    收藏  举报