Html学习

最新推荐文章于 2023-03-02 20:40:05 发布
最新推荐文章于 2023-03-02 20:40:05 发布
阅读量199 收藏
点赞数
分类专栏： android 文章标签： Html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pgg_cold/article/details/81236457
版权

哎，主要为了React开发，学习一些前端知识：

1.html结构初步：

<!DOCTYPE html>

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

<body>
欢迎来到我的网页
</body>
</html>

2.html标题，段落

标题<h1>到<h6>    段落<p>     换行<br />

&nbsp;空格          &gt;大于号        &lt;小于号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html标题，段落</title>
</head>
<body>

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

<p>
    梳打后发发&nbsp;&nbsp;达&nbsp;偶发好事达博爱和打法偶发博爱的asdaubhfi<br />
    少时诵诗书所所所所所所所所所所所所所所所所少时诵诗书所<br />
    所所所所所所所所所所所所所所所所所所所所所所所所所所所
    所所所所所所所所所所所所sssssssss<br />

    2&lt;3<br />
    2&gt;1<br />

</p>
</body>
</html>

3.html块标签：

div  表示一块，不带样式   span  块中的一块

带样式的标签：

<em>和<i>都表示强调语气，斜体

<b>和<strong> 加粗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Html块</title>
</head>
<body>

<div>
    梳打后发发<span>sdaufaifasdafasf</span>偶发好事达博爱和打法偶发博爱的asdaubhfi<br />
    少时诵诗书所所所所所所所所所所所所所所所所少时诵诗书所
    所所所所所所所<em>所所</em>所所所所所<i>所所</i>所所所所所所所所所所所
    所所所所所所所所所所所所sssssssss

    <b>这是加粗字体</b>

    <strong>这是强调字体</strong>
</div>

</body>
</html>

4.html图片和路径，超链接

相对路劲，绝对路径，./     ../   的区别

超链接 a标签   默认值    跳转到页头    tatget属性 _self 替换页面    _blank新开窗口显示页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html图片和路径</title>
</head>
<body>

<img src="images/bike_loading.gif" alt="自行车">
<a href="https://www.baidu.com" title="跳转到百度">百度</a>

<!--给图片加连接-->
<a href="https://www.baidu.com" title="跳转到百度"><img src="images/bike_loading.gif" alt="自行车"></a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="#" title="默认值">默认值</a>

<a href="javascript:;">默认不跳页头</a>

<!--target属性-->
<a href="https://www.baidu.com" title="跳转到百度" target="_blank">百度</a>

</body>
</html>

页面内跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面跳转</title>
</head>
<body>
<a href="#title1">跳转到h1</a>
<a href="#title2">跳转到h2</a>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<h1 id="title1">标题1</h1><br />

<br />
<br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<h2 id="title2">标题2</h2><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</body>
</html>

5.html列表

<ol>有序列表       <ul>无序列表         <li>列表item     <dl>定义列表  <dt>定义列表的item标题  <dd>定义列表的item内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html列表</title>
</head>
<body>
<h3>有序列表</h3>

<ol>
    <li>学习html</li>
    <li>学习css</li>
    <li>学习javascript</li>
</ol>

<h3>无序列表</h3>
<ul>
    <li><a href="">新闻标题</a> </li>
    <li><a href="">新闻标题</a> </li>
    <li><a href="">新闻标题</a> </li>
    <li><a href="">新闻标题</a> </li>
    <li><a href="">新闻标题</a> </li>
    <li><a href="">新闻标题</a> </li>
</ul>

<h3>定义列表</h3>
<dl>
    <dt>html</dt>
    <dd>负责页面的结构</dd>
    <dt>css</dt>
    <dd>负责页面的表现</dd>
    <dt>javascript</dt>
    <dd>负责页面的行为</dd>
</dl>
</body>
</html>

6.html表格

<table>表格容器      border属性表示外边框像素   cellpadding内边距   cellspacing外边距

<tr>一行  <th>表格标题 属性valign内容的布局方式    <td>表格的一个单元

colspan表示一个单元格占据列的个数    rowspan表示一个单元格占据行的个数

