HTML自学笔记

学习HTML

HTML：超文本标记语言(超本文标签语言)，可以通过它完成一些精美的页面，属于静态页面

javascript: 学会了可以实现页面动态 (可以让页面的元素动起来)

jsp: 可以实现动态页面( 实现了页面中数据的动态)

html基本结构

<!--DOCTYPE：文档类型，告诉浏览器使用什么规范-->
<!DOCTYPE html>
<!--页面最外层的结构-->
<html lang="en">
    <!--网页头标签-->
<head>
<!--  meta：描述性标签，用来描述网站的一些信息  -->
    <meta charset="UTF-8">
    <meta name="keyword" content="一个键值对，关键字，通过什么关键字可以搜索到这个网页">
    <meta name="description" content="网站描述信息">
    <!--title标签，可在标签里设置网页标题-->
    <title>html学习</title>
</head>
        <!--body标签，网页主体-->
<body>

</body>
</html>

常用标签

标题标签

h1~h6 ，自带换行加粗等功能 h1 最大 h6最小

<!-- 标题标签 具有自动换行功能-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

运行效果图：

段落标签

自带换行自带边距每个段落之间是有间隔的

<!--不使用段落标签-->
这是不使用段落标签：为了减少您可能的等待时间，您不妨先仔细阅读下面的常见问题。 查询物流状态，退货，
退余额等操作均可以登录聚美优品网站后自助进行，
无需联系客服。如果仍无法解决。请您在本页页底联系在线客服，或拨打聚美客服电话。小美谢谢您的理解！

<p>这是使用段落标签：为了减少您可能的等待时间，您不妨先仔细阅读下面的常见问题。 查询物流状态，退货，</p>
   <p>退余额等操作均可以登录聚美优品网站后自助进行，</p>
    <p>无需联系客服。如果仍无法解决。请您在本页页底联系在线客服，或拨打聚美客服电话。小美谢谢您的理解！</p>

运行效果图：

字体样式标签

粗体、斜体等等

<!--粗体、斜体-->
粗体：<strong>这是一个粗体！</strong> <br/>
斜体：<em>这是一个斜体！</em> <br/>

运行效果图：

注释和特殊标签

注释标签：页面的元素描述,不会再页面运行，主要用于介绍标签区域大体上的含义页面中的注释

<!--常用特殊符号-->
空      格 <br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格<br>

大于号：&gt; <br>
小于号：&lt; <br>
版权所有：&copy;版权所有pgrightwu

运行效果图：

单标签

基本上html标签都是双标签，就是一对，有开始也有结束，但是也有一些特殊的单标签。

<!--特殊单标签-->
换行标签,具备换行功能：<br>
水平线标签：<hr >
可以根据页面大小进行自定义缩放，也可以通过width属性设置宽度
<hr width="500px">
123456

运行效果图：

图像标签

123456          <br>
<!--图像标签 src:图像地址  alt：当图片加载失败时的替换文字  title:鼠标悬停提示文字  width:图像宽度  height：图像高度 -->
<img src="../resources/img/login-bg.jpg" alt="背景图片" title="海洋" width="1280" height="670">

运行效果图：

超链接标签

可以通过超链接定位本地某些页面 也可以定位到指定页面指定区域 也可以通过定位到某一个网站

href：指定跳转的地址
target：跳转方式
- _self：默认值，通过当前页面进行跳转（覆盖当前页面，可通过浏览器的回退来返回上一界面）
- _blank：浏览器总在一个新打开、未命名的窗口中载入目标页面。
- _parent: 使页面载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
- _top：使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口

<!--跳转本地页面-->
<a href="HTML1.html" target="">点我跳转</a><br>
<!--通过点击图片实现跳转-->
<a href="https://www.bilibili.com/" target="_self">
    <img src="../resources/img/bili.jpg" alt="B站" title="跳转到B站">
</a>
<!--跳转外部网站-->
<a href="https://www.bilibili.com/" target="_blank">点我跳转到B站</a>

运行效果：

锚连接

跳转页面的指定区域，可以是当前页面，也可以是其他页面

<!--页面指定位置设置锚得名称-->
<a name = "top"></a>

