投稿
  1. 首页
  2. html-js-css

前端知识-html

code • 2022-5-18 • html-js-css • 阅读 54

前端知识-html,第1张

html Hyper Text Markup Language:超文本标记语言W3C World Wild Web Consortium:万维网联盟 W3C标准包括： 结构化标准语言（HTML、XML）表现标准语言（css）行为标准（DOM、ECMAScript) 基本结构

html注释快捷键：ctrl+/，样式： 



DOCTYPE html>

<html lang="en">
<head>
    
    
    <meta charset="UTF-8">
    <meta name="keywords" content="前端，学习">
    <meta name="description" content="学习java">

    <title>我的第一个网页title>
head>

<body>
HelloWorld!
body>
html>
网页的基本标签 标题标签 
一级标签
段落标签 **快捷键：p+tab ** 换行标签 自闭合标签：br/ 水平线标签 
<hr/>
字体样式标签 

<h1>字体样式标签h1>

粗体 : <strong>i love youstrong>
斜体 : <em>i love youem>
注释和特殊符号 


空格 :
空       格

<br/>
> 大于符号
<br/>
< 小于符号
<br/>
©版权所有
图像标签 JPGGIF：动图PNGBMP：位图

写完img后加tab键自动生成alt表示的意思，图片地址放错，可以通过替代文字找到图片 
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签title>
head>
<body>


<img src="../resources/image/llyy.jpg" alt="合照" title="刘想和瑶瑶" width="2000" height="2000">
body>
html>
链接标签 

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

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


<a href="第一个网页.html" target="-_blank">点击我跳转到页面-a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度-a>

<br>

<p>
    <a href="第一个网页.html">
        <img src="../resources/image/llyy.jpg" alt="合照" title="刘想和瑶瑶" width="200" height="200">
    a>
p>


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

<a name="down">downa>




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


<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="你好，加我领取java资料" title="你好，加我领取java资料"/>a>

body>
html>
a+tab用qq推广工具添加链接 行内元素和块元素 块元素 无论内容多少，该元素独占一行（p、h1-h6…） 行内元素 内容撑开宽度，左右都是行内元素的可以排在一行（a.strong.em…） 列表标签

有序列表：ol+tab 中间li+tab

无序列表：ul+tab 中间li+tab

自定义列表：dl：标签 dt：列表名称 dd：列表内容

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

<ol>
  <li>javali>
  <li>pythonli>
  <li>cli>
  <li>c++li>
  <li>前端li>
ol>

<hr/>

<ul>
  <li>javali>
  <li>pythonli>
  <li>cli>
  <li>c++li>
  <li>前端li>
ul>

<hr/>

<dl>
  <dt>学科dt>
  <dd>javadd>
  <dd>cdd>
  <dd>pythondd>
  <dt>位置dt>

  <dd>西安dd>
  <dd>湖北dd>
  <dd>深圳dd>
  <dd>广东dd>
dl>
body>
html>

表格标签 基本结构： 单元格行列跨行跨列 表格table+tab
行: tr
列 : td
border : 边框 1px：1宽度colspan : 跨列 相当于合并单元格、rowspan: 跨行 
DOCTYPE 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>
视频和音频 视频元素：video+tab音频元素：audio+tabsrc:放资源的地方
controls：控制播放
autoplay:打开网页自动播放 
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习title>
head>
<body>





<audio src="../resources/audio/Unit%203%20VOA.mp3" controls autoplay>audio>
body>
html>
页面结构分析

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 src="path" name="mainFrame">iframe>
            引用页面地址            框架标识名

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架学习title>
head>
<body>


<iframe src="https://www.bilibili.com" frameborder="0" width="1000px" height="800px">iframe>

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


body>
html>
表单语法(重点) 表单框：密码登录、二维码登录等

form, 表单
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post、get提交方式
get方式提交:可以在url中看到提交的信息，不安全，高效
post提交方式：安全，在url中看不到信息，传输大文件
文本输出框: input type=“text” 所有的input标签都需要name属性
密码输出框: input type=“password” name=“password”
提交：input type=“submit”
重置:input type=“reset”
在元素网络中header可以看到相关信息
value:默认初始值
maxlength:输入的长度限制
size:文本框的初始宽度
radio:单选按钮 : 必须给value初始值,且name要相同表示在同一个组
checkbox:多选框: name也要相同，value也要有初始值
button: value是按钮的名字，图片也可以变成按钮
input type=“button”
type=“image”
input type=“submit”: 提交 value:给表单赋值
input type=“reset” : 重置 value:给表单赋值
input type=“file” name=“files” 上传文件 name一般不用中文，会出现乱码
input type=“button” value=“上传” name=“upload” 上传按钮

下拉框和列表框
下拉框:select name=“列表名称” 中间部分：option value=“选项的值”>中国

在单选或者多选框后加checked，代表默认选择

文本域：textarea

name=“textarea” cols=“40” rows=“10”>文本内容

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单语法title>
head>
<body>

<h1>注册h1>


<form action="1.第一个网页.html" method="post">
  <p>名字: <input type="text" name="username" >  p>
  <p>密码: <input type="password" name="password">  p>
    <p>性别:
        <input type="radio" value="boy" name="11" checked/>男
        <input type="radio" value="girl" name="11"/>女
    p>
    <p>爱好:
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox"value="code" name="hobby">代码
        <input type="checkbox"value="chat" name="hobby">聊天
        <input type="checkbox"value="game" name="hobby">游戏
    p>
    <p>按钮:
        <input type="button" name="btn1" value="点击变长">

    p>

    <p>下拉框:
        <select name="列表名称">
            <option value="china">中国option>
            <option value="us">美国option>
            <option value="ruishi">瑞士option>
            <option value="yindu">印度option>
        select>

    p>

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

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

  <input type="submit" value="提交">
  <input type="reset" value="重置">
form>

body>
html>
搜索框滑块和简单验证 都属于input标签下邮箱验证 
<p>邮箱:
    <input type="email" name="email">
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" step="5">
p>
搜索框 
<p>搜索:
    <input type="search" name="search">
p>
表单应用

value=“admin” readonly ：只读选项

disabled：禁用

hidden:隐藏 ，比如隐藏默认密码

锁定一个框，点击文字也可以实现：

label标签

<p>
        <label for="mark">点击label>
        <input type="text" id="mark">
    p>
表单验证

placeholder:提示信息

placeholder="请输入用户名"

required:表示元素不能为空，可以用在所有文本框中

pattern:正则表达式

正则表达式速查表：https://www.jb51.net/tools/regexsc.htm

<p>自定义邮箱:
        <input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    p>

文字也可以实现：**

label标签

<p>
        <label for="mark">点击label>
        <input type="text" id="mark">
    p>
表单验证

placeholder:提示信息

placeholder="请输入用户名"

required:表示元素不能为空，可以用在所有文本框中

pattern:正则表达式

正则表达式速查表：https://www.jb51.net/tools/regexsc.htm

<p>自定义邮箱:
        <input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
    p>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/945330.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
code code 管理员组
0 0
上一篇 2022-05-18
下一篇 2022-05-18

发表评论

登录后才能评论

评论列表（0条）

保存