html基础学习

初识HTML

HTML: 超文本标记语言

一.HTML的基本结构

根控制标记(头)

​ 头控制标记(头)

​

标题

标题标记

​ 头控制标记(尾)

​ 网页显示区域(一般要实现的代码都在这里写)

</body> 根控制标记(尾)

二.网页的基本标签

1. 标题标签

<h1> 一级标题</h1>
<h2> 二级标题</h2>
<h3> 三级标题</h3>
<h4> 四级标题</h4>
<h5> 五级标题</h5>
<h6> 六级标题</h6>

1. 段落标签

1. 换行标签

2. 水平线标签

   ---

3. 字体标识标签 粗体 用strong

   ​ 斜体 ：em

4. 特殊符号

   空格 &nbsp

   大于号 &gt

   小于号 &lt

   版权所有 &copy

三.图像标签

<img src = "", alt = "">
src为必填项 表示图片的地址
alt 表示图片的名字

四.超链接

1. 锚链接

   (1)需要一个锚标记

   (2) 跳转到标记#

2. 功能性链接 ：邮箱链接 mailto:

3. 行内元素和块元素

五.列表

有序列表
<ol>
	<li></li>
	<li></li>
	
</ol>

无序列表
<ul>
	<li></li>
	<li></li>
	
</ul>

自定义列表
<dl>标签
	<dt>列表名称</dt>

	<dd>列表内容</dd>
</dl>

六 表格标签

<table>
    <tr>行</tr>
    <td>列</td>
    
</table>

<td colspan = "4"> 跨列</td>
<td rowspan = "4"> 跨行</td>

七 媒体元素

​ 音频 audio

​ 视频 video

八 网页的简单布局

头部

脚部

主体

九 内联框架

iframe

<iframe src = "path" name = "mainFrame">
    
</iframe>

十 表单

action:表单提交的位置，可以是网站，也可以是一个请求处理地址

post：比较安全，适合传输大文件

get: 可以再URL中看到我们提供的信息，不安全但是高效

<form action="1.我的第一个网页.html" method="get">
    <!--文本输入框-->
    <p>名字：<input type="text" name="username" value="hhh" maxlength="8" size="30" readonly></p>
    <!--密码框-->
    <p>密码：<input type="password" name="pwd" hidden></p>


<!--单选框-->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked disabled/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

    <!--多选框-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天


    </p>
    <!--按钮-->
    <p>按钮：
        <input type="button" name="btn1" value="点击变长">
        <!--<input type="image" src="../resources/image/1.PNG" >-->
    </p>
    <!--下拉框，列表框
    -->
    <p>国家：
        <select name="列表名称" >
            <option value="China">中国</option>
            <option value="us">美国</option>
            <option value="rth" selected>瑞士</option>

        </select>
    </p>

    <p>文本域：
        <textarea name="textarea" id="" cols="10" rows="10">文本内容</textarea>
    </p>

    <p>文件域：
        <input type="file" name="files" >

    </p>

    <!--邮件验证-->
    <p>邮箱：
    <input type="email" name="email">

</p>
    <!--URL-->
    <p>URL：
        <input type="url" name="url">

    </p>
    <!--数字-->
    <p>数字：
        <input type="number" name="number" max="200" min="0" step="10">

    </p>
    <!--滑块-->
    <p>滑块：
        <input type="range" name="voice" max="100" min="0" step="1">

    </p>
    <!--搜索框-->
    <p>搜索框：
        <input type="search" name="search" max="200" min="0" step="10">

    </p>


    <p>
        <input type="submit">
        <input type="reset">
    </p>

十一 表单的应用

隐藏域 hidden

只读 readonly

禁用 disabled

十二 表单初级验证

提示信息 placeholder

非空判断 required

正则表达式 pattern