<!--锚链接-->
<a href="#top">回到顶部</a>

功能性链接

邮件链接：mailto

<a href="mailto:pgrightwu@qq.com">点击联系我</a>

qq推广链接：

<!--QQ推广-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="点击联系我" title="点击联系我"/>
</a>

列表标签

有序列表

<ol>   //ol:order list:有序列表
    <li>java</li>
    <li>html</li>
    <li>python</li>
    <li>GO</li>
    <li>C/C++</li>
</ol>

运行效果：

无序列表

<!--ul:无序列表-->
<ul>
    <li>java</li>
    <li>html</li>
    <li>python</li>
    <li>GO</li>
    <li>C/C++</li>
</ul>

运行效果：

自定义列表

<!--自定义列表-->
<dl>
    <dt>   //dt：类目标题
      学科
    </dt>
    <dd>Java</dd>
    <dd>python</dd>
    <dd>C/C++</dd>
    <dd>GO</dd>
    <dd>html</dd>
</dl>

运行效果：

表格标签

table：表格标签

tr：行标签

td：列标签

<table border="1px"><!--table:表格标签 border:设置边框-->
    <tr>            <!--tr:表示一行-->
        <td>姓名</td><!--td:表示一列-->
        <td>性别</td>
        <td>年龄</td>
        <td>地址</td>
    </tr>
    <tr>
        <td>wu</td>
        <td>男</td>
        <td>23</td>
        <td>西安</td>
    </tr>
    <tr>
        <td>liu</td>
        <td>女</td>
        <td>23</td>
        <td>南京</td>
    </tr>
</table>

运行效果图：

colspan:跨列

<table border="1px"><!--table:表格标签 border:设置边框-->
    <tr>            <!--tr:表示一行-->
        <td colspan="3">姓名</td><!--td:表示一列  colspan:跨列-->
        <td>性别</td>
        <td>年龄</td>
        <td>地址</td>
    </tr>
    <tr>
        <td>wu</td>
        <td>男</td>
        <td>23</td>
        <td>西安</td>
    </tr>
    <tr>
        <td>liu</td>
        <td>女</td>
        <td>23</td>
        <td>南京</td>
    </tr>
</table>

效果：

rowspan：跨行

<table border="1px"><!--table:表格标签 border:设置边框-->
    <tr>            <!--tr:表示一行-->
        <td colspan="3">姓名</td><!--td:表示一列  colspan:跨列-->
        <td>性别</td>
        <td>年龄</td>
        <td>地址</td>
    </tr>
    <tr>
        <td rowspan="2">wu</td>
        <td>男</td>
        <td>23</td>
        <td>西安</td>
    </tr>
    <tr>
        <td>liu</td>
        <td>女</td>
        <td>23</td>
        <td>南京</td>
    </tr>
</table>

效果：

媒体标签

video：视频标签

<!--video:视频标签   src：资源目录  controls:设置一个进度条  autoplay：自动播放-->
<video src="../resources/video/1.mp4" controls autoplay></video>

其中src属性是必须有的，controls可设置一个进度条进行播放操作，没有设置controls在页面中不能进行视频播放，autoplay：自动播放

audio：音频标签

<audio src="../resources/audio/kobe.mp3" controls autoplay></audio>

页面结构分析

iframe内联框架

<!--src:目标路径 frameborder：设置边框宽度 height：设置高度 width：设置宽度-->
<iframe src="html3.html" frameborder="0" height="800" width="1000" ></iframe>

运行效果：

<!--src:目标路径 frameborder：设置边框宽度 name：设置一个标识名 height：设置高度 width：设置宽度-->
<iframe src="html3.html" name="iframe" frameborder="0" height="800" width="1000" ></iframe>
<!--可以使用a标签的target属性设置在哪里打开跳转的页面  在iframe中进行跳转-->
<a href="https://www.bilibili.com/" target="iframe">点我跳转到B站</a>

效果：

点击跳转之前

点击跳转之后

表单标签

因为p标签属于块元素（具备自动换行），所以表单内单个标签使用

(p标签)包住显得美观

