前端HTML_html button id-程序员宅基地

技术标签: 前端  html  JavaWeb  

目录

HTML结构

认识HTML标签

HTML文本基本结构

标签的层次结构

快速生成代码框架

HTML常见标签

注释标签

标题标签: h1-h6

段落标签: p

换行标签: br

格式化标签

图片标签: img

超链接标签: a

表格标签

列表标签

表单标签

form

input

label

select

textarea

无语义标签

HTML特殊字符


HTML结构

认识HTML标签

<body>Hello World</body>
<body id="aaa">Hello World</body>

<body>为开始标签</body>为结束标签

基本都是成对出现的,只有少数单标签

开始标签中可能会带有 "属性". id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)

同一个html中,不能有两个id相同的标签

不同的标签可能支持不同的属性(也叫元素)

HTML文本基本结构

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        Hello World
    </body>
</html>

html 标签是整个 html 文件的根标签(最顶层标签)

head 标签中写页面的属性

body 标签中写的是页面上显示的内容

title 标签中写的是页面的标题

标签的层次结构

head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)

title 是 head 的子标签. head 是 title 的父标签.

head 和 body 之间是兄弟关系.

标签之间的结构关系, 构成了一个 DOM 树

DOM 是 Document Object Mode (文档对象模型) 的缩写.

右键-检查 或者 F12

快速生成代码框架

使用 !,快速生成代码框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的标题</title>
</head>
<body>
    
</body>
</html>

HTML常见标签

注释标签

<!-- 我是注释 -->

ctrl + / 快捷键可以快速进行注释或取消注释

标题标签: h1-h6

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

有六个, 从 h1 - h6. 数字越大, 则字体越小.

段落标签: p

<p>这是第一段</p>
<p>这是第二段</p>
<p>这是第三段</p>

lorem可以生成随机字符串

段落和段落之间有一定的间隙,主要是为了区分段落和段落

当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)

自动根据浏览器宽度来决定排版.

html 内容首尾处的换行, 空格均无效.

在 html 中文字之间输入的多个空格只相当于一个空格.

html 中直接输入换行不会真的换行, 而是相当于一个空格.

换行标签: br

<p>这是第一段Lorem ipsum dolor sit amet consectetur adipisicing elit.<br/>
        Magnam vero natus maxime sint voluptatum incidunt tenetur</p>

br 是 break 的缩写.

表示换行.br 是一个单标签(不需要结束标签)

br 标签不像 p 标签那样带有一个很大的空隙.

<br/>是规范写法. 不建议写成<br>

格式化标签

<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

加粗: strong 标签 和 b 标签

倾斜: em 标签 和 i 标签

删除线: del 标签 和 s 标签

下划线: ins 标签 和 u 标签

使用 CSS 也可以完成类似的效果. 实际开发中以 CSS 方式为主

图片标签: img

<img src="fy.jpg">

img 标签必须带有 src 属性. 表示图片的路径

关于目录结构:

对于一个复杂的网站, 页面资源很多, 这种情况可以使用目录把这些文件整理好.

1. 相对路径: 以 html 所在位置为基准, 找到图片的位置.

同级路径: 直接写文件名即可 (或者 ./)

下一级路径: image/1.jpg

上一级路径: ../image/1.jpg

2. 绝对路径: 一个完整的磁盘路径, 或者网络路径.

磁盘路径 D:\rose.jpg

网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png

<img src="fy.jpg" alt="我是" title="这个人是" 
    width="500px" height="600px" border="5px">
<img src="fyy.jpg" alt="我是" title="这个人是" 
    width="500px" height="600px" border="5px">

img 标签的其他属性

alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.

title: 提示文本. 鼠标放到图片上, 就会有提示.

width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.

border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.

超链接标签: a

<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="fy.jpg">本地图片</a>
<a href="test.html">本地网站</a>
<a href="#">不跳转</a>

href: 必须具备, 表示点击后会跳转到哪个页面.

target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

表格标签

table 标签: 表示整个表格

tr: 表示表格的一行

td: 表示一个单元格

th: 表示表头单元格. 会居中加粗

thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)

tbody: 表格得到主体区域.

table 包含 tr , tr 包含 td 或者 th

一般用css实现table属性

align 是表格相对于周围元素的对齐方式. align="center" (不是内部元素的对齐方式)

border 表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框.

cellpadding: 内容距离边框的距离, 默认 1 像素

cellspacing: 单元格之间的距离. 默认为 2 像素

width / height: 设置尺寸

<table align="center" border="1" cellpadding="20" cellspacing="0" width="400"height="300">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>10</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>11</td>
    </tr>
</table>

效果

列表标签

    <!--无序列表-->
<ul>
    <li>咬人猫</li>
    <li>兔总裁</li>
    <li>阿叶君</li>
</ul>
    <!--有序列表-->
<ol>
    <li>咬人猫</li>
    <li>兔总裁</li>
    <li>阿叶君</li>
