1.认识HTML标签

2.HTML文件基本结构

3.HTML常见标签

3.1注释标签

3.2标题标签：h1~h6

3.3段落标签：p

3.4换行标签：br

3.5格式化标签

3.6图片标签：img

3.7超连接标签：a

3.8表格标签

3.9列表标签

3.10表单标签

4.补充

1.认识HTML标签

HTML代码是由“标签（Tag）”构成的；

形如：

<body>hello</body>

标签名 (body) 放到 < > 中；
大部分标签都是成对出现，<body> 为开始标签， </body> 为结束标签；
少数标签只有开始标签，称为“单标签”；
开始标签和结束标签之间，写的是标签的内容；
开始标签中可能会带有“属性”，id属性相当于给这个标签设置了一个唯一的标识符；
等于号两边不要有空格；

2.HTML文件基本结构

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

DOM 是 Document Object Model (文档对象模型) 的缩写；

快速生成代码框架：

在 IDEA 中创建文件 xxx.html ，直接输入 ! ，按 tab 键，此时能自动生成代码的主体框架；

3.HTML常见标签

3.1注释标签

注释不会显示在界面上，目的是提高代码的可读性；

<!-- 我是注释 -->

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

3.2标题标签：h1~h6

有六个，从 h1 - h6，数字越大，则字体越小；

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

3.3段落标签：p

<p>这是一个段落</p>

注意：

p 标签之间存在一个空隙
当前的 p 标签描述的段落，前面还没有缩进
自动根据浏览器宽度来决定排版
html 内容首尾处的换行,，空格均无效
在 html 中文字之间输入的多个空格只相当于一个空格
html 中直接输入换行不会真的换行，而是相当于一个空格

3.4换行标签：br

br是break的缩写，表示换行；

br是一个单标签
<br/> 是规范写法

3.5格式化标签

<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标签

3.6图片标签：img

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

<img src="rose.jpg">

此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中；

img 标签的其他属性：

alt：替换文本；当文本不能正确显示的时候，会显示一个替换的文字；
title：提示文本，鼠标放到图片上，就会有提示；
width/height：控制宽度高度（ps：高度和宽度一般改一个就行，另一个会等比例缩放，否则容易失衡）；
border：边框，参数是宽度的像素，但一般用CSS来设定；

<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px" border="5px">

注意：

属性可以有多个，不能写到标签之前；
属性之间用空格分隔。可以是多个空格，也可以是换行；
属性之间不分先后顺序；
属性使用“键值对”的格式来表示；

关于目录：

相对路径：以 html 所在位置为基准，找到图片的位置（建议使用）；（同级路径直接写文件名即可；下一级路径：image/1.jpg ；上一级路径：../image/1.jpg）；
绝对路径：一个完整的磁盘路径，或者网络路径；例如：磁盘路径：D:\rose.jpg

以相对路径为例：

<img src="data:image/rose2.jpg" alt="">

3.7超连接标签：a

href：必须具备，表示点击之后会跳转到哪个页面；
target：打开方式；

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

链接的几种形式：

外部链接：href 引用其他网站的地址

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

内部链接：网站内部页面之间的链接，写相对路径即可（在一个目录中, 先创建一个 1.html, 再创建一个 2.html）；

<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>

空链接：使用 # 在 href 中占位；

<a href="#">空链接</a>

下载链接：href 对应的路径是一个文件 (可以使用 zip 文件)；

<a href="test.zip">下载文件</a>

网页元素链接：可以给图片等任何元素添加链接(把元素放到 a 标签中) ；

<a href="http://www.sogou.com"> <img src="rose.jpg" alt="">
</a>

锚点链接：可以快速定位到页面中的某个位置；

<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one"> 第一集剧情 <br> 第一集剧情 <br> ...
</p>
<p id="two"> 第二集剧情 <br> 第二集剧情 <br> ...
</p>
<p id="three"> 第三集剧情 <br> 第三集剧情 <br> ...
</p>

禁止 a 标签跳转：<a href="javascript:void(0);"> 或者 <a href="javascript:;">

3.8表格标签

基本使用：

table标签：表示整个表格
tr标签：表示表格的一行
td：表示一个单元格
th：表示表头单元格，会居中加粗
thead：表格的头部区域（注意和th区分，范围要比th大）
tbody：表格的主体区域

table 包含 tr，tr 包含 td 或者 th；

合并单元格：

跨行合并：rowspan="n"
跨列合并：colspan="n"

步骤：

1. 先确定跨行还是跨列

2. 找好目标单元格(跨列合并，左侧是目标单元格；跨行合并，上方是目标单元格)

3. 删除的多余的单元格

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

3.9列表标签

主要用来布局（整齐）

