html学习笔记

学完html基本以后,现在对html知识做以下总结:

大纲

  1. 初识html以及W3C
  2. 网页基本标签
  3. 图像,超链接,网页布局
  4. 列表,表格,媒体元素
  5. 页面结构分析和iframe内联框架
  6. 表单以及表单的初级应用
  7. 表单的初级验证

以上内容来源于bilibiliup狂神说

初识html以及w3c

html

html,即超文本标记语言(Hyper Text Markup Language)

作为"超文本",其中可以包括:文字,图片,音频,视频,动画等...

目前html最新版本为html5.0

w3c

World Wide Web Consortuim(世界万维网联盟)

w3c成立于1994年,是web计数领域最具权威和最有影响力的中立性技术标准机构

w3c标准包括:

  • 结构化标准语言(html,xml)
  • 表现标准语言(css)
  • 行为标准语言(DOM,ECMAScript)

网页基本标签

网页基本标签

网页基本标签可以分为以下几类:

  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号
    <!--网页基本标签
        以下依次是:
            1. 标题标签
            2. 段落标签
            3. 换行标签
            4. 水平线线标签
            5. 字体样式标签
            6. 注释和特殊符号
    -->
    
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h6>六级标题</h6>


    <br/>
    <p>这是一个段落</p>

    <br/>
    这里有一个换行标签-->><br><<--这里有一个换行标签

    <br>
    下面是水平线
    <hr/>

    <br/>
    <strong>This is BOLD FACE.(to use "strong" label)</strong>

    <br/>
    <em>This is italic face.(to use "em" label)</em>
    
    <!--这是注释标记-->
    
    <!--特殊符号
        以下主要介绍的特殊符号:
            1. 空格
            2. 大于/小于号
            3. 版权符号
    -->
    <br/>
    This is a "space"--->>&nbsp;<<---This is a "space" (to use " &nbsp " with a ";" after it)
    <br/>
    Greater than sign: &gt; (to use & and"gt;")
    <br/>
    Less than sign: &lt; (to use & and "lt;")

开放标签和闭合标签

标签大致可以分为这两类:开放和闭合标签
	开放标签是成对出现的,通过前后两个标签用来标记一个内容,后一个标签内的"单词"前面要加一个斜杠表示后标签,例如:
		<head> (这个地方可以写内容) </head>
	闭合标签,只有一个标签,所有的内容写在标签内部,为工整和保险起见,建议所有闭合标签后面>前面加一个斜杠表示标签结束
		<meta ...(属性内容) />

网页的基本信息

基本信息也是通过标签表示的:

1. <DOCTYPE>标签
	用于告诉浏览器以下代码使用的是什么规范
	
2. <html></html>标签
	用于标记整个html文件范围
	
3. <head></head>标签
	用于表示网页头部

4. <title></title>标签
	表示网页名
	
5. <body></body>标签
	表示网页主体

6. <meta>标签
	用于描述网页信息,这个标签一般也在<head>标签之下,是闭合标签

这里对meta标签做一些补充:

目前见到的meta的三种属性:charset;keyword;description

<!-- charset表示网页使用的字符集,推荐(也是默认)为:UTF-8 默认包含(指idea创建新的html文件的时候) -->
<meta charset = "UTF-8">

<!-- keyword 用于表示网页的keyword信息 默认不包含 -->
<meta name = "keyword" content = "This is the keyword info of this web">

<!-- descripton 用于表示网页的描述信息 默认不包含 -->
<meta name = "description" charset = "This is description info of this web.">

图像,超链接和网页布局

图像

绝对路径和相对路径:

用
	../
可以在相对路径中表示上一级目录

插入图像的标签:

<img src = "这里是图片的路径" alt = "如果图片加载失败,就会显示这里的字">

下面是实例:

<img src = "../../resources/image/img1.jpg" alt = "如果图片加载失败就会显示这几个字" width="633" height="421">

超链接

超链接的分类

超链接有三种:

  • 页面间链接(从一个页面到另一个页面)
  • 锚链接(链接到一个预先定好的锚点)
  • 功能性链接

链接

不论是上面的哪一种链接,链接的标签是一定的:

<a href = "path or URL">text to show to the user.</a>

页面间链接

页面间链接是用来跳转到页面的,所以只要在上面的标签中的属性href下赋值为某个网址或者同项目下另外一个网页的相对路径即可,通过点击展示文字来达到跳网页的作用,比如:

<!--这样写可以跳到百度-->
<a href = "https://www.baidu.com">click me to Baidu search.</a>

或者:

<!--这样写可以跳到同文件夹下的summaryDemo.html的页面-->
<a href = "summaryDemo.html">text to show to the user.</a>

锚链接

锚链接可以理解成是链接和链接之间的跳转,也就是把链接当作锚点:

比如:

在summary页面下的第一行有如下链接:

<a href = "" id="anchor"> 这是一个用来做锚的超链接,用来给锚链接做标记</a>

而在summary页面底端有这样一个链接:

