html 简单学习

基本标签

换行标签

<br/>

粗体， 斜体

<strong><strong/> <em><em/>

水平线标签

<hr/>

特殊符号

   空格
>  大于   
< 小于
©  版权

图像标签

<img src="..\resource\image\0.jpg" alt="stra" title="bre">

• src 目录地址
• alt 加载不出来， 显示的文字
• title 鼠标悬停文字，

粗体标签必填。

超链接

<a href="https://www.baidu.com" target="_blank">kick it to baidu</a>

也可以用图片链接。

锚链接：

就是跳转到顶部的样子。

要先设置一个标记， a 标签加上 name 属性。

<a name = "top"></a>

<a href="#top">kick to top</a>

name 属性设置一个标记，

标记前面加个 # 号， 代表要跳到那个标记。

功能行链接

QQ推广

行内元素和块元素

列表

有序列表 ol

无序列表 ul

<ol>
    <li>Java</li>
    <li>Python</li>
    <li>C</li>
    <li>C++</li>
</ol>
<hr/>
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>C</li>
    <li>C++</li>
</ul

自定义列表 dl

<!--
dl: 标签
dt  列表名称
dd  列表内容
-->

<dl>
    <dt>subject</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C</dd>
    <dd>C++</dd>
</dl>

表格

<!--
table: 表格标签
tr:  一行
td:  一列
rowspan  跨行
colspan  跨列
-->

<table border="1px">
    <tr>
<!--        colspan  跨列-->
        <td colspan="3">1.1</td>
    </tr>
    <tr>
<!--        rowspan  跨行-->
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.2</td>
        <td>3.3</td>

    </tr>
</table>

视频和音频

<!--
controls:  出现控制建， 音量，下载
autoplay:  自动播放
-->
<video src="..\resource\video\Flipped.2010.mp4" controls autoplay></video>
<audio src="..\resource\audio\Burn.ncm" controls autoplay></audio>

iframe

<!--
内联框架
src: 地址
设置长宽高
-->
<iframe src="https://www.baidu.com" frameborder="0" width="1000" height="500"></iframe>

表单语法

<!--
action : 表单提交的位置， 可以是网站，也可以是一个请求处理地址
method： post， get 提交方式
get 方式：　不安全，可以在搜索框中看到，　但是高效
post 方式： 安全，传输大文件
value ： 是初始值。 
size ： 文本框的长度
        <!--
         单选框标签
         input type = "radio"
         value : 单选框的值
         name : 表示组， name 一样就是组， 一个组只能选一个。

        多选框标签
        input type = "checkbox"
		
		默认的写上 checked


        按钮
        input type = "button"
        input type = "image"
        input type = "submit"
        input type = "reset"
        都可以是按钮，  value 可以给按钮赋值。 
       
         -->
-->

<h1>register</h1>
<form action="图像标签.html" method="post">
    <p>名字： <input type="text" name="username"></p>
    <p>密码： <input type="password" name="pwd"></p>
    
        <p>性别:
        <input type="radio" value="boy" name="sex" checked/> 男
        <input type="radio" value="girl" name="sex"/> 女
    </p>
    <p>
        <input type="checkbox" name="hobby" value="sleep">睡觉
        <input type="checkbox" name="hobby" value="code">代码
        <input type="checkbox" name="hobby" value="chat">聊天
        <input type="checkbox" name="hobby" value="game">游戏

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

文件域， 文本域，下拉框

<!--
下拉框
selected ： 默认选项
-->
    <p>country:
        <select name="list">
            <option value="china">中国</option>
            <option value="US" selected>美国</option>
            <option value="USA">英国</option>
            <option value="Indian">印度</option>
        </select>
    </p>
<!--
文本域
长和宽：
cols="30" rows="10"
-->
    <p>callback:
        <textarea name="textarea" cols="30" rows="10">my name is ytccc</textarea>
    </p>
<!--
文件域
type="file" name="files"
-->
    <input type="file" name="files"/>

邮箱， URL，数字，滑块，搜索框。

<!--   邮箱验证 -->
    <p>email:
        <input type="email" name="email">
    </p>
<!--   URL -->
    <p>url:
        <input type="url" name="url">
    </p>
<!--  数字  -->
    <p>商品数量：
        <input type="number" name="num" max="100" min="0" step="1">
    </p>
<!--滑块-->
    <p>滑块：
        <input type="range" min="0" max="100" name="voice" step="1">
    </p>
<!--    搜索框-->
    <p>search:
        <input type="search" name="search">
    </p>
    

表单的应用

• 隐藏域 hidden

• 只读 readonly

• 禁用 disable

• 增强鼠标的可用性：

  <!--   邮箱验证 -->
  用了 label， for 是是个标记， 和 input里面的id有关， 点击文字就可以去输入框里。
      <p><label for="mark">email:</label>
          <input type="email" name="email" id="mark">
      </p>
  

表单的验证

• 提示信息：placeholder
• 非空判断：required 文本框不为空才能提交
• 正则表达式： pattern