html学习

HTML

1网页的基本信息

注释

基本结构

告诉浏览器我们要是用什么规范


    <html>
        <head>
            
            
            <meta charset="UTF-8">
            <meta name="description" content="这是一个网站">
            
            <title>Titletitle>
        head>
        <body>
        
        body>
    html>

2网页的基本标签

###### 


    <html>
        <head>
            <meta charset="UTF-8">
            <title>Titletitle>
        head>
        <body>
            
            <h1>一级标签h1>
            <h2>二级标签h2>
            <h3>三级标签h3>
            <h4>四级h4>
            <h5>五级h5>
            <h6>六级h6>
            
            <p>p>
            
            <br/>
            
            <hr/>
            
            <strong>粗体标签strong>
            <em>斜体标签em>
            
            空格 空格
            >大于号
            <小于号
        body>
    html>

3图像标签

src图片路径

1.相对地址

../ 上一级目录

2.绝对地址

 

alt替换图片或文字

title 鼠标停在图片上显示文字

4链接标签

  1. 页面间链接

    target="_blank" 会打开一个新的网页

    target="_self" 在当前页面面打开

  2. 锚链接

    1）需要一个锚标记

    2）跳转到标记


    <html>
        <head>
            <meta charset="UTF-8">
            <title>Titletitle>
        head>
        <body>
           
            <a name="top">顶部a>
            
            
            <a href="#top">回到顶部a>
            
        body>
    html>

  1. 功能性链接

    邮件链接


        <html>
            <head>
                <meta charset="UTF-8">
                <title>Titletitle>
            head>
            <body>
               
                <a href="mailto:111111@qq.com">点击联系我a>
               
                
            body>
        html>

     

5行内元素 块元素

行内元素

内容撑开宽度 左右都是行内元素的可以排在一行内

块元素

无论内容有多少 元素独占一行

6列表

有序列表

无序列表

自定义列表

<dl>
    <dt>dt>
    <dd>dd>
dl>

7表格标签

基本结构

单元格

行

列

跨行

跨列

<table> 
    <tr>
        <td>td>
        <td>td>
        <td>td>
    tr>
    <tr>
        
        <td colspan="3">td>
        
    tr>
    <tr>
        
        <td rowspan="2"> td>
        <td>td>
        <td>td>
    tr>
table>

8视频 音频

 

视频

 

音频

src资源路径

controls 进度条

autoplay 自动播放 （打开网页 自动播放）

9页面结构分析

元素名描述
header 标题头部区域内容
footer 标记脚步区域的内容
section web页面中一块独立区域
article 独立的文章内容
aside 独立内容或应用（常用于侧边栏）
nav 导航类辅助内容

10 iframe内联框架

在一个网页中 加入另一个网页

11

src 引用页面地址

name 框架标识名

11表单

11

method 规定如何发送表单数据 常用：post get

action 表示向何处发送表单数据 可以是网站或是请求处理地址

1） form的各种type

属性说明
type 指定元素的类型：text、password、checkbox（多选框）、radio（单选框）、submit、reset、file、hidden、image、email、 url、search（搜索框）、selecct（下拉框）、range（滑块）
name 指定表单元素的名称
value 元素的初始值。type为radio时必须制定一个值
size 指定表单元素的初始宽度。当type为text或password时 表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength type为text或password时 输入的最大字符数
checked type为radio或checkbox时 指定按钮是否被选中 
<form method="post" action="12566.html">
    <p>
        名字<input type="text" name="username" >
    p>
    <p>
        密码<input type="password" name="pwd">
    p>
    
    <p>性别
        <input type="radio" value="boy" name="sex">男
        <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="bike" name="hobby">单车
        <input type="checkbox" value="chat" name="hobby">聊天
    p>
    
    <p>
        <input type="button" value="点击" name="btn1">
    p>
    
    <p>
        <input type="image" src="../asda.jpg">
    p>
    
    <p>
        <input type="submit">提交
        <input type="reset">重置
    p>
   
    
    <p>
        <select name="列表名称">
            <option value="china" selected>中国option>
            <option value="USA">美国option>
            <option value="11">德国option>
            <option value="Risa">俄罗斯option>
        select>
    p>
    
    <p>反馈
        <textarea name="textarea"  cols="10" rows="10">文本内容textarea>
    p>
    
   <p>
        <input type="file" name="files">    
   p>
    
    
   <p>邮箱
        <input type="email" name="email1">    
   p>
    <p>url
        <input type="url" name="url">    
   p>
     
    <p>商品数量：
        <input type="number" name="num" max="100" min="0" step="0">    
   p>
   
    <p>滑块
        <input type="range" name="vose" max="100" min="0" step="0">    
   p>
    
   <p>搜索
        <input type="search" name="search">    
   p>
form>

2）只读 禁用 隐藏

`<form method="post" action="12566.html">
    <p>
        名字<input type="text" name="username" value="可惜君已逝i" readonly > 
    p>
    <p>
        密码<input type="password" name="pwd"  hidden value="123"> 
    p>
     <p>
        <input type="submit" disabled>提交   
        <input type="reset">重置
    p>
form>

3）表单的初级验证 placeholder（提示信息）、required（非空判断）、pattem（正则表达式）

`<form method="post" action="12566.html">
    <p>
        名字<input type="text" name="username" placeholder="请输入用户名" >  
    p>
    <p>
        密码<input type="password" name="pwd" required> 
    p>
    <p>自定义邮箱
        邮箱<input type="text" name="diyeamil" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
        
    p>    
    
     <p>
        <input type="submit">提交 
        <input type="reset">重置
    p>
form>
 
技术学习

相关

关于技术学习

一些非常优秀的技术学习博客

前台技术学习7（1）

20220304-未来一段时间技术学习计划

标签