html简介

最新推荐文章于 2023-05-19 11:44:48 发布
最新推荐文章于 2023-05-19 11:44:48 发布
阅读量709 收藏
点赞数
分类专栏： Way
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cameles/article/details/80305475
版权 
1、html的简介
    什么是html？
    HypeText Markup Language：超文本标记语言，网页语言
    超文本：超出文本的范畴，使用html可以轻松实现这样操作
    标记：html所有的操作都是通过标记实现的，标记就是标签<标签名称>
    网页语言：
第一个html程序：
    创建java文件 .java
        先编译，然后再运行（jvm）
    html后缀是 .html .htm
        直接通过浏览器就可以运行
    代码：
        这是我的<font size="5" color="red">第一个html程序！</font>
    html的规范（遵循）
        1、一个html文件开始标签和结束的标签<html></html>
        定义一个Java方法{}
        2、html包含两部分内容
        （1）<head>设置相关信息</head>
        （2）<body>显示在页面上的内容都写再body里面</body>
        3、html的标签有开始标签，也要有结束标签
        4、html的代码不区分大小写的
        5、有些标签，没有结束标签
            换行：<br/> /表示在标签内结束
            <hr/>一条水平线
    html的操作思想
        网页中有很多数据，不同的数据可能需要不同的显示效果
        这个时候需要使用标签把要操作的数据包起来（封装起来）
        通过修改标签的属性值实现标签内数据样式的变化。
        一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变
        容器的属性值，就可以实现容器内数据样式的变化
html中常用的标签
2、文字标签和注释标签
    文字标签：修改文字的样式
    <font></font>
    属性:
        size:文字的大小 范围：1-7，超出7，默认还是7
        color:文字颜色
            两种表示方式：英文单词、使用十六进制数表示 #ffffff:RGB
            通过工具实现不同的颜色
    注释标签
    java注释三种
    html的注释：<!-- html注释 -->
3、标题标签、水平线标签和特殊字符
    标题标签：<h1></h1>  <h2></h2>...
        从h1到越大，字体依次变小并会自动换行
    水平线标签<hr/>
        属性：
        size:水平线的粗细
        color：颜色
        <hr size="s" color="blue"/>
    特殊字符
        需要对特殊字符进行转义
        <  &lt;
        >  &gt;
        空格：&nbsp;
        &  &amp;
4、列表标签
    *列表：
    <dl></dl>:表示列表的范围
    在dl里面  <dt></dt>:上层内容
    在dl里面  <dd></dd>:下层内容
    代码：
        <dl>
            <dt>传智播客</dt>
            <dd>人事部</dd>
            <dd>财务部</dd>
            <dd>学工部</dd>
        </dl>
    *有序列表：
    <ol></ol>:有序列表的范围
    属性：type：设置排序方式：1（默认是） a i
        在ol标签里面<li></li>
    代码：
        <ol type="a">
            <li>人事部</li>
            <li>财务部</li>
            <li>学工部</li>
        </ol>
    *无序列表：
    特殊符号（方框）
    <ul></ul>：表示无序列表的范围
    属性：type：空心圆circle、实心圆disc、实心方块square、默认disc
    在ul里面<li></li>
    代码：
    <ul type="circle">
        <li>人事部</li>
        <li>财务部</li>
        <li>学工部</li>
    </ul>
5、图像标签
    <img src="图片的路径"/>
    属性：
    src:图片的路径
    width：图片的宽度
    height：图片的高度
    alt：图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容
        在有些浏览器下不显示（没有效果）,浏览器兼容性很差
6、路径的介绍
    分类:两类
    绝对路径：

    相对路径：一个文件相对于另外一个文件的位置
        三种：
        html文件和图片在一个路径下：可以直接写文件名称
        图片在html的下层目录
        图片在html的上层目录
            html文件所在的目录和图片是一个目录
            图片在html的所在目录的上层目录
            上层路径表示： ../
            上层的上层 ../../
7、超链接标签
    链接资源
        <a href="链接到资源的路径">显示在页面上的内容</a>
        href:链接的资源的地址
        target:设置打开的方式，默认是在当前页打开
            _blank:在一个新窗口打开
            _self:在当前页打开 默认
        <a href="#">显示在页面上的内容</a>
        当超链接里不需要到任何的地址
    定位资源
        如果想要定位资源：定义一个位置
        <a name="top">顶部</a>
        回到这个位置
        <a name="#top">回到顶部</a>
        pre标签：原样输出
8、表格标签
     可以对数据进行格式化，使数据显示更加清晰
     <table></table>：表示表格的范围
        属性：
        border:表格线
        bordercolor:表格线的颜色
        cellspacing:单元格之间的距离
        width
        height
     在table里面有 <tr></tr>
     设置显示对齐方式：align:left center right
     使用th也可以表示单元格
     表示可以实现居中和加粗
        在tr里有 <td></td>
    <table border="1" bordercolor="blue" cellspacing="0" width"400" height="150">
    分析表格的写法：
        首先定义一个表格的范围使用table
        定义一行使用tr
        定义一个单元格使用td
    操作技巧：
        首先数有多少行，数每行里面有多少个单元格
    表格的标题
    <caption></caption>
    合并单元格：
        rowspan：跨行

        colspan：跨列
            <td colspan=" "></td>
