[前端 01] HTML初级入门

HTML入门

1. 初识

通常在项目下创建一个resource文件加，下设video， audio，image文件夹存放资源

Hyper text markup language 超文本标记语言：因为有图片，音乐和视频，所以叫超文本。

W3C标准：

结构化标准语言（HTML，XML）

表现标准语言（CSS）

行为标准（DOM， ECMAScript（JS））

IDEA浏览器设置：Settings-> browser 设置浏览器地址

开放标签：头标签<body>

闭合标签：尾标签</body>

子闭合标签：不成对出现的<hr/>

<!--注释长这样-->
<!--告诉浏览器用什么规范，默认用html-->
<!DOCTYPE html>
<html lang="en">
<!--头部-->
<head>
    <!--meta为描述性标签，用来描述网站的信息 -->
    <!--如编码方式，SEO优化用的标签定义和网页描述等-->
    <meta charset="UTF-8">
    <meta name = "keywords" content="111">
    <title>Title</title>
</head>
<!--网页主体-->
<body>
</body>
</html>

2. 网页基本符号

  1. body中：
<!--标题标签-->
<h1> </h1>
<!--段落标签-->
<p></p>
<!--换行标签-->
<hr/>
<!--水平线标签-->
<br/>
<!--字体样式标签-->
粗体：<strong></strong>
斜体：<em></em>
<!--注释与特殊符号-->
特殊符号语法： & 代表字母 ;
普通方式，多个空格只显示一个，
要添加多个空格进去：&nbsp;
版权的带圈C：&copy;
大于，小于号： &gt; &lt;
  1. 图片格式：
<img src = "" alt = "text" title = "text" width,height>
<!-- src资源，alt为如果不显示图片时显示的文字，title为鼠标悬停时显示的文字 -->

  1. 超链接：

    • 页面间链接

      <a href=" 要跳转到的界面" target = "表示在哪个界面打开">要点击的地方的文字或者图片</a>
<!--常见的target值： _blank（新标签）， _self(在自己的网页中打开)

    • 锚链接（页内位置，或者跳转到另一个页面的某个位置）

      eg:回到顶部：

      1. 顶部创建锚标记
      2. 页末跳转到标记处（#加上标记名称）
      <a name = "top"></a>
<a href  = "#top">回到顶部</a>

      夸界面：在href的链接后面加上#定位到相应的标记处

      <a href = "first.html#top">点击跳转</a>

    • 功能性链接

      邮件链接：mailto关键字

      <a href = "mailto:邮箱号">点击联系我</a>

  2. 行内元素和块元素：

    行内元素：不会自己换行， em， strong等

    块元素：P，H标签的元素，可以自己换行

  3. 列表：

    <!--1. 有序列表：-->
<ol>
    <lt></lt>
    <lt></lt>
</ol>
<!--2. 无序列表-->
<ul>
    <li></li>
    <li></li>
</ul>
<!--3. 自定义列表（在网站底部使用）-->
<!-- dl定义列表，dt为列表标题，dd为列表的每行-->
<dl>
    <dt></dt>
    <dd></dd>
</dl>

  4. 表格：

    1. 基本
    <table border="1px">
    <tr><!--有多少行就放多少个tr-->
        <td>数据</td>
    </tr>
</table>

    1. 跨行，跨列

      <table border="1px">
    <tr><!--有多少行就放多少个tr-->
        <td colspan = "要跨的列数">数据</td>
        <td rowspan = "要跨的航数">数据</td>
    </tr>
</table>

  5. 媒体元素

    <!-- src ：数据源，属性：autoplay（自动播放） controls（显示）-->
<video src="src" autoplay controls></video>
<audio src="src" autoplay controls></audio>

3. 网页body部分组成

元素名 描述
header body中的头部
footer body中的脚部
section web页面中独立的一块
article 独立的文章内容
aside 侧边栏
nav 导航类辅助内容

4. iframe内联框架

