Green_hand001
Green_hand001

前端HTML学狂神笔记

HTML

什么是HTML

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

超文本包括：文字，图片，音频，视频，动画等

w3c标准

WOrld Wide Web Consortium(万维网联盟)

成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

W3C标准包括

  1. 结构化标准语言（HTML、XML）

  2. 表现标准语言（CSS）

  3. 行为标准（DOM、ECMAScript）

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l8BX4lDq-1590727946210)(C:\Users\A450\AppData\Roaming\Typora\typora-user-images\image-20200528101643944.png)]



<html lang="en">

<head>


    <meta charset="UTF-8">
    <meta name="keywords" content="跟狂神学Java">
    <meta name="description" content="可以学习java">

    <title>我的第一个网页title>
head>
<body>
Hello，World！
body>
html>

网页基本标签

  • 标题标签 标题

  • 段落标签

    一段话

  • 换行标签 一句话

  • 水平线标签

  • 字体样式标签 粗体 粗体 斜体

  • 注释和特殊符号 

    
空        格：
大于号>
小于号<
©版权符号

图像标签

常见的图像格式

JPG

GIF

PNG

BMP

<img src="../resources/image/1.jpg" alt="我的图片" title="悬停文字" width="1366" height="768">

alt 图片加载失败会显示的内容“”。

链接标签

超链接

页面间链接

	从一个页面链接到另一个页面

锚链接

功能性链接

<body>

<a name="top">顶部a>

<a href="https://www.baidu.com" target="_blank">点击调转到百度
    <img src="../resources/image/1.jpg" alt="图片加载失败">

a>

<a href="#top">回到顶部a>
<a name="down">底部a>

<a href="mailto:[email protected]">点击联系我a>

body>
html>

行内元素和块元素

块元素：无论内容有多少，元素自己独占一行

例如：

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行

例如：

列表标签

什么是列表

​ 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。

列表的分类：

  • 无序列表
  • 有序列表
  • 定义列表

表格


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习title>
head>
<body>


<table border="1px">
    <tr>

        <td colspan="4">1-1td>
    tr>
    <tr>

        <td rowspan="2">2-1td>
        <td>2-2td>
        <td>2-3td>
        <td>2-4td>
    tr>
    <tr>
        <td>3-1td>
        <td>3-2td>
        <td>3-3td>
    tr>
table>
body>
html>

视频和音频

    <title>视频和音频学习title>
head>
<body>

<video src="../resources/video/2.mp4" controls autoplay>video>
<audio src="../resources/audio/3.mp3" controls autoplay>audio>
body>
html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IPfs3T9M-1590727946213)(C:\Users\A450\AppData\Roaming\Typora\typora-user-images\image-20200528154532012.png)]

  <title>页面结构分析title>
head>
<body>
<header>
    <h2>网页头部h2>
header>
<section>
    <h2>网页主体h2>
section>
<footer>
    <h2>网页脚步h2>
footer>

<nav>nav>
body>
html>

iframe内联框架

  <title>内联框架iframetitle>
head>
<body>

<iframe src="" name="change" frameborder="0" width="1000" height="800">点击跳转学习javaiframe>
<a href="https://www.baidu.com" target="change" >点击跳转a>


body>
html>

表单

    <title>表单学习title>
head>
<body>
<h1>注册h1>

<form action="10.表单.html" method="post">

    <p>名字：<input type="text" name="username"/>p>
    <p>密码：<input type="password" name="pwd"/>p>
    <p><input type="submit">
        <input type="reset">p>


form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vFjtzWJo-1590727946221)(C:\Users\A450\AppData\Roaming\Typora\typora-user-images\image-20200528164628934.png)]

    <title>表单学习title>
head>
<body>
<h1>注册h1>

<form action="10.表单.html" method="post">

    <p>名字：<input type="text" name="username" value="帅" maxlength="8" size="10"/>p>
    <p>密码：<input type="password" name="pwd"/>p>

    <p>
        <input type="radio" value="boy" name="sex"/>男
        女

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


form>

body>
html>

单选框多选框


    <p>
        <input type="radio" value="boy" name="sex"/>男
        女

        <input type="checkbox" value="sleep" name="hobby"/>睡觉
        <input type="checkbox" value="talk" name="hobby"/>聊天
        <input type="checkbox" value="game" name="hobby" checked/>游戏
        <input type="checkbox" value="eat" name="hobby"/>吃东西
    p>

