HTML基础

最新推荐文章于 2022-11-08 16:54:25 发布
最新推荐文章于 2022-11-08 16:54:25 发布
阅读量550 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ng_Ho_Yin/article/details/106009560
版权

一.概念

     html就是一个标准标记语言

<!DOCTYPE html>
<html lang="en">
<head>
    <!--meta  元信息    -->
    <meta charset="UTF-8">      <!--  单行标签 -->
    <title>Title</title>
</head>
<body>
         This is my first HTML page!
</body>
</html>

 

二.常用的标签

<h>标签

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

 

<a>标签

<a href="http://www.baidu.com" target="">百度</a>

 a标签的两个重要的属性:href和target

target属性的值:

_self(自己)，在当前页面中打开；__blank（空白）在另外一个新的空白的tab中打开。

<段落标签>

<p>

用来一个段落，是一个非常特殊的标签，因为它是一个 块级元素，有是一个文本级元素

<img>标签

<img src="./../../1.jpg">
            图片标签的常用属性:src:    ./指的是当前目录  ../指的是上一级目录

<table>标签

<table border="1" cellspacing="0" cellpadding="0" width="10%">
	<thead>
		<tr>
			<th></th><!-- 文本加粗并居中 -->
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
		</tr>
	</tobdy>
	<tfoot>
	</tfoot>
</table>

table标签表只能放thead、tbody、tfoot、tr; tr下只能放th、hd; td、th下可以放任何东西

可以不写tbody、thead、tfoot

table下只能是<thead><tbody><tfoot>:就算你不这样写,也会自动帮你添加的
align是表格在页面中的位置
text-align:表格中的文本的位置
border:指的是最外层的边框宽度
cellspacing:边框的间隙(cell值的是单元格)
cellpadding:单元格到内容的间隙

colspan: 列合并、rowspan, 行合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table
        border="1px"
        width="50%"
        cellspacing="0"
        cellpadding="0"
        style="text-align: center"
        align="center"
>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>19</td>
        <td>男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>19</td>
        <td>女</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr>
<!--        <td>小红</td>-->
<!--        <td>20</td>-->

<!--       合并左右两格 -->
        <td colspan="2">111</td>
<!--        合并上下两格-->
        <td rowspan="2">男</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>20</td>

    </tr>
</table>

</body>
</html>

<ul>标签

<ul>
	<li></li>
</ul>

ul下只能放li标签，但是li下可以放发任何东西

<ol>标签

<ol>
	<li></li>
</ol>

ol下只能放li标签，但是li下可以放发任何东西

<div>标签

用处:将网页进行分块处理

<b><i><u>标签

<b>标签是加粗

<i>标签是斜体

<u>标签是下划线

biu标签是常用于小图标的展示

<form>标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" method="get">
    <table>
        <tr>
            <td>
                姓名:
            </td>
            <td>
                <input type="text" name="xingming">
            </td>
        </tr>
        <tr>
            <td>
                密码:
            </td>
            <td>
                <input type="password" name="mima">
            </td>
        </tr>
        <tr>
            <td>
                头像:
            </td>
            <td>
                <input type="file" name="touxiang">
            </td>
        </tr>
        <tr>
            <td>
                性别:
            </td>
            <td>
                <input type="radio" name="sex" value="male"> 男
                <input type="radio" name="sex" value="female">女
            </td>
        </tr>
        <tr>
        <td>
            兴趣:
        </td>
        <td>
            <input type="checkbox" name="xingqu" value="study">学习
            <input type="checkbox" name="xingqu" value="run">跑步
            <input type="checkbox" name="xingqu" value="read">读书
        </td>
    </tr>
        <tr>
            <td>学历:</td>
            <td>
                <select name="xueli">
                    <option selected>请选择</option>
                    <option>大专</option>
                    <option>本科</option>
                    <option>硕士</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>个人简介:</td>
            <td><textarea name="gerenjianjie" rows="10" cols="10"></textarea></td>
        </tr>
        <tr>
            <td>
                <input type="submit" value="提交">
            </td>
            <td>
                <input type="reset" value="重置">
            </td>
        </tr>

    </table>
