HTML详解

1.网页基本标签

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习title>
head>
<body>



    <h1>一级标签h1>
    <h2>一级标签h2>
    <h3>一级标签h3>
    <h4>一级标签h4>
    <h5>一级标签h5>
    <h6>一级标签h6>
<hr/>


<p>你好p>
<p>再见了        亲爱的大海p>

<hr/>


你好<br/>
再见了       亲爱的大海 <br/>
<hr/>


粗体:<strong>i love youstrong> <br/>
斜体:<em>i love youem>
<hr/>

            <br/>
大于符号> <br/>
小于符号< <br/>
版权所有符号©
<hr/>
body>
html>

2.图像标签

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签title>
head>
<body>


<img src="../resources/image/chenshu.jpg" alt="陈数" title="悬停文字" width="300" height="300">
body>
html>

3.链接标签

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签title>
head>
<body>


<a href="https:www.baidu.com">点击我跳转到百度a><br>
<a href="图像标签.html">点击我跳转到图像标签页面a><br>
 
<a href="https:www.baidu.com">
    <img src="../resources/image/chenshu.jpg" alt="陈数" title="悬停文字">
a><br>
<a href="https:www.baidu.com" target="_blank">点击我_blank方式打开a><br>
<a href="https:www.baidu.com" target="_parent">点击我_parent方式打开a><br>
<a href="https:www.baidu.com" target="_self">点击我_self方式打开a><br>
<a href="https:www.baidu.com" target="_top">点击我_top方式打开a><br>


<hr>

<a name="mark">标记a> <br>
<a href="#mark">页面回到锚链接标记的地方a>

<hr>

<a href="mailto:[email protected]">点击联系我a> <br>
<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="点击给我发送消息" title="点击给我发送消息"/>
a>

body>
html>

4.行内元素和块元素

块元素:独占一行

行内元素:多个可以排在一行

5.列表标签

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签title>
head>
<body>

<ul>
    <li>javali>
    <li>pythonli>
    <li>运维li>
    <li>c/c++li>
ul>


<ol>
    <li>javali>
    <li>pythonli>
    <li>运维li>
    <li>c/c++li>
ol>

<dl>
    <dt>学科dt>
    <dd>javadd>
    <dd>pythondd>
    <dd>Linuxdd>
    <dd>c/c++ dd>
    <dt>位置dt>
    <dd>河南dd>
    <dd>北京dd>
    <dd>上海dd>
    <dd>深圳dd>
dl>
body>
html>

6.表格标签

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签title>
head>
<body>

<table border="1px">
    <tr>
        
        <td colspan="4">1.1td>
        <td>1.2td>

    tr>
    <tr>
        <td rowspan="2">2.1td>
        <td>2.2td>
        <td>2.3td>
        <td>2.4td>
        <td>2.5td>
    tr>
    <tr>

        <td>3.2td>
        <td>3.3td>
        <td>3.4td>
        <td>3.5td>
    tr>
table>
body>
html>

7.视频和音频标签

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频和音频标签title>
head>
<body>

<video src="../resources/test.mp4" controls autoplay>video>
<audio src="" controls autoplay>audio>
body>
html>

8.页面结构分析

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>

9.iframe

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframetitle>
head>
<body>

<iframe src="https:www.baidu.com" name="baidu" frameborder="0">iframe>
body>
html>

10.表单

  • input typet:text,password,radio,checkbox,file,button,image,submit,reset,range,seach 带验证--->email,url,num
  • 下拉列表:select option
  • 文本域:textAre
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单title>
head>
<body>
<h1>注册h1>

<form action="01基本标签.html" method="get">

<p>名字:<input type="text" name="username">p>
<p>密码:<input type="password" name="password">p>

    
    <p>性别:
        <input type="radio" name="sex" value="男" checked><input type="radio" name="sex" value="女">p>
    
    <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="听音乐" checked>听音乐
    p>
    
    <p>
        <input type="file" name="files">
    p>
    
    <p>滑块
        <input type="range" name="voice" min="0" max="100" step="10">
    p>
    <p>搜索:
        <input type="search" name="search">
    p>
    
    <p><input type="button" value="点击按钮">p>
    <p><input type="image" src="../resources/image/chenshu.jpg">p>
    <p><input type="submit" value="提交"> <input type="reset" value="重置">p>

    
    <p>下拉框:
        <select name="列表名称">
            <option value="china">中国option>
            <option value="us">美国option>
            <option value="eth" selected>瑞士option>
            <option value="beijing">北京option>
        select>

    p>
    
    <p>反馈:
        <textarea name="textarea" cols="50" rows="6">文本内容textarea>
    p>
    
form>

body>
html>

11.表单的应用

  • 隐藏域 hidden(通常用来传递一些默认值)
  • 只读 readonly
  • 禁用 disabled
  • placeholder:默认提示信息
  • required:非空判断
  • pattern:正则表达式判断(常用正则表达式)

 

你可能感兴趣的:(HTML详解)