width 表示单元格的宽度   height表示单元格的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html表格</title>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="10">
    <tr>
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
    </tr>
    <tr>
        <td>123</td>
        <td>123</td>
        <td>123</td>
        <td>123</td>
    </tr>
</table>

<h1>产品表格</h1>
<table border="1" cellpadding="10" cellspacing="1">
    <tr>
        <th valign="middle">序号</th>
        <th>产品名称</th>
        <th>产品价格</th>
        <th>产品数量</th>
    </tr>
    <tr>
        <td align="center">1</td>
        <td align="center">苹果</td>
        <td>￥5.00</td>
        <td>1000</td>
    </tr>
    <tr>
        <td align="center">2</td>
        <td align="center">橘子</td>
        <td>￥4.00</td>
        <td>2000</td>
    </tr>
</table>

<h1>个人简历表</h1>
<table border="1" width="600" height="300">
    <tr>
        <th colspan="5" align="left">基本情况</th>
    </tr>
    <tr>
        <td width="18%">姓名</td>
        <td width="18%"></td>
        <td width="18%">性别</td>
        <td width="18%"></td>
        <td rowspan="5" width="28%"><img src="images/location_bg.jpg" alt="风景图"></td>
    </tr>
    <tr>
        <td>民族</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>政治面貌</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>籍贯</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>电子邮箱</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
</body>
</html>

简历布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简历布局</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="800" height="800" align="center">
    <tr>
        <td width="260" valign="top" bgcolor="#f2f2f2">
            <table width="260" border="0" cellspacing="0" cellpadding="0">
                <tr height="100">
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td width="230" align="right"><img src="images/person.jpg" alt="人物图片"></td>
                    <td width="30"></td>
                </tr>
                <tr>
                    <td align="right">胖哥哥</td>
                    <td></td>
                </tr>
                <tr>
                    <td align="right">18943834432</td>
                    <td></td>
                </tr>
                <tr>
                    <td align="right">pfg22314134@163.com</td>
                    <td></td>
                </tr>

            </table>
        </td>
        <td width="30"></td>
        <td width="480" valign="top">
            <table border="0" cellpadding="0" cellspacing="0" width="480">
                <tr height="75">
                    <td></td>
                </tr>
                <tr>
                    <td align="right"><img src="images/location_bg.jpg"></td>
                </tr>
            </table>

            <hr />

            <table border="0" cellpadding="0" cellspacing="0" width="480" height="180">
                <tr height="30">
                    <td></td>
                </tr>
                <tr>
                    <td colspan="2"><b>个人基本情况</b></td>
                </tr>
                <tr>
                    <td width="50%">姓 名：张达山	</td>
                    <td width="50%">籍 贯：北京昌平</td>
                </tr>
                <tr>
                    <td>性 别：男</td>
                    <td>身 高：175cm</td>
                </tr>
                <tr>
                    <td>民 族：汉</td>
                    <td>体 重：70kg</td>
                </tr>
                <tr>
                    <td>出生日期：1992.03.28</td>
                    <td>电 话：18210898888</td>
                </tr>
                <tr>
                    <td>专 业：工业设计</td>
                    <td>现居住地：昌平天通苑</td>
                </tr>
            </table>

        </td>
        <td width="30"></td>
    </tr>
</table>
</body>
</html>

 