</ol>
    <!--自定义列表-->
<dl>
    <dt>我的老婆们</dt>
    <dd>咬人猫</dd>
    <dd>兔总裁</dd>
    <dd>阿叶君</dd>
</dl>

无序列表[重要] ul(整个无序列表) li(列表项,一个列表中包含多个表项)

有序列表[用的不多] ol(整个有序列表) li()

自定义列表[重要] dl (整个列表) dt (小标题) dd (标题里面的内容)

效果

表单标签

通过表单,可以让用户和服务器进行简单的交互

form

表示整个表单

表示用户输入的数据最重要提交给谁,写一个具体的url地址(服务器地址)

<form action="test.html">
... [form 的内容]
</form>

input

表示一些具体的输入控件,比如,输入框,提交按钮,上传文件按钮

type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.

name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.

value: input 中的默认值.

checked: 默认被选中. (用于单选按钮和多选按钮)

maxlength: 设定最大长度.

<!--单行文本框-->
<input type="text">
<br/>
<!--密码框-->
<input type="password">
<br/>
<!--单选框-->
性别:
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女
<br/>
<!--复选框-->
爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">打游戏
<br/>
<!--普通按钮-->
<input type="button" value="我是个按钮">
<br/>
<!--提交按钮-->
<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>
<br/>
<!--清空按钮-->
<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
    <input type="reset" value="清空"> 
</form>
<br/>
<!--选择文件-->
<input type="file">

效果

label

搭配 input 的单选/复选框

<label for="male">男</label> <input id="male" type="radio" name="sex">
<label for="famale">女</label> <input id="famale" type="radio" name="sex">

点文字也可以

select

下拉菜单

<select>
    <option>北京</option>
    <option selected="selected">西安</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
    <option>杭州</option>
</select>
<select>
    <option>--请选择年份--</option>
    <option>1991</option>
    <option>1992</option>
    <option>1993</option>
    <option>1994</option>
    <option>1995</option>
</select>

效果

textarea

文本域中的内容, 就是默认内容, 注意, 空格也会有影响.rows 和 cols 也都不会直接使用, 都是用 css 来改的.

<textarea rows="3" cols="50">
</textarea>

效果

无语义标签

div 标签, division 的缩写, 含义是 分割

span 标签, 含义是跨度

div 是独占一行的

span 不独占一行

<div>
    <span>咬人猫</span>
    <span>咬人猫</span>
    <span>咬人猫</span>
</div>
<div>
    <span>兔总裁</span>
    <span>兔总裁</span>
    <span>兔总裁</span>
</div>
<div>
    <span>阿叶君</span>
    <span>阿叶君</span>
    <span>阿叶君</span>
</div>

效果

HTML特殊字符

有些特殊的字符在 html 文件中是不能直接表示的

空格:&nbsp;

小于号:&lt;

大于号:&gt;

按位与:&amp;

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/PepDokHa/article/details/124899426

智能推荐

JSTL中 fn 标签库的使用_jstl中<fn:split>标签的功能-程序员宅基地

文章浏览阅读5k次。在jstl中的fn标签也是我们在网页设计中经常要用到的很关键的标签,在使用的时候要先加上头http://java.sun.com/jsp/jstl/functions" prefix="fn"%>就可以使用fn标签了。使用此标签可以帮我们在jsp页面不再嵌入那么多的java代码,如分割函数split()的使用等。具体使用方法请参见下表:_jstl中标签的功能

PageRank算法以及Python实现(简洁版)_python实现pageranksuanfa-程序员宅基地

文章浏览阅读1.3w次,点赞10次,收藏82次。简述PageRank有点被神化了,其实公式很简单。文章目录简述算法模型定义Flow版本Google Formula实现算法主要是分为两种:The ‘Flow’ formulaThe Google formula模型定义很多个网页,直接存在链路关系,设为G,N*N的矩阵这里先只考虑有向无权无环图,即边有方向,且权重都一样,且没有自己到自己的边(环)。N为节点数或者是网页数..._python实现pageranksuanfa

反向传播学习算法_fanxiangxuexi-程序员宅基地

文章浏览阅读845次。1969年被发明,但直到上世级八十年代才得到重视。通用的网络训练伪代码:function neural-network-learning( training-records ) returns networknetwork start loopfor each example in training-records donetwork-output = neural-net_fanxiangxuexi

MCU编程_基础-程序员宅基地

文章浏览阅读584次。包含头文件符号的区别有这样的包含头文件语句#include <reg52.h>#include"reg52.h"两者区别在于:<>:编译器先进入软件安装文件目录下寻找这个头文件,如果这个目录下没有这个文件,则会报错。"":编译器先进入当前工程文件夹目录下寻找这个头文件,如果这个目录下没有这个文件,则会进入软件安装文件目录下寻找这个头文件,若两个地方都..._mcu编程