3.10表单标签

表单是让用户输入信息的重要途径；

分成两个部分：

表单域：包含表单元素的区域. 重点是 form 标签；
表单控件：输入框，提交按钮等，重点是input标签；

form标签：

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

描述了要把数据按照什么方式，提交到哪个页面中；

input标签：

各种输入控件，单行文本框,，按钮，单选框，复选框；

type（必须有），取值种类很多多, button, checkbox, text, file, image, password, radio 等；
name：给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选一；
value：input中的默认值；
checked：默认被选中. (用于单选按钮和多选按钮)；
maxlength：设定最大长度；

1）：文本框

<input type="text">

2）：密码框

<input type="password">

3）：单选框

性别:
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女

注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果.

4）：复选框

爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox"> 打游戏

5）：普通按钮

<input type="button" value="我是个按钮">

（需要搭配JS使用）

6）：提交按钮

<form action="test.html"> <input type="text" name="username"> <input type="submit" value="提交">
</form>

提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送；

7）：清空按钮

<form action="test.html"> <input type="text" name="username"> <input type="submit" value="提交"> <input type="reset" value="清空">
</form>

清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置

8）：选择文件

<input type="file">

点击选择文件, 会弹出对话框, 选择文件

lable标签

搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.

for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)

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

select标签

下拉菜单

option 中定义 selected="selected" 表示默认选中.

<select> <option>北京</option> <option selected="selected">上海</option>
</select>

textarea 标签

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

文本域中的内容, 就是默认内容, 注意, 空格也会有影响.

rows 和 cols 也都不会直接使用, 都是用 css 来改的

无语义标签: div & span

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

span 标签, 含义是跨度

就是两个盒子. 用于网页布局 ；

div是独占一行的，是一个大盒子
span不独占一行，是一个小盒子

4.补充

Web——HTML常见标签及用法相关推荐

HTML常见标签的用法
标签关系:并列关系与包含关系骨架标签: <!doctype html>//表面是html类型文件 <html lang="en">//表面语言种类,en表 ...
HTML的常见标签及用法
一.注释标签形如:的格式就叫做注释标签,在代码中起到解释说明的作用. 二.标题标签在HTML中有六种格式的标题标签类型,分别是h1,h2,h3,h4,h5,h6.对应的 ...
php中 datalist,html5 datalist标签的用法是什么？这里有datalist标签的用法实例
本篇文章主要为大家讲述了关于html5 datalist标签的用法及html5 datalist标签的用法实例.本文说了两个常用的选项框的实例供大家选择观看,下面就让我们一起来看这篇文章吧我们先来看 ...
WEB应用常见15种安全漏洞一览
摘要: 安全第一! 原文:web 应用常见安全漏洞一览作者:深予之 (@senntyou) Fundebug遵循创意共享3.0许可证转载,版权归原作者所有. 1. SQL 注入 SQL 注入就是通过 ...
【HTML学习】——HTML常见标签属性和方法介绍
目录 1.HTML分块--------< div> 2.HTML段落--------< p> 3.HTML标题--------< h1>-< h6> 4 ...
iframe是什么？html中iframe标签的用法详解
经常进行页面布局的人对于HTML中的iframe标签一定不陌生,iframe标签是一个内联框架,说白了就是用来在当前 HTML 页面中嵌入另一个文档的.刚刚接触前端的小伙伴可能不知道html中ifra ...
前端~html~HTML零基础（一） ~HTML常见标签/如何开发一个html文件/在网页查看源码
文章目录引入-什么是HTML HTML基础 html标签 html元素 html开发工具 html文件基本结构/网页结构 HTML常见标签注释标签标题标签段落标签换行标签格式化标签图片标 ...
表单标签和iframe标签的用法
今天来看一下表单标签和frame标签的用法. 1. 表单标签表单(form)是用户输入信息与网页互动的一种形式.大多数情况下,用户提交的信息会发给服务器,比如网站的搜索栏就是表单.表单由一种或多种的 ...
html5比html4的音频使用方法,HTML5 audio标签的用法示例
您的位置:首页 - 教程 - HTML5 - 正文 HTML5 audio标签的用法示例标签定义声音,比如音乐或其他音频流.html5 audio可以不用Flash插件就可以听音乐看视频,并不是全部 ...

Web——HTML常见标签及用法

1.认识HTML标签

2.HTML文件基本结构

3.HTML常见标签

3.1注释标签

3.2标题标签：h1~h6

3.3段落标签：p

3.4换行标签：br

3.5格式化标签

3.6图片标签：img

3.7超连接标签：a

3.8表格标签

3.9列表标签

3.10表单标签

4.补充

Web——HTML常见标签及用法相关推荐

最新文章

热门文章