html学习

最新推荐文章于 2024-10-18 19:19:52 发布

striving all the time

最新推荐文章于 2024-10-18 19:19:52 发布

阅读量85

点赞数

分类专栏： html 文章标签： html html5

本文链接：https://blog.csdn.net/weixin_54205746/article/details/113854256

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

文字、图片、音频、视频、动画等

优势：

知名浏览器都支持
市场需求
跨平台

W3C World Wide Web Consortium 万维网联盟

结构化标准语言
表现标准语言
行为标准

HTML的基本结构

网页的基本信息

DOCTYPE声明告诉浏览器要使用什么规范
< title >标签
< meta >标签

<!DOCTYPE html> 
<html lang="en">
<head>//网页的头部
    <meta charset="UTF-8">描述性标签，一般用来做seo，搜索引擎优化
    <title>我</title>
</head>
<body>// 网站的主体

</body>
</html>

注释的写法 < !-- -->

基本标签

标题标签< h1 > < /h1> 一级标题

段落标签 < p> < /p>

换行标签 < br/ >或者 < br>

水平线标签 < hr/>

字体样式标签粗体和斜体 < strong> < /strong > < em >< em>

注释和特殊符号空格----&nbsp ；大于号 &gt great than ；小于号&lt less than；

版权 @ &copy；

图像标签

< img src = “路径” alt = “text图像替代文字” title =“鼠标悬停提示文字” width = “x" height = “y”/>

超链接标签

< a href = “链接位置” target = ‘窗口打开位置’> < /a>

<a href="我的第一个网页.html">点击我跳转页面</a><br/>
<a href="www.baidu.com">点击我跳转到百度</a>
<br/>

<a href="我的第一个网页.html">
    <img src="../resource/image/00027815.png" alt="啥玩意啊"title="篮球"width="100"height="100">
</a>

页面间连接 target = “_blank"

锚链接单页面回到顶部

需要一个锚

< a name = “top”> 顶部 < /a>

< a href = “#top”>回到顶部< /a>

功能性链接

邮箱链接< a href = “mailto:邮箱地址”>< /a>

QQ链接

行内元素和块元素

行内元素

块元素：无论内容多少，该元素独占一行< p></ p>

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

列表

什么是列表。

有序列表< ol>< li> < /li> < /ol> ordered list

无序列表< ul>< li> < /li> < /ul> unordered list

自定义列表< dl> < dt> < /dt> < dd>< /dd>< /dl>

表格

表格< table border =” 像素“>< /table>

行< tr > < /tr>

列< td 跨行 colspan 跨列 rowspan> </ td>

媒体元素

音频 <video src=“路径” controls（控制播放） autoplay>< /video>

视频<audio src=“路径” controls（控制播放） autoplay>< /audio>

页面结构分析

标题头部区域内容 head

标题脚部区域内容 footer

Web页面的一块独立区域 section

独立的文章内容 article

iframe内联框架

< iframe src = “path” name = “框架标识名”> < /iframe>

表单语法

建立表单< form>< /form>

<h1>注册</h1>
<!--
action:表单提交的位置，可以是网站，也可以是请求处理地址
method ： post , get 提交方式
get 方式提交在url中会显示提交的信息，不安全，但是高效
post 比较安全，可以传输大文件
value 默认的初始值
maxlength 输入最大的字符数
size 文本框的长度
-->
<form action="个人简历.html" method="post">
<!--    文本输入框-->
    <p>名字：<input type="text" name="username" value="dongdong" maxlength="10" size="30" hiden隐藏/></p>
    <p>密码：<input type="password" name="pwd" size="30" readonly/></p>表示只读
    <p>性别：
<!--        单选框标签 radio
                value表示单选框的值
                name表示组 只能选择其中的一个
                check 默认选择-->
        <input type="radio" value ="boy" name="sex" checked>男
        <input type="radio" value ="girl" name="sex">女
    </p>
    <p>爱好：
<!--        多选框标签 checkbox
            value表示多选框的值
            name表示组
            checked 默认选项
            -->
        <input type="checkbox" value="sing" name="hobby">唱歌
        <input type="checkbox" value="dance" name="hobby">跳舞
        <input type="checkbox" value="rap" name="hobby" checked>rap//checked 是默认值
        <input type="checkbox" value="basketball" name="hobby">篮球


    </p>
    <p>按钮：
<!--        按钮 普通标签button
                图像标签 image
                submit 提交
                reset 重置-->
        <input type="button" value="迪斯科" name="btn1" >

    </p>
    <p>下拉框
<!--    下拉框 select
            下拉列表选项 option-->
    <select name="列表名称" id="">
        <option value="china">中国</option>
        <option value="USA">美国</option>
        <option value="选项" selected>日本</option>
        <option value="选项">英国</option>
    </select>
    </p>
    <p>文本域：
        <textarea name="文本框" cols="30" rows="10">文本内容</textarea>
    </p>
    <p>文件域：
        <input type="file" name="files"/>
        <input type="button" name="upload" value="上传">

    </p>

    <p>邮件：
<!--       邮件验证-->
        <input type="email" name="emails">
    </p>

    <p>url：
        <!--       URL-->
        <input type="url" name="urls">
    </p>

    <p>数字：
        <!--       数字-->
        <input type="number" name="num"max="100"min="2"step="8">
    </p>
    <p>滑块：
        <input type="range" max="100"min="1"name="voice" step="2">

    </p>

    <p>搜索框：
        <input type="search"name="search">

    </p>
    <p>

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