按钮


    <p><input type="button" name="btn1" value="按钮名字"/>
        <input type="image" src="resources/image/1.jpg"/>
    p>
    <p><input type="submit">
        <input type="reset">p>

下拉框


<p>国家
    <select name="列表名称" >
        <option value="china" selected>中国option>
        <option value="us">美国option>
        <option value="agt">阿根廷option>
        <option value="md">缅甸option>
    select>
p>

文本域、文件域


    
反馈：

功能验证


    <p><input type="email" name="email">p>

    <p><input type="url" name="url">p>

    <p><input type="number" name="num" max="100" min="1" step="1">p>

    <p>音量<input type="range" name="voice" max="100" min="0" step="2" >p>

    <p><input type="search" name="search">p>

表单的应用

只读：value=“admin”（先给一个默认值） readonly

禁用：disabled

隐藏：hidden

单词：description 描述 content内容


   <p> <lable for="mark">点击lable>
       <input type="text" id="mark"/>
   p>

表单初级验证

placeholder="请输入用户名"
required 非空判断
pattern 正则表达式

基础汇总



<html lang="en">

<head>

    <meta name="description" content="和狂神学java">
    <meta charset="UTF-8">
    <title>HTML小练习title>
head>
<body>
<a name="top">顶部a>

<p>
    <b>你好，世界b><br/>
    <em>i      love youem>

    ©赵东
p>

<hr/>

<img src="../resources/image/1.jpg" alt="我的图片" title="悬停文字" width="800" height="600">


<a href="https://www.baidu.com" target="_blank">点击跳转百度a>

<a href="mailto:[email protected]">点击联系我a>

<ol>
    <ul>Javaul>
    <ul>C++ul>
    <ul>运维ul>
    <ul>前端ul>
ol>

<ul>
    <li>Javali>
    <li>C++li>
    <li>运维li>
    <li>前端li>

ul>

<dl>
    <dt>学科dt>
    <dd>语文dd>
    <dd>数学dd>
    <dd>英语dd>
    <dd>自然dd>
dl>

<table border="1px">
    <tr>

        <td colspan="4">学习java td>
    tr>
    <tr>

        <td rowspan="2">javatd>
        <td>前端td>
        <td>数据库td>
        <td>Tomcattd>
    tr>
    <tr>
        <td>框架td>
        <td>面向对象td>
        <td>微服务td>
    tr>
table>

<hr/>
<video src="../resources/video/2.mp4" controls autoplay>video>
<audio src="../resources/audio/3.mp3" controls autoplay>audio>
<a href="#top">回到顶部a>

<header>
    <h2>网页头部h2>
header>
<section>
    <h2>网页主体h2>
section>
<footer>
    <h2>网页脚部h2>
footer>

<nav>nav>
<hr>

<iframe src="" name="change" frameborder="0" width="1000" height="800">点击跳转学习javaiframe>
<a href="https://www.baidu.com" target="change" >点击跳转a>

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

    <p>请注册账号p>
    <p>名字：<input type="text" name="username" value="帅哥" size="30" maxlength="20" placeholder="请输入用户名" >p>
    <p>密码：<input type="password" name="pwd">p>

    <p><input type="radio" value="boy" name="sex" checked>男p>
    <p><input type="radio" value="girl" name="sex">女p>

    <p><input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="talk" name="hobby">说话
        <input type="checkbox" value="study" name="hobby">学习
        <input type="checkbox" value="eat" name="hobby">吃东西
    p>


<p><input type="button" name="btn1" value="按钮名字"/>
    <input type="image" src="../resources/image/1.jpg" width="200" height="160"/>
    <input type="submit"/>
    <input type="reset"/>
p>

<p>国家
    <select name="列表名称" id="">
        <option value="china" selected>中国option>
        <option value="us">美国option>
        <option value="agt">阿根廷option>
        <option value="md">缅甸option>
    select>p>

    <p>反馈：<textarea name="textarea"  cols="30" rows="10">文本内容textarea>p>

    <p><input type="file" name="files">
        <input type="button" value="上传" name="upload">
    p>

    <p>邮箱：<input type="email" name="email">p>

    <p>URL <input type="url" name="url">p>

    <p>数字：<input type="number" name="num" max="100" min="1" step="1">
        
        音量：<input type="range" name="voice" max="100" min="0" step="2">
    p>

    <p><input type="search" name="search">p>
    <p><input type="submit">p>

        <p> <label for="mark">label>
            <input type="text" id="mark"/>
        p>


form>
body>
html>

你可能感兴趣的:(练习)

按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他