9、表单标签
    可以提交数据到开心网的服务器
    <form></form>：定义一个表单范围
        属性：
        action:提交到地址，默认提交到当前的页面
        method：表单的提交方式
            常用的有两种 get和post，默认是get请求
        get和post的区别：
            1、get请求地址栏会携带提交的数据，post不会（请求体里面）
            2、get请求安全级别较低，post较高
            3、get请求数据大小的限制，post没有限制
        enctype：一般请求下不需要这个属性，做文件上传的时候需要设置这个属性

    输入项：可以输入内容或者选择内容的部分
        大部分的输入项 使用 <input type="输入项的类型"/>

        在输入项里面需要有一个name属性

        普通输入项：<input type="text"/>
        密码输入项: <input type="password"/>
        单选输入项：<input type="radio"/>
            在里面有属性 name
            name的属性值必须要相同
            必须有一个value值
            实现默认选中的属性
                checked="checked"
        复选输入项：<input type="checkbox"/>
            在里面有属性 name
            name的属性值必须要相同
            必须有一个value值
            实现默认选中的属性
                checked="checked"
        文件输入项(在后面上传时候用到)
            <input type="file"/>
        下拉输入项（不是在input标签里的）
            <select name="birth">
                <option value="0">请选择</option>
                <option value="1991">1991</option>
                <option value="1992">1992</option>
                <option value="1993">1993</option>
            </select>
            实现默认选中的属性
                selected="selected"
        文本域
        <textarea cols="10" rows="10"></textarea>
        隐藏项（不会显示在页面上，但是存在于html代码里）
        <input type="hidden"/>
        提交按钮
        <input type="submit" value="注册"/>

        ?输入项name的值=输入的值&
        参数类似于key=value形式

        使用图片提交
        <input type="image" src="图片路径"/>
        重置按钮，回到输入项的初始状态
        <input type="reset"/>
        普通按钮（和js一起使用）
        <input type="button" value=""/>
10、html中的其他的常用标签的使用
    b ：加粗
    s ：删除线
    u ：下划线
    i ：斜体
    pre：原样输出
    sub：下标
    sup：上标
    div：自动换行
    span：不换行，一行显示
    p: 段落标签，比br标签多一行
11、html的头标签的使用
    html两部分组成 head和body
    在head里面的标签就是头标签
     <title>标签：表示在标签上显示的内容
     <meta>标签：设置页面的一些相关内容
        <meta name="keywords" content="">
    页面的定时跳转<meta http-equiv="refresh" content="3;url=01-hello.html"/>
    <base>标签：设置超链接的基本设置
        可以统一的设置超链接的打开方式
        <base target="_blank"/>
    <link>标签：引入外部文件
        可以使用它引入css文件
12、框架标签
    <frameset>
        rows:按照行进行划分
        <frameset rows="80,*">
        cols:
        <frameset cols="80,*">
    <frame>
        具体显示的页面
        <frame name="lower_left" src="">
    使用框架标签的时候，不能写在body里面，使用了框架标签，需要把body去掉
    如果在左边的页面超链接，想让内容显示在右边的页面中
    <a href="heool.html" target="lower_left">超链接</a>