在网页的一部分显示别的网页

  1. 当src有网址时，直接打开网址
<iframe src="" name="标记" frameborder="0" height="" width=""></iframe>
<a href="网址资源" target="标记"></a>
  1. 当src没有网址，属性name定义了标记，当点击超链接时，超链接中的网址资源通过target找到标记出显示。

5. 表单元素(必须写name属性)

1. 基本

get:效率高，不安全，URL可以看到提交的内容

post：效率低，URL不可见，相对安全，可以传输大文件

查看post包的方法：审查元素--> Network--> Headers,找到form data查看

<form action="" method=""> //action写要提交到的地方，method选post和get
   <p>名字 <input type="text" name="username"></p> //type中选择文本，密码，提交还是重置
   <p>密码 <input type="password" name="psw"></p>
   <p>
       <input type="submit">
       <input type="reset">
   </p>
</form>

2. input元素

input标签的属性：

属性 说明
type 指定元素类型：text,password,sublit,reset,checkbox,radio,button,hidden,file,image
name 指定元素的名称，后台通过名称获取内容
value 初始值，radio（多选框必须有初始值）
size 表示为初始宽度，text和password以字符为单位，其他以像素为单位
maxlength 可输入的最大字符数
checked radio和checkbox中，指定是否被选中

  1. Radio单选框(name表示一个组，名字相同为同一个组)

    <p>性别
    <!--必须的三个参数：type，name必须相同，否则可多选，value设置传递的值，记得在<>外面写上要显示的值-->
    <input type="radio" name="sex" value="M">M
    <input type="radio" name="sex" value="F">F
</p>

  2. Checkbox(checked表示默认值)

    <p><!-- 和单选框一样，都需要三个属性-->
    <input type="checkbox" value="first" name="hobby">爱好1
    <input type="checkbox" value="second" name="hobby">爱好2
    <input type="checkbox" value="third" name="hobby" checked>爱好3
    <input type="checkbox" value="fourth" name="hobby">爱好4
</p>

  3. Button

    <!-- 四种按钮，button，img，submit，reset-->
<p>
    <input type="button" value="按钮" name="button">
</p>

3. 其他元素

  1. 下拉菜单：

    select元素，里面用option定义，selected表示默认值

    <p>下拉菜单：
        <select name="Countries">
            <option value="firstone">中国</option>
            <option value="secondone">美国</option>
            <option value="thridone" selected>英国</option>
            <option value="fourthone">日本</option>
        </select>
    </p>

  2. 文本框：

cols和rows来定义文本框大小

<p>文本框：
    <textarea name="largeplace" cols="30" rows="10">默认值</textarea>
</p>

  1. 文件上传：

    <p>
    <input type="file" name="files" >
</p>

  2. 简单检查(点击submit之后，检查是否合格)，email，还有 type = "url"

    <p>输入EMAIL:
    <input type="email" name="checkemail" >
</p>

    type="number":显示一个数字框，有上下小按钮

    <input type = "number" name = "num" min="1" max = "10" step = "2">

    type= "search":搜索框，有个小叉

    type="range":滑块，可以用来设置音量

6. 表单应用

  1. 三个属性：只读，禁用，隐藏（通常和value默认值一起使用）

    readonly disabled hidden， 直接添加到表单属性中

  2. 实现点击前面的文字就激活后面文本框中的输入符号

    label标签包裹前面的文字，for指向标签，input框中写上id，

    <p>
    <label for="id_input">输入框</label>
    <input type="text" id="id_input">
</p>

7. 表单简单检查

  1. placeholder(提示输入)

    <input type = "text" name = "user" placeholder="请输入用户名">

  2. required（非空判断，带星号必填）

    <p>用户名*：
    <input type = "text" name = "user" required>
</p>

  3. pattern（正则表达式判断）pattern属性，后面添加正则表达式

posted @ 2021-11-15 21:51  Roy2048  阅读(109)  评论(0)    收藏  举报