<form action="" method="post" name="form1">

        <p>姓&nbsp;名 ：<input type="text" ></p>
        <p>密&nbsp;码 ：<input type="password"></p>
    <P>
        <input type="submit" >
        <input type="reset">
    </P>
</form>

效果：

action：提交地址（可以是一个页面，也可以是后台控制器）
method：提交方式（get：提交的表单信息会显示在地址栏 post：提交的信息不会显示在地址栏（一般采用post提交））
name：表单标识名称

单选框

*需要给每一个单选框设定一个name属性，指定其为哪个组的元素才能只选择一个元素！

<p>
    <!--    type：指定标签类型  value：单选框的值  name：组的名称，
            同名称的单选框被认为是一个组的，只能选中一个  checked: 选中状态，true为选中，false为不选中   -->
    性别：<input type="radio" value="boy" name="sex" checked="true">男
         <input type="radio" value="girl" name="sex">女
</p>

运行效果：

按钮和多选框

<input type="button" name="btn1" value="确定">
<input type="image" src="../resources/img/bili.jpg" name="btn2" >

普通按钮：

name：按钮名称
value：按钮在页面显示的值

图像按钮：

src：图片路径
name：按钮名称

多选框：

<p>爱好：
    <input type="checkbox" name="hobby" value="篮球">篮球
    <input type="checkbox" name="hobby" value="足球">足球
    <input type="checkbox" name="hobby" value="排球">排球
    <input type="checkbox" name="hobby" value="田径">田径
    <input type="checkbox" name="hobby" value="网球">网球
</p>

name：多选框名称
value：多选框的值（提交到后台的值！）

文件域
```
<p>
    文件：<input type="file" name="file" >
</p>
```
运行效果：

以上表单常用标签都是使用input关键字，下列表单常用标签不使用input关键字
下拉框
```
    国家：<select name="Country" id="Country">
        <option value="China">中国</option>
        <option value="US">美国</option>
        <option value="UK">英国</option>
        <option value="India" selected >新加坡 </option>
    </select>
```
- select：下拉框标签关键字
- option：下拉框选项
- name：下拉框名称
- id：下拉框id（css中id选择器会用到）
- value：选中的选项的值（传入后台的值）
- selected：选中状态，不写selected默认选中第一个选项
效果图：
文本域
```
    备注：<textarea name="text" id="text" cols="30" rows="10"></textarea>
```
- textarea：文本域关键字
- name：文本域名称
- id：文本域id
- cols：列数
- rows：行数
运行效果：
搜索框、滑块、验证（html5新特性）

搜索框：
```
<p>
    搜索：<input type="search" name="search">
</p>
```
运行效果图：

滑块：
```
<p>
    音量：<input type="range" name="voice" min="0" max="100" step="1">
</p>
```
- min：最小值
- max：最大值
- step：一次滑动几个单位
运行效果图：

常用表单属性：
- 隐藏域：hidden
- 只读：readonly
- 禁用：disabled
初级验证属性：
- 提示信息：placeholder
- 非空判断：required
- 正则表达式：pattern（常用正则表达式：https://www.jb51.net/article/76901.htm）
CSS
外部样式
通过link标签引入

外部样式
通过link标签引入

<link rel="stylesheet" href="地址" type="text/css">

3.内部样式

     <style tyle = "text/css">
            属性：值，
            属性：值，
            ......
     </style>

***必须在head里面写！**
 行内样式
      <button style="">:在style里面写属性

内部优先级高于外部

行内样式》内部样式》外部样式

交集和并集

并集

.c1，#d1，.e1{ }

交集（两部分：1、标签选择.2、id或者class）

li.c2 标签.id{ 属性：属性值；属性：属性值；。。。。。}

posted @ 2020-12-03 10:55 pgrightwu 阅读(110) 评论(0) 收藏举报

刷新页面返回顶部

pgrightwu

HTML自学笔记

学习HTML

html基本结构

常用标签

标题标签

段落标签

字体样式标签

注释和特殊标签

单标签

图像标签

超链接标签

锚连接

列表标签

表格标签

媒体标签

页面结构分析

iframe内联框架

表单标签

CSS

交集（两部分：1、标签选择.2、id或者class）

公告