Cameles
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML详解
m0_58468567的博客
01-27 2030
html的运用
html制作好看的个人简历(附源码)
xcLeigh
03-29 3万+
html制作好看的个人简历(附源码)，代码简单，通俗易懂，html实现好看的个人简历，界面酷炫，简洁明了，附件源码，下载后直接使用，可以用文本、工具（vscode，Hbuilder，dw）打开编辑自己的相关信息，也可在此框架下，扩展更多其他效果。
html简洁漂亮的个人简历,个人主页，个人简介网页版(源码)
BASK2312的博客
05-19 1万+
动态的朦胧天空背景图，可以配置个人职业技能，大图标，姓名，年龄，性别，手机号，邮箱，qq号，居住地，户籍，学历，学校，专业等信息，也可以扩展新的。动态的朦胧天空背景图，可以配置自己的图标，个人名言，名字，职称，邮箱，手机号，工作地址等信息，也可以扩展新的。动态的科技线路背景图，可以配置个人工作过的公司，工作的时间，负责的项目，开发工具等信息，也可以扩展新的。动态的科技线路背景图，可以配置个人教育的学校，时间，几学到的东西等信息，也可以扩展新的。出来，个人的掌握的工具，及熟练度等信息，也可以扩展新的。
html简介及基本标签
hdxx2022的博客
01-01 1051
(2)HTML 不是一种编程语言，而是一种标记语言(markup language,标记语言是一套标记标签(markup tag));align:表格的对齐方式（单元格里面的内容居中对齐）(2)html标签是以尖括号包裹关键字成对出现的，有开始标签和结束标签，支持正确的嵌套。(4)空标签：功能比较单一 ，例如： === --张三是默认值-->(3)大部分标签有属性 格式：属性=“属性值”（多个属性之间用空格隔开）
该页面仅以HTML格式保存_前端入门｜HTML的基本介绍2：HTML基本结构
weixin_39822443的博客
10-21 590
一、HTML基本结构1、doctype的作用DOCTYPE是document type (文档类型) 的缩写。声明位于文档的最前面，处于标签之前，它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分2、删除会发生什么在W3C标准出来之前，不同的浏览器对页面渲染有不同的标准，产生了一定的差异...
HTML简介11111
05-23
HTML简介11111
HTML简介
08-05
NULL 博文链接：https://chaoyi.iteye.com/blog/2059102
HTML简介：Web开发（学习HTML）
02-20
在"HTML简介：Web开发（学习HTML）"这个课程中，我们将深入理解HTML的核心概念，以及如何使用它来构建Web页面。 首先，HTML文档的基本结构由一系列元素组成，这些元素通过标签来定义。每个HTML元素都有开始标签和...
HTML简介、标记、属性.xmind
11-29
该思维导图主要对HTML的标记和属性进行一个初步介绍，让大家对网页的结构有个初步了解，其实html与css基础的学习，就是在学习一个个的标记和具有的属性，再根据属性值搭建整个网页的布局与修饰网页显示内容的样式。
HTML代码简介
04-24
HTML代码简介
浏览器及内核
kzwsa的博客
07-11 430
- web浏览器是用于读取HTML文件，并将其作为网页显示- 浏览器最重要的部分或其核心是渲染引擎，我们一般称为内核；- 内核的作用负责对网页语法的解释并渲染网页；- 五大浏览器：chrome、safari、Firefox、Opera、IE 1.chrome 谷歌浏览器 生产商：Google 内核：webkit、blink 2.Firefox 火狐浏览器 生产商：Mozilla 内核：gecko 3.Safari 苹果浏览器 生产商：苹果公司 内核：webkit 4.opera 欧朋浏览
HTML简介：
2302_76679440的博客
04-28 98
HTML 的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。需要说明的是 HTML 不是编程语言，而是一种描述性的语言，用于描述 超文本中内容的显示方式。超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML文本是由 HTML 标签组成的描述性文本，HTML 文本可以说明文字、图形、动画、声音、表格、链接等。
HTML的自我学习
bjyangjinshan的博客
01-06 204
HTML 简介  声明为 HTML5 文档  元素是 HTML 页面的根元素  元素包含了文档的元（meta）数据  元素描述了文档的标题  元素包含了可见的页面内容  元素定义一个大标题  元素定义一个段落 什么是HTML? HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言: HyperText Markup Language HTML
前端学习1：HTML简介
RainstormGod的博客
04-05 374
HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页。
制作一个简单HTML个人网页网页（HTML+CSS）
热门推荐
weixin_46153254的博客
12-04 35万+
制作一个简单的HTML个人网页
HTML、CSS知识点总结
g15896871079的博客
09-17 707
一，html+css基础 1-1 Html和CSS的关系 学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的： HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠
（一）HTML 语言简介
Shirley_Song_1的博客
04-26 2819
html语言简介、XHTML、网页的基本概念、HTML语义化、字符编码、URL
html制作电影简介
最新发布
06-01
HTML是一种用于网页开发的标记语言，可以用来制作电影简介页面。以下是一个简单的电影简介页面的HTML代码示例： ```html <!DOCTYPE html> <html> <head> <title>电影简介</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>电影名称</h1> <p>电影简介描述……</p> <img src="电影海报图片链接" alt="电影海报"> <h2>剧情简介</h2> <p>剧情简介描述……</p> <h2>演员表</h2> <table> <tr> <th>演员姓名</th> <th>角色名称</th> </tr> <tr> <td>演员1</td> <td>角色1</td> </tr> <tr> <td>演员2</td> <td>角色2</td> </tr> <tr> <td>演员3</td> <td>角色3</td> </tr> </table> <h2>影片信息</h2> <ul> <li>导演：导演姓名</li> <li>编剧：编剧姓名</li> <li>主演：主演姓名1，主演姓名2，主演姓名3</li> <li>类型：电影类型</li> <li>制片国家/地区：制片国家/地区</li> <li>语言：电影语言</li> <li>上映日期：上映日期</li> <li>片长：电影片长</li> </ul> </body> </html> ``` 以上代码中，`<h1>`标签用于显示电影名称，`<p>`标签用于显示电影简介和剧情简介，`<img>`标签用于显示电影海报图片，`<table>`标签用于显示演员表，`<ul>`标签用于显示影片信息。根据具体需求，你可以对页面进行进一步的修改和美化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值