HTML学习

HTML学习

网页标签的基本结构

标题标签

<h1>标题标签</h1>
<h1>一号标题</h1>
<h2>二号标题</h2>
<h3>三号标题</h3>
<h4>四号标题</h4>

p标签（段落标签）与换行标签

<p>  </p>    //p标签中的内容自成一段 两对p标签之间的间隔比换行的间隔大
<br/> //换行 用于需要换行的那代码结尾 

粗体与斜体，水平线

粗体 :<strong>     </strong> //字体变粗
斜体 :<em>   		</em>//字体变为斜体
水平线：<hr>  //网页上显示一条水平线

特殊符号

&nbsp //空格符（一个空格），多个空格就要多个&nbsp

图片标签,链接标签

图片标签
重要组成元素 src 路径 …/表示上一级目录
alt 名字（在图片失效时会显示 不失效时不会显示）
title 悬停文字
例：

<img src="../../resources/image/1.jpg" alt="随便一张图片" title="悬停文字" width="886" height="1000">

链接标签
也就是a标签
href 必填 跳转到哪个页面或者是标记位
target 在哪里打开 新窗口/当前窗口等 默认是当前窗口
_blank 新窗口打开
_self 当前窗口打开
例：

<a name="top">top</a>  设置标记位
<a href="#top">跳转到top</a>  跳转到标记位

<a href="一些基本标签.html ">点击跳转到一些基本标签</a>
<a href="http://www.baidu.com " target=_blank>点击跳转百度</a>
<a href "路径" >点击跳转的方式（可以是文字也可以是图片标签）</a>

音频，视屏

video 视屏
autoplay 控制 必加
aideo 音屏
autoplay 控制 必加

<video src="路径" autoplay> </video>

<aideo src="路径" autoplay> </aideo>

---

列表

有序列表,无序列表

/*
有序列表 ol
*/
<ol>
    <li>java</li>
    <li>Python</li>
    <li>c/c++</li>
</ol>

<hr>

/*
无序列表 ul
*/
<ul>
    <li>java</li>
    <li>Python</li>
    <li>c/c++</li>
</ul>

<hr>

/*
自定列表列表
dl:表头 dt;
       dd;
*/
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>Python</dd>
    <dd>c/c++</dd>
    <dt>前景</dt>
    <dd>网页</dd>
    <dd>大数据</dd>
    <dd>游戏</dd>
</dl>

表格

table
tr 行
dr 列
rowspan 跨行
colspan 跨列

例：

     <tr>
      <td colspan="3" align="center">严昌敬</td>
    </tr>
    <tr>
       <td rowspan="2">专业</td>
        <td>Java</td>
        <td>100</td>
    </tr>
    <tr>
        <td>c++</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="3">学术</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td>英语</td>
        <td>100</td>
    </tr>

结果样式

---

内联网页

iframe
例：

<iframe src="一些基本标签.html" name="随便" frameborder="0" width="1000" height="800"></iframe> //在网页中有一个内联的网页为“一些基本标签.html”
//target 想要在哪个网页中进行跳转
<a href="https://www.bilibili.com/" target="随便">点击跳转到bilibili</a>
//在name为"随便的网页中跳转为哔哩哔哩官网

---

表单

表单 form
action 提交给哪个网页/链接
method：

1.      get  不安全 在url中可以看到填的信息  但高效 但不能传输文件
   

2.   	post 比较安全  可以传输大文件
   

<form action="我的第一个网页.html" method="get">
</from>

---

应用
readonly 只读（不能修改）
hidden 隐藏（看不见但是还是存在）
disable 禁用（不能选或者修改）

---

初级应用
placeholder 提示性的文字（在文本框）
required 必填 不填无法提交
pattern 正则表达式 https://www.jb51.net/tools/regex.htm

用户名

input type="text"
输入文本框 input text 可见
value=“用户名” 初始值
size=“30” 输入框的长度
maxlength=“8” 输入内容的最大字节数
例：

 <p>用户名: <input type="text" name="username"  placeholder="请输入用户名" </p>  //placeholder是提示文字

密码

input type="password"
例：

<p>密码: <input type="password" name="pwd" hidden></p>//hidden 是限制

单选框

**input type=“radio” **
vaule 为初始值 必填！
name 如果单选框的name为一样 则为一组 才能实现单选 若name不一样每个name所对应的的单选框都可以有一个值
例：

 <p>性别
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="gril" name="sex" disabled>女
    </p>

多选框

input type="checkbox"
例：

<p>爱好
    <input type="checkbox" value="girl" name="hobby">女
    <input type="checkbox" value="code" name="hobby">敲代码
    <input type="checkbox" value="game" name="hobby">游戏
    <input type="checkbox" value="sleep" name="hobby">睡觉
</p>

下拉框

select
option
例：

<select name="列表名称">
        <option value="china" >中国</option>
        <option value="usa" selected>美国</option>
        <option value="japen" ></option>
 </select>

按钮，图片按钮

input type=“button”
input type="image"
例：

   <p>
        <input type="button" name="btn1">按钮
    </p>
   <p>
        <input type="image" src="../../resources/image/下载.jpg">
    </p>

文本域

textarea
例：

<p>
    <textarea name="textarea"  cols="30" rows="10"></textarea>
</p>

特殊：邮箱，数字，url，滑动框

input type=“email”
input type=“url”
input type=“number”
input type="range"
例：

 /*邮箱验证*/
    <p>邮箱
        <input type="email" name="email" required pattern="	\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    </p>
   /*URL验证*/
    <p>url
        <input type="url" name="url">
    </p>
    /*数字*/
    <p>数字
        <input type="number" name="num" max="100" min="1">
    </p>
    /*滑块*/
    <p>音量
        <input type="range" name="voice" max="100" min="10">
    </p>

用户名

提交，重置

input type=“submit”
input type="reset"

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