胖哥哥飘过
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习html的心得体会
weixin_47978224的博客
03-19 1万+
1、HTML的简介及大体介绍： HTML 是用来描述网页的一种语言。 它是一种超文本标记语言，并不是一种编程语言。它包含了一套标记标签，并用此来描述网页。因此HTML文档包含了HTML标签和文本内容。 HTML标签是由尖括号包围的关键词， HTML 标签通常是成对出现的，比如 <p> 和 </p> 标签对中的第一个标签是开始标签，第二个标签是结束标签 一个HTML元素包含了开始标签、内容、结束标签。例如：<p>这是一个段落。</p> 2、HTML的运用
HTTP请求报错：400 Bad Request解决方法！！（终极整理）
热门推荐
good_good_xiu的博客
04-03 37万+
问题场景：当项目的前端页面使用ajax请求访问后端时，出现该错误。 我这里是测试接口时，发生了错误。 原因一：请求参数个数不对。 后端接口上明确规定了请求参数的个数。比如：接口（方法）中的值中使用了requestparam注解，requestparam注解中有个require属性，默认为true，意思则是，必须要传该参数的值（该参数不可为空）。 解决办法： 1.如果该参数是可传可不传的，修改require属性为false。 2.检查前端js文件中对应的ajax请求中的请求数据是否为空，或者是否有该参数。
HTML&CSS基础学习笔记1.10—添加链接
weixin_30547797的博客
07-08 94
我们可以设置链接的目标，使我们点击后可以跳转到我们想要去的地方。 <a>标签的 href 属性用于指定超链接目标的 URL。 在页面中添加的<a>标签，浏览器会用特殊效果显示，这样用户就会知道它是一个可以链接到其他文档的超链接。 看一段代码： <!DOCTYPE html><html lang="en"><head> ...
HTML与HTML5常用标签
Vv的博客
10-20 291
一、HTML简介 HTML 是 HyperText Mark-up Language 的⾸字⺟简写，意思是 超⽂本标记语⾔ HTML不是⼀种编程语⾔，⽽是⼀种标记语⾔ 超⽂本指的是超链接，标记指的是标签，是⼀种⽤来制作⽹⻚的语⾔，这种语⾔由⼀个个的标签组成 ⽤这种语⾔制作的⽂件保存的是⼀个⽂本⽂件，⽂件的扩展名为 .html 或者 .htm html⽂档也叫 Web⻚⾯ ，其实就是⼀个⽹⻚，html⽂件⽤ 编辑器打开显示的 是⽂本 ，可以⽤⽂本的⽅式编辑它 如果⽤浏览器打开 ，浏览器会
HTML的一些常用的标签和部分css知识
qq_45726776的博客
04-25 2916
form标签的注意事项 form为表单标签，属性有action和method。 action为表单提交的路径，method为表单 的提交方式。表单有九种提交请求，常用 的有两种，今天就介绍常用的两种请求get和 post。 get请求方式 get请求为method的默认提交请求，在提交路径有属性信息，get请求在路径的地址上存在属性值 url的地址是有限制的最大为64kb； <form action="https://www.baidu.com/?tn=62095104_23_oem_dg" m
最全面的前端开发指南
weixin_33696822的博客
12-18 185
HTML 语义 HTML5为我们提供了很多旨在精确描述内容的语义元素。确保你可以从它丰富的词汇中获益。 &lt;!-- bad --&gt; &lt;div id="main"&gt; &lt;div class="article"&gt; &lt;div class="header"&gt; &lt;h1&gt;Blog post
HTML学习
ljn0320的博客
12-12 1万+
HTML学习标题段落链接图像元素属性样式style 标题 // 标签<h1>-<h6> <h1>This is a heading</h1> 段落 // HTML 段落是通过 <p> 标签进行定义的。 <p>This is a paragraph</p> <br />为换行符，在不产生新段落的情况下进行换行 无法通过在HTML中添加额外空格或者换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格
【WEB前端进阶之路】 HTML 全路线学习知识点梳理（上）
最新发布
陈橘又青的博客
03-02 1万+
万维网W3C标准中网页分为结构，表现和行为三部分，HTML用于描述页面的结构，CSS用于控制页面中的元素样式，JavaScript用于响应用户的操作。HTML，CSS和JavaScript组成了前端技术栈。
html——简历设计
Cherry的博客
05-04 1533
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简历</title> </head> <body> <table width="800" height="800" border="0" cellpad...
html表格及传统布局
Duke10的博客
04-19 1万+
html表格 table常用标签 1、table标签：声明一个表格 2、tr标签：定义表格中的一行 3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格 table常用属性： 1、border 定义表格的边框 2、cellpadding 定义单元格内内容与边框的距离 3、cellspacing 定义单元格与单元格之间的距离 4、align 设置单元格...
Android面试题（27）-android的事件分发机制
pgg_cold的博客
03-07 1万+
今天开始写一点关于view的知识，先从最基本的讲吧，android的事件分发机制，其实在我看来，android的事件分发机制在现实生活中经常能看到，所以我觉得还是很好理解的；先看看生活中常见的一种情形吧；比如说，现在你所在的公司中有一项任务被派发下来了，项目经理把项目交给你的老大，你的老大老大手下有很多人，看了看觉得你做很合适，把这个任务交给你了；你一看觉得还行，你就接下来了；这么一个小小场景大概...
RxJava2+Retrofit2+okHttp的二次封装
pgg_cold的博客
01-20 1万+
项目Demo已经上传至github链接本人android小白一枚，在学习android的过程中，我感受很深，在做了这么多练手的项目之后，我觉得android就像一块画板，画板是白纸，作为android的开发人员，要做的就是运用一切可能，去在画板上画出让人看的懂并且美观的画。说起来，我们却也属于艺术家这一行了。。。在我看来，android是为了展示数据的，这里就要分两个步骤了，第一就是怎样去展示，这...
Android面试题（31）-App启动流程
pgg_cold的博客
03-08 1万+
先贴个链接，总结的挺全面 在看这篇文章之前，希望先看完我的之前的博客 android面试（6）-Binder机制，因为关于App启动流程设计很多Binder通信； 先将“三个进程”，“六个大类”进行介绍： 三个进程： Launcher进程：整个App启动流程的起点，负责接收用户点击屏幕事件，它其实就是一个Activity，里面实现了点击事件，长按事件，触摸等事件，可以这么理解，把Launc...
flutter学习--搜索框
pgg_cold的博客
05-26 1万+
主入口文件 继承StatelessWidget,然后在home属性中加入SearchBarDemo，这是一个自定义的Widget，主要代码都在这个文件中。 import 'package:flutter/material.dart'; import 'search_bar_demo.dart'; void main() =>runApp(MyApp()); class MyApp ext...
Android面试题（22）-lruCache与DiskLruCache缓存详解
pgg_cold的博客
03-06 9848
关于lruCache（最近最少使用）的算法，这是一个比较重要的算法，它的应用非常广泛，不仅仅在Android中使用，Linux系统等其他地方中也有使用；今天就来看一看这其中的奥秘；讲到LruCache，就不得不讲一讲LinkedHashMap，而对于LinkedHashMap，它继承的是HashMap，那么我们就先从HashMap开始看起吧；注：此篇博客所讲的所有知识都是在jdk1.8环境下的，j...
flutter学习--页面跳转
pgg_cold的博客
05-19 8657
一般页面导航和返回 RaisedButton按钮组件 它有两个最基本的属性： child：可以放入容器，图标，文字。让你构建多彩的按钮。 onPressed：点击事件的相应，一般会调用Navigator组件。 Navigator.push 和 Navigator.pop Navigator.push：是跳转到下一个页面，它要接受两个参数一个是上下文context，另一个是要跳转的函数。 ...
Android面试题（28）-android的view加载和绘制流程
pgg_cold的博客
03-08 7605
View的加载流程 view布局一直贯穿于整个android应用中，不管是activity还是fragment都给我们提供了一个view依附的对象，关于view的加载我们在开发中一直使用，在接下来的几篇文章中将介绍在android中的加载机制和绘制流程并且对于基于android6.0的源码进行分析探讨。这一部分先来分析一下activity中view的加载流程。 当我们打开activity时候，...
android面试（6）-Binder机制
pgg_cold的博客
02-27 7152
一直说，要写一篇关于Binder的详解，今天终于发福利了~说到Binder，真的是头大，因为它涉及到的知识点实在是太多，所以在这里，我不准备总结太底层的东西，原因嘛，就是因为我也还没搞清楚，哈哈~~；好了，言归正传，要想了解Binder，首先得了解一些Linux内核的基础知识：1.Linux内核基础知识：（1）用户空间/内核空间：一切从简，用户空间指的是用户程序所运行的空间，内核空间是 Linux...
android开发模式LiveData+ViewModel+Room+Retrofit
pgg_cold的博客
07-14 6592
导依赖implementation 'com.android.support:cardview-v7:26.1.0' implementation "android.arch.lifecycle:extensions:1.0.0" implementation "android.arch.persistence.room:runtime:1.0.0" annotationProcessor "an...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值