2021.3.8写写日记

前端

HTML

Hyper Text Markup LAnguage

• doctype告诉浏览器我们要使用什么标准
• head标签代表网页头部
• title网页标题
• body代表网页主体
• meta一般用来做SEO

网页基本标签

标题标签

</h1>一级标签</h1>
.................
</h6>六级标签</h6>

段落标签

<!--快捷键p+TAb-->
<p></p>

换行标签

换行<br/>

水平线标签

<hr/>

字体样式标签

<!--粗体-->
<strong></strong>
<!--斜体-->
<em></em>

特殊符号

&    ;
 空格

图像标签

常见图像格式

JPG

GIF

PNG

BMP

… …

<!--img学习
src：图片地址
	相对地址，绝对地址
	../  --上一级目录

-->
<img src"../resources/image/1.jpg"alt"图象的替代名"title"悬停名字"width="宽"hight="高">

链接标签

<!--a标签
href：必填；表示要跳转到哪个页面
target：表示窗口在哪里打开
	-blank在新标签页打开
	-self在自己的网页中打开
-->

<a href="htpps://www.baidu.com">跳转到百度</a>

<!--锚链接
1.需要一个标记
2.跳转到标记
#
-->

<!--功能性链接
邮件链接：mailto
-->

列表、表格、媒体元素

列表

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

表格

<!--colspan 跨列
   rowspan 跨列
-->
<table>
   <tr>
       <!--行-->
       <tb>列</tb>
   </tr>
</table>

媒体元素

<!--音频和视频
src:资源路径
controls：控制台
autopiay：自动播放
-->
<video src="" controls autoplay></video>

iframe内联框架

<!--例如
<iframe src="//player.bilibili.com/player.html?bvid=BV1zp4y1W7qf&cid=294929309&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>-->

表单以及表单应用

表单语法

<!--表单form
action：表单的提交位置，可以是网站，也可以是一个请求处理地址
method：post/get提交方式
get可以在url中看见我们提交的信息，不安全，高效
post比较安全，可以传输大文件

-->
<form method="" action=""
</form>

<form action="" method="">
    <!--文本输入框-->
    <p>name:<input type="text" name="name"></p>
    <!--密码框-->
    <p>password:<input type="password" name="pwd"></p>
    <!--单选框 同一组单选框要放在同一个name里，否则不会单选      
     checked默认选中-->
    <p>性别
    <intput type="radio" value="boy" name="sex" checked>男
    <intput type="radio" value="gril" name="sex">女
    </p>
    <!--多选框-->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hoppy">睡觉
        <input type="checkbox" value="code" name="hoppy">代码
        <input type="checkbox" value="chat" name="hoppy">聊天
        <input type="checkbox" value="game" name="hoppy">游戏
    </p>
    <!--按钮-->
    <p>按钮：
        <input type="button" name="普通按钮" value="button">
        <input type="image" src="" name="图像按钮">
    </p>
    <!--下拉框，列表框
-->
        <p>下拉框
            <select name="列表名称">
                <option value=".">.</option>
                <option value="..">..</option>
                <option value="...">...</option>
                <option value="....">....</option>
            </select>
        </p>
    <!--文本域
            cols="50" rows="10"
    -->
        <p>反馈：
            <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
        </p>
    <!--文本域
	input type="file" name="fils"
    -->
        <p>
            <input type="file" name="fils">
            <input type="button" value="上传" name="upload">
        </p>
    <p>
    <input type="submit" name="提交按钮">
    <input type="reset" name="重置按钮">
    </p>
        
</form>

<table>
<!--邮箱验证-->
<p>邮箱
    <input type="email" name="email">
</p>
<!--URL-->
<p>URL
    <input type="url" name="url">
</p>
<!--数字-->
<p>数字
    <input type="number" name="数字" max="100" min="0" srep="1">
</p>
<!--滑块
input type="range"
-->
<p>滑块
    <input type="range" name="range" max="100" min="0" srep="1">
</p>
<!--搜索框-->
<p>
    <input type="search" name="search">
</p>
</table>

表单的应用

隐藏域hidden

只读readonly

禁用disable

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

表单的初级验证

常用方式

piaceholder 提示信息

required 非空判断

pattern 正则表达式