</form>

</body>
</html>

form表单 两个和java交互非常重要的属性: action属性 和 method属性

选择框中checked属性代表默认被选,单选框(radio)中要保证只能有一个选项被选中的话,要保证每一个的name属性相同

下拉框中,selected属性代表默认被选

特殊字符

&nbsp; 空格
&lt;   <
&gt;   >
&amp;  &
&reg;  ®

 

三.注意点

块级元素 与 行内元素:

块级元素: 独占一行
      常见的块级元素:  <h1>-<h6>   <p>    <li>  <div> <table>  

行内元素: 元素的宽度是根据内容来是适配的.
      常见的行内元素:   <a> <img> <i> <b> <u> <span>

文本级元素 和非文本级元素:

文本级元素下只能放文本元素
             : <a> <img> <i> <b> <u> <span> <p>

非文本级元素下能放任何元素(<p>标签是特殊的存在)
             :<h1>-<h6>   <p>    <li>  <div> <table>

块级元素是可以设置宽高的
行内元素是不可以设置宽高的

如果想使得块级元素拥有行内元素一般的可以放在一行的性质,则可以设置块级元素的style属性=inline-block

如果想使行内元素可以像块级元素一般的可以设置宽高的话,可以设置行内元素的style属性=inline-block

 

特殊标签:
p标签可以放行内元素,但是不能放任何的块级元素
img标签是一个行内元素,但是他是可以设置宽高的,业内也有人说img标签是行内块级元素
a标签<行内元素>的特殊之处 a标签内虽然可以不做改变也能放置块级元素;但是在实际工作中,我们需要将其转换成块级元素 使之可以放置块级元素

submit和button:
submit几乎所有的时候都是在表单中使用的
button也可以放在表单中,但更多时候是放在非表单中

placeholder是输入框中的默认文字,没有实际输入的时候,默认显示,在有输入的时候,就不显示

 