<!--这样写可以返回定位在该页面页首的锚点,anchor是目标节点的id(或者name),注意在id前面的井号-->
<a href = "#anchor">返回页首的锚节点</a>

当点击这个链接时,会直接跳转到页首

再如:

在summaryDemo页面中有这么一行:

<a href = "" id="anchor" > 这是一个用来做锚的超链接,用来给锚链接做标记</a>

而在summary中有这么一行:

<!--这样写可以返回到辅助页面的锚节点-->
<a href = "summaryDemo.html#anchor">前往辅助页的锚节点</a>

点击这个链接,则会进入到辅助页面的锚节点

功能性链接

功能性链接暂时学了两种:

第一种是邮件链接,在href中添加mailto标记,并写上目标邮箱即可

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

第二种是QQ链接,主要是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::51" alt="点这里加我QQ" title="点这里加我QQ"/></a>

"QQ推广"网址:

https://shang.qq.com/v3/index.html

其他

打开网页的方式和图片做链接

列表,表格和媒体元素

列表

列表可以分为有序列表和无序列表:

有序列表

有序列表由"ol"标签(表示有序列表)和"li"标签(表示这是选项)组成

<!--有序列表用ol标签
    列表内容使用li标签
-->
<ol>This is an order list.
    <li>option1</li>
    <li>option2</li>
    <li>option3</li>
    <li>option4</li>
</ol>

无序列表

无序列表由"ul"标签(表示无序列表)和"li"标签(表示列表选项)组成:

<!--无序列表用ul标签-->
<ul>This is an inorder list.
    <li>option1</li>
    <li>option2</li>
    <li>option3</li>
    <li>option4</li>
</ul>

列表混用

在列表中嵌套链表即可(但是idea会弹出警告)

<ul>This is an inorder list.
    <li>option1</li>
    <li>option2</li>
    <li>option3</li>
    <li>option4</li>
    <ol>This is an order list.
    	<li>option1</li>
    	<li>option2</li>
    	<li>option3</li>
    	<li>option4</li>
	</ol>
</ul>

表格

表格的标签是"table",在表格标签中间,用"tr"表示一行,用"td"表示有一列

下面是一个四行五列的表格(border表示行列分割线的宽度)

    <!--表格-->
    <table border="1px">
        <tr>
            <td>1.1</td>
            <td>1.2</td>
            <td>1.3</td>
            <td>1.4</td>
            <td>1.5</td>
        </tr>
    
        <tr>
            <td>2.1</td>
            <td>2.2</td>
            <td>2.3</td>
            <td>2.4</td>
            <td>2.5</td>
        </tr>
    
        <tr>
            <td>3.1</td>
            <td>3.2</td>
            <td>3.3</td>
            <td>3.4</td>
            <td>3.5</td>
        </tr>
    
        <tr>
            <td>4.1</td>
            <td>4.2</td>
            <td>4.3</td>
            <td>4.4</td>
            <td>4.5</td>
        </tr>
    </table>

当然也可以有宽行合并:

<!--表格-->
<table border="1px">
    <tr>
        <td rowspan="3">1.1跨行</td>
        <td colspan="4">1.2跨列</td>
    </tr>

    <tr>
        <td>2.2</td>
        <td rowspan="2" colspan="2">2.3同时跨行跨列</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>

    <tr>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </tr>

    <tr>
        <td>4.1</td>
        <td>4.2</td>
        <td>4.3</td>
        <td>4.4</td>
        <td>4.5</td>
    </tr>
</table>

媒体元素

音频

音频的标签是"audio"

<audio src = ""></audio>

以下是一个使用范例:

<!--音频标签-->
<audio src = "../../resources/audio/testAudio.mp3"></audio>

可以加上controls,和autoplay标签,前者用来使音频可控,后者用来使音频自动播放

比如:

    <!--音频-->
    <audio src = "../../resources/audio/testAudio.mp3" controls autoplay></audio>

视频

视频标签使用的是video

<!--音频和视频
    src:资源路径
    controls:控制条
    autoplay:自动播放
-->
<video src = "../../resources/video/testVideo.mp4" controls autoplay  width="1280" height="720"></video>

页面结构分析和ifame内联框架

页面结构分析

页面结构

元素名 描述
header 标题头部区域的内容(用于页面或者页面中的一块区域)
footer 标记脚部分区域的内容
section web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用(常见于侧边栏)
nav 导航类辅助内容

范例:

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>页面结构学习</title>
</head>
<body>

    <header><h2>网页头部</h2></header>

    
    <section><h2>网页主体</h2></section>
    

    <footer><h2>网页脚部</h2></footer>
</body>
</html>

iframe内联框架

iframe内联框架其实就是在网页中再开一个网页

用法格式如下:

<iframe src = "path" name = "mainFrame"></iframe>
		引用页面地址		框架标识名

下面是一个实例:

<!--iframe内联框架
    src:地址
    width:
    height:
    name:
-->
<iframe src = "https://www.bilibili.com/video/BV1E4411H73v" name = "hello?" frameborder = "5" width="1000px" height="800"></iframe>

表单及表单的应用

表单

表单可以理解成是一个单子,而这个单子是可以在网页间或者网页和服务器间传输数据的

表单的内容多样,而表单本身的结构是:

<form action = ""></form>

其中,action表示表单传输的目标位置

表单提交的位置可以是网站,也可以是一个请求处理地址

另外,表单还有一个"method"属性,这个属性表示表单的传输方法

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

其中,method有两个模式:post和get

区别:

method:post或者get
    两种提交方式:
    get:我们可以在url中看到我们提交的信息,不安全,但是效率高
    post:不会在url中显示提交信息,很安全,可以传输大文件

表单的内容

表单的内容一般都是"input"标签

<input type = "text">

而为了工整起见,一般会套上换行标签:

<p>
    <input type = "text">
</p>

"input"标签中的属性有很多种类,以下是一个汇总:

属性 说明
type 指定元素类型,包括text,password,checkbox,radio,submit,reset,file,hitten,image和button,其中默认为text
name 指定表单元素的名称
value 元素的初始值,type为radio时必须指定一个指
size 指定表单元素的初始宽度,当type为text或者password时,表单元素的大小以字符为单位,对于其他类型,宽度以像素为单位
maxlength type为text或者password时,输入的最大字符数
checked type为radio或者checkedbox时,指定按钮是否是被选中的

以下表单包括了以上涉及的所有内容,包括各种type的类型:

 <!--表单form
        表单提交的位置可以是网站,也可以是一个请求处理地址
        method:post或者get
            两种提交方式:
            get:我们可以在url中看到我们提交的信息,不安全,但是效率高
            post:不会在url中显示提交信息,很安全,可以传输大文件
-->

    <form action = "1.第一个网页.html" method="get">
        
        <!--文本输入框:  <input type = "text"> -->
        <p>name: <input type="text" name = "username" value="admin" readonly></p>
        
        <!--密码框: <input type = "password">-->
        <p>password:(已经隐藏了) <input type="password" name = "pwd" hidden value="default"></p>
        
        
        <!--单选框标签radio
            value表示单选框的值
            name:表示组,相同name的在一组,一个组内只能选择一个
        -->
        <p>
            <input type = "radio" value="boy" name = "sex" sele checked/>男
            <input type = "radio" value="girl" name = "sex"/>女
            <input type = "radio" value="girl" name = "sex" disabled/>外星人(放弃吧我知道你不是)
        </p>
        
        <!--多选框
            <input type = "checkbox">
        -->
        <p>
            <input type = "checkbox" value = "sleep" name = "hobby">睡觉<br/>
            <input type = "checkbox" value = "code" name = "hobby">敲代码<br/>
            <input type = "checkbox" value = "game" name = "hobby">打游戏<br/>
            <input type = "checkbox" value = "guitar" name = "hobby">吉他<br>
        </p>
        
        <!--按钮-->
        <p>
            按钮:<input type = "button" name = "btn" value = "点击边长">
            <br/>
            图片按钮:
            <br/>
            <input type = "image" src="../resources/image/img1.jpg" width="50px" height="30px">
        </p>
        
        <!--下拉框,列表框
        -->
        <p>
            下拉框:
            <select name = "列表名" >
                <option value = "选项值1">中国</option>
                <option value = "选项值2">美国</option>
                <option value = "选项值3" selected>日本</option>
            </select>
        </p>
        
        <!--文本域
            rows:列
            col:行
        -->
        <p>
            <textarea name = "textarea" id = "text1" cols = "30" rows = "10">This is a text area.</textarea>
        </p>
        
        <!--文件域-->
        <p>
            <input type = "file" name = "files" >
            <input type = "button" name="upload" value="上传">
        </p>
        
        <!--邮件验证-->
        <p> 邮箱:
            <input type = "email" name="mail">
        </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" name="voice" min="0" max="100">
        </p>
        
        <!--搜索框-->
        <p>搜索:
            <input type = "search" name="search">
        </p>
        
        <!--增强鼠标可用性-->
        <p>
            <label for = "mark">你点我试试?</label>
            <input type = "text" id="mark">
        </p>
        
        <br>
        <!--提交按钮-->
        <input type="submit">
        
        <!--重置按钮 用来重置/清空表单-->
        <input type="reset" value = "清空表单">
    </form>

表单的初级验证

<!--表单的初级验证
        1. 在前端验证减轻服务器压力
        2. 保证数据的安全性
            
    常用表单验证方式:
        1. placeholder 默认提示信息
        2. require 非空判断表示元素不能为空
        3. pattern 正则表达式
-->
<p>name: <input type="text" name = "username" placeholder="default info: it can't be blanked" required ></p>
<p> 正则表达式邮箱:
    <input type = "email" name="mail" pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" required>
</p>
posted @ 2021-07-30 21:48  zht1702  阅读(140)  评论(0)    收藏  举报