ODPS JDBC链接方式_odps-jdbc-程序员宅基地

文章浏览阅读1.2k次。这里写目录标题MAVEN正文MAVEN<dependency> <groupId>com.aliyun.odps</groupId> <artifactId>odps-jdbc</artifactId> <version>3.0.1</version> </dependency>正文import java.sql.Connection;import java.sql._odps-jdbc

凡事求慎始善终-曾仕强-程序员宅基地

文章浏览阅读585次。凡事求慎始善终一、慎始指谋定而后动,必须和干部互动、好商量。二、让干部先开口,才听得见不一样的声音,好意见。三、慎始不一定善终,必须重视过程中阶段性的调整。  你太太生小孩的时候,产房里面有小孩声音传出来“ 哇!哇!哇!”。请问你第一句话是什么?你敢不敢问“是男的,是女的”?不敢。会传的你很难听。你只有一个反应:看几分几秒生的。一个人出生的时候,时间非常重要。只要你..._曾仕强辞职能要赔偿吗

随便推点

VP9 vs H.265——下一代视频编码标准的王道之争-程序员宅基地

文章浏览阅读1k次。目前下一代主流的视频编码标准有 ITU-T VCEG 推出来的 H.265 和 Google 推出 VP9 。H.265 在 H.264 的基础上保留其中的部分技术,并对相关技术加以改进研发而成。新技术主要通过提升压缩效率、鲁棒性,提高错误恢复能力,减少实时时延、减少信道获取时间等方面,让视频编码达到效率更高。同时 H.265 可以实现利用 1~2Mbps 传输速度传送 720P 普..._upto 100 mbps for h.265, vp9 upto 130 mbps for h.26

element ui实现抽屉效果_抽屉效果的导航菜单-程序员宅基地

文章浏览阅读1.2k次。抽屉效果的导航菜单看了很多应用,觉得这种侧滑的抽屉效果的菜单很好。不用切换到另一个页面,也不用去按菜单的硬件按钮,直接在界面上一个按钮点击,菜单就滑出来,而且感觉能放很多东西。关于实现,搜索了一下,有如下两种:1.用SlidingDrawer:但是不知道为什么这个类官方不建议再继续用了:Deprecated since API level 172.用DrawerLayout:Guide在这里:库的..._elementui 抽屉菜单

2021牛客多校#4 H-Convolution_convolution 牛客多校-程序员宅基地

文章浏览阅读131次。原题链接 https://ac.nowcoder.com/acm/contest/11255/H题目大意定义运算⊗:•设pip_ipi​表示第iii个素数,若x=∏ipiai,y=∏ipibix=\prod_{i}p^{a_i}_{i} ,y=\prod_{i}p^{b_i}_{i}x=∏i​piai​​,y=∏i​pibi​​,则x⊗y=∏ipi∣ai−bi∣x⊗y=\prod_{i}p^{|a_i-b_i|}_{i}x⊗y=∏i​pi∣ai​−bi​∣​。现在有一个长度为n(1≤n≤10_convolution 牛客多校

Java多线程中经典案例——生产者与消费者_java生产者的作用-程序员宅基地

文章浏览阅读134次。该问题描述了两个共享固定大小缓冲区的线程——即所谓的“生产者”和“消费者”——在实际运行时会发生的问题。生产者的主要作用是生成一定量的数据放到缓冲区中,然后重复此过程。与此同时,消费者也在缓冲区消耗这些数据。解决问题的思想:让消费者在商品为空的时候进行休眠等等待生产者运行后的唤醒 ,让生产者在商品为最大限制的时候进行休眠不再生产。利用 wait / notifyAll 解决代码示例:商品仓库类:class Obj{//定义一个仓库 //定义生产的产品goods的初始值为0; priv_java生产者的作用

在FireFox中使用IE Tab插件_ie tab 火狐插件-程序员宅基地

文章浏览阅读6.3k次。现在发现FireFox用上IE插件后就能像Netscape一样支持两种浏览器模式了下载的官发网址如下:http://addons.mozine.cn/firefox/53/history/,如果你的FireFox是3.03版本以上的,用最新的(现在是IE Tab 1.5.20080310版),我的FireFox是2.0.0.12的,所以我用了历史版本IE Tab 1.3.3.20070528。直接_ie tab 火狐插件

安装mplayer遇到的问题_mplayer av_alloc_vdpaucontext, version libavcodec_-程序员宅基地

文章浏览阅读1.9k次。1.必须存在的软件gtk2-devel(版本任意) glib2-devel(版本任意) libpng(版本任意) libpng-devel(版本任意)yasm2.没有声音昨晚,我试了一下CentOS下安装的mplayer播放器,能看到时间在走,就是没有声音。在网上找到许多朋友也遇到类似的问题。他们的解决方法是: $ mknod /dev/dsp c_mplayer av_alloc_vdpaucontext, version libavcodec_58

推荐文章

热门文章

相关标签