Sheldon_Ng
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML基础知识
12-20
HTML前端网页设计的一些小知识，非常适合初学者学习，
HTML入门基础2
m0_71154850的博客
10-28 2808
table>、和是HTML表格最基本的3个标签，其他标题标签、表头单元格可以没有，但是这3者必须要有。语法：、表头（thead）、表身（tbody）和表脚（tfoot）4部分。没有顺序，每个li标签、li标签独占一行（块 元素）语法：语法：有顺序，每个li标签独占一行（块元素）
【表单】table表格
10-11 142
1.组成 table 定义表格 tr 行 td 列（单元格） 例子： <table> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</...
table 边框： border cellspacing cellpadding
weixin_30753873的博客
08-07 795
1. border 为每个单元格的边框 2.cellspcing 相邻单元格之间的距离 3.cellpadding 单元格内部内容与单元格边框之间的距离 <td border="" border-width="1 0 0 1"(上、右、下、左) 1） 外边框与内边框的border一样粗 设置方式: <...
html 元素 一行显示,将所有HTML元素水平对齐在一行中
weixin_32956805的博客
06-15 1313
这应该这样做。我做的主要事情是将你剩下的所有物品都浮起来，然后我重新订购你的HTML中的图标来到你的进度条之前。我将进度条本身的所有边距空间都删掉了。我还将“块”的高度设置为容器的高度，并将块周围的边框更改为右边的边框。这样在任何地方都没有双边框。你会想要根据你的需要稍微调整一下宽度......确保你不要让宽度太小，否则你会打破它，进度条会掉到下一个线。 (基本上算数)HTML：强> ...
HTML标签学习
cxdxccxdxc的博客
05-10 437
标题标签 标题标签有6种，并且每个都是独占一行，分别是h1、h2、h3、h4、h5、h6，字体大小依次减小。 段落标签和换行标签 段落标签是p，不独占一行，段落标签结束就自动换行。换行标签是br(或者(br /))。 文本格式化标签 功能 标签 备注 加粗 strong、b strong的语义更强烈 倾斜 em、i em的语义更强烈 删除线 del、s del的语义更强烈 下划线 ins、u ins的语义更强烈 div、span标签 这是两个容器标签，div标签，一行只能放
HTML基础笔记
02-06
HTML 基础知识笔记HTML 基础知识笔记HTML 基础知识笔记HTML 基础知识笔记
html基础教程
07-22
资源名称：html基础教程内容简介：HTML基础-第一讲HTML基础-第二讲HTML基础第三讲---字体HTML基础第四讲---图像HTML基础第五讲---控制表格及其表项的对齐方式HTML基础第六讲---表格HTML基础第七讲---框架HTML基础第...
Html基础文档
09-13
HTML 免费
HTML 一行两列 - div块儿并列显示
SAGGITARXM
09-10 8155
一行两列 - div块儿并列显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--<form name="a...
HTML元素中的行级与块级元素不能放在一行。
alexsaurora的博客
04-12 2769
最近在工作中忽然发现了一个小问题，本来以为自己html标签学的挺好，今天终于明白，一直都是个菜鸟。 背景： 项目使用的是ant design的Grid布局，使用Row和Col。代码如下： &lt;Col&gt; &lt;div style={{display: flex}}&gt; &lt;Icon type="user" style={{ fon...
html删除一行增加一行,html怎么增加一行
weixin_39954698的博客
07-20 1398
html增加一行的方法：首先创建一个HTML示例文件；然后通过table标签创建一张表格；最后通过js代码“function addRow() {...}”方法使表格增加一行即可。本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。html表格新增一行和删除一行主要思路:现在页面中写一段你想要的html代码样式,然后设置为隐藏不可见(style="di...
html 第一行不缩进，第二行缩进，文字对齐
qq_36657291的博客
12-03 9313
https://www.cnblogs.com/moguzi12345/p/7872979.html &lt;p style="text-indent: -7rem;margin-left: 7rem;"&gt; &lt;img src="images/记录要求.png"&gt; &lt;span class="sc_sp1"&gt;记录要求：&lt;/span&g
HTML标签及使用
weixin_47697162的博客
04-25 100
1.什么是HTML 超文本标记语言（Hyper Text Markup Language） 2.W3C标准 World Wide Web Consortium（万维网联盟） W3C标准包括 1.结构化标准语言（HTML、XML） 2.表现标准语言（CSS） 3.行为标准（DOM、ECMAScript） 3.注解 快捷键：ctrl+/ 4.网页基本标签 标题标签：<title></title> 段落标签：<p></p> 换行标签：<br/&gt
将多个DIV放在一行显示的三种方法（超简洁，一目了然）
最新发布
qq_37967853的博客
11-08 1万+
将多个DIV放在一行显示的三种方法（超简洁，一目了然）
html如何一行显示,html – 同一行的中心和显示
weixin_31289735的博客
07-08 1312
我正在尝试显示两个< div>元素在同一条线上,但在中心.为了使它们居中,我不得不设置保证金：auto;但是,为了让两个人在同一条线上,我必须做以下任何一种情况：>设置显示：内联; (取消对中)>设置浮动：左;两者(取消对中)>设置显示：table-cell; (取消对中)我能做些什么来让两个div都在中心？或者我应该使用其他东西来做到这一点？我试过< span...
html 设置两个标签的相对距离_html 标签 属性
weixin_39886956的博客
01-27 872
大中小html 标签 属性2011-08-12html 标签 属性详解HTML标签和属性在HTML中，通常标签都是由开始标签和结束标签组成的，开始标签用“”表示，结束标签用“标签名>”表示。元素指的是包含标签在内的整体，除去标签的部分叫做内容。属性要在开始标签中指定，用来表示该标签的性质和特性。通常都是以“属性名=”值””的形式来表示，用空格隔开后，还可以指定多个属性。指定多个属性时不用区分...
HTML基础：表单标记详解
本章节详细介绍了HTML基础知识中的表单标记，这是网页设计和交互的重要组成部分。HTML (HyperText Markup Language) 是一种描述性标记语言，非编程语言，主要用于构建网页结构和呈现内容。表单标记`<form>`是HTML的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值