html常用标签

title标签
<title>网页的标题</title>

title也是有助于SEO搜索引擎优化的 HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系。 HTML中所有的文字之间,如果有空格、换行、tab都将被折叠为一个空格显示。

h系列
<h1> 到 <h6> 都是标签:
<h1></h1> 一级标题
<h2></h2> 二级标题
……
<h6></h6> 六级标题

h是容器级标签,理论上可以放置p,ul只是法律上允许

p标签
段落,是英语paragraph“段落”缩写。
HTML标签是分等级的,HTML将所有的标签分为两种:容器级、文本级。
顾名思义,容器级的标签,里面可以放置任何东西;文本级的标签里面,只能放置文字、图片、表单元素。

p标签是一个文本级标签。从学习p的第一天开始,就要死死记住:p里面只能放文字、图片、表单元素。其他的一律不能放。
试着把h放到p到里:
1   <p>
2       我是一个小段落
3       <h1>我是一个主标题</h1>
4   </p>
浏览器不允许你这么做,我们使用Chrome的F12审查,你会发现,浏览器自己把p封闭掉了,不让你去包裹h1。

再次强调,p是一个文本级的标签,p里面只能放文字、图片、表单元素。

图片
页面上可以插入图片,能够插入的图片类型是:jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别,css课上讲。
不能往网页中插入的图片格式是:psd、ai
HTML页面不是直接插入图片,而是插入图片的引用地址,所以也要把图片上传到服务器上。
插入方法:
1![](baby.jpg)
img是英语image“图片”的简写
src 是英语source“资源”的简写,千万不要写成scr。
src是img标签的属性,baby.jpg是这个属性的值。

这个标签和我们之前学的,都不一样,因为这个标签不是“对儿”。自封闭标签,也称为单标签。
为什么?原因很简单,如果是对儿,里面就要有内容,表示给这个内容增加语义。比如
1<h1>哈哈哈哈,我是主标题啦!!!</h1>
图片就是一个图片,不需要给什么文字增加语义,所以就是自己一个人活得挺好:
1<img />

我们上午学习的meta也是自封闭标签:
1<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

alt属性

alt属性:
1![](baby.jpg)
alt是英语alternate“替代”的意思,就表示不管因为什么原因,当这个图片无法被显示的时候,出现的替代文字(有的浏览器不支持)

相对路径

HTML中插入图片,所以现在有两个文件,一个html文件,一个是jpg文件。
我们关心的就是这两个文件的相对位置。即使这个网站项目,被用u盘拷给了别人,只要相对路径不变。图片一定能够正常显示。
相对路径不会出现这种情况:
1aaa/../bbb/1.jpg
../要么不写,要么就写在开头。
超级链接
一个网站,是由很多html网页组成的,html网页之间能够通过超级链接互相跳转,从而形成了“网”。
语法:
1<a href="1.html">结婚照</a>

a是英语anchor“锚”的意思,就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。 href是英语hypertext reference超文本地址的缩写 a标签的另外两个属性

title 悬停文本
target 是否在新窗口中打开
target实际上是“目标”的意思。
<a href="09_img.html" title="很好看哦" target="_blank">结婚照</a>
blank就是“空白”的意思,就表示新建一个空白窗口。为毛有一个_ ,就是规定,没啥好解释的。
也就是说,如果不写target=”_blank”那么就是在相同的标签页打开,如果写了,就是在新的空白标签页中打开。
完整的超级链接:
<a href="1.html" title="悬停文本" target="_blank">链接的内容</a>
关于超级链接的herf里面也是相对路径

页面内的锚点:

锚点用name属性来设置,一个a标签如果name属性(或者id属性),那么就是页面的一个锚点。
1<a name="wdzp">我的作品</a>
2或者:
3<a id="wdzp">我的作品</a>`
如果有一个超级链接,指向页面中的锚点,那么就是:
1<a href="#wdzp">点击我就查看我的作品</a>

a是一个文本级的标签

比如一个段落中的所有文字都能够被点击,那么应该:
p包裹a:
1<p>
2   <a href="">段落段落段落段落段落段落</a>
3</p>
而不是a包裹p:
1<a href="">
2   <p>
3       段落段落段落段落段落段落
4   </p>
5</a>
列表标签
无序标签
无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的。
ul就是英语unordered list,“无序列表”的意思。
li 就是英语list item , “列表项”的意思。
你会发现,这是我们学习的第一个“组标签”,就是要么不写,要么就要写一组。
1   <ul>
2       <li>北京</li>
3       <li>上海</li>
4       <li>广州</li>
5       <li>铁岭</li>
6   </ul>
也就是说,所以的li不能单独存在,必须包裹在ul里面;反过来说,ul的“儿子”不能是别的东西,只能有li。

浏览器会默认的给无序列表小圆点的“先导符号” 但是,我们这里再次强调,ul的作用,并不是给文字增加小圆点的,而是增加无序列表的“语义”的。

有序标签
ordered list  有序列表,用ol表示
1   <ol>
2       <li>小苹果</li>
3       <li>月亮之上</li>
4       <li>最炫民族风</li>
5   </ol>
也就是说,ol和ul就是语义不一样,怎么使用都是一样的。
ol里面只能有li,li必须被ol包裹。li是容器级。
ol这个东西用的不多,如果想表达顺序,大家一般也用ul:
定义列表
定义列表也是一个组标签,不过比较复杂,出现了三个标签:
dl表示definition list 定义列表
dt表示definition title    定义标题
dd表示definition description 定义表述词儿
dt、dd只能在dl里面;dl里面只能有dt、dd
1   <dl>
2       <dt>北京</dt>
3       <dd>国家首都,政治文化中心</dd>
4       <dt>上海</dt>
5       <dd>魔都,有外滩、东方明珠塔、黄浦江</dd>
6       <dt>广州</dt>
7       <dd>中国南大门,有珠江、小蛮腰</dd>
8   </dl>

定义列表用法非常灵活,可以一个dt配很多dd: 定义列表用法非常灵活,可以一个dt配很多dd: dt、dd都是容器级标签,想放什么都可以。所以,现在就应该更加清晰的知道: 用什么标签,不是根据样子来决定,而是语义。

div和span

div和span是非常重要的标签,div的语义是division“分割”; span的语义就是span“范围、跨度”。 CSS课程中你将知道,这两个东西,都是最最重要的“盒子”。

1<div>
2       <h3>中国主要城市</h3>
3       <ul>
4           <li>北京</li>
5           <li>上海</li>
6           <li>广州</li>
7       </ul>
8   </div>
9
10  <div>
11      <h3>美国主要城市</h3>
12      <ul>
13          <li>纽约</li>
14          <li>洛杉矶</li>
15          <li>华盛顿</li>
16          <li>西雅图</li>
17      </ul>
    </div>

div在浏览器中,默认是不会增加任何的效果改变的,但是语义变了,div中的所有元素是一个小区域。 div标签是一个容器级标签,里面什么都能放,甚至可以放div自己

span也是表达“小区域、小跨度”的标签,但是是一个“文本级”的标签。 就是说,span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。 span里面是放置小元素的,div里面放置大东西的:

1   <p>
2               简介简介简介简介简介简介简介简介
3               <span>
4                   <a href="">详细信息</a>
5                   <a href="">购买</a>
6               </span>
            </p>

div标签是最最重要的布局标签,至于class是什么意思,下午说:

1<div class="header">
2       <div class="logo"></div>
3       <div class="nav"></div>
4   </div>
5   <div class="content">
6       <div class="guanggao"></div>
7       <div class="dongxi"></div>
8   </div>
    <div class="footer"></div>

所以,我们亲切的称呼这种模式叫做“div+css”。div标签负责布局,负责结构,负责分块。css负责样式。

表单

表单就是收集用户信息的,就是让用户填写的、选择的。

1<div>
2       <h3>欢迎注册本网站</h3>
3       <form>
4           所有的表单内容,都要写在form标签里面
5       </form>
    </div>

form是英语表单的意思。form标签里面有action属性和method属性 method属性表示用什么HTTP方法提交,有get、post两种

文本框
<input type="text" />
input表示“输入”,指的是这是一个“输入小部件”,
type表示“类型”,
text表示“文本”,指的是类型是一个文本框的输入小部件。

value表示“值”,value属性就是默认有的值,文本框中已经被填写好了:

<input type="text" value="默认有的值" />
密码框
1<input type="password" />
也就是说,input标签很神奇,又是文本框,又是密码框。
到底是啥?看type属性的值是什么,来决定。
如果type=”text”  文本框
如果type=”password” 密码框
单选按钮

Paste_Image.png

只能选一个,术语叫做“互斥”。
1<input type="radio" name="xingbie" /> 男
2<input type="radio" name="xingbie" /> 女
radio是“收音机”的意思,input的type的值,如果是radio就是单选按钮。
非常像以前的收音机,按下去一个按钮,其他的就抬起来了。所以叫做radio。

单选按钮,天生是不能互斥的,如果想互斥,必须要有相同的name属性。name就是“名字”。
1<input type="radio" name="xingbie" /> 男
2<input type="radio" name="xingbie" /> 女
默认被选择,就应该书写checked=”checked”
1<input type="radio" name="sex" checked="checked">
复选框
也是input标签,type是checkbox。 
1<p>
2   请选择你的爱好:
3   <input type="checkbox" name="aihao"/> 睡觉
4   <input type="checkbox" name="aihao"/> 吃饭
5   <input type="checkbox" name="aihao"/> 足球
6   <input type="checkbox" name="aihao"/> 篮球
7   <input type="checkbox" name="aihao"/> 乒乓球
8   <input type="checkbox" name="aihao"/> 打豆豆
9</p>
复选框,最好也是有相同的name(虽然他不需要互斥,但是也要有相同的name)
下拉列表
select就是“选择”,option“选项”。
select标签和ul、ol、dl一样,都是组标签。
1<select>
2   <option>北京</option>
3   <option>河北</option>
4   <option>河南</option>
5   <option>山东</option>
6   <option>山西</option>
7   <option>湖北</option>
8   <option>安徽</option>
9</select>
多行文本框(文本域)
text就是“文本”,area就是“区域”。
1<textarea cols="30" rows="10"></textarea>
这个标签,是个标签对儿。对儿里面不用写东西。如果写的话,就是这个框的默认文字。

cols属性表示columns“列”,rows属性表示rows“行”。
值就是一个数,表示多少行,多少列。
三种按钮
按钮也是input标签,一共有三种按钮:
普通按钮:
1<input type="button" value="我是一个普通按钮" />
button就是英语“按钮”的意思。value就是“值”的意思,按钮上面显示的文字。
提交按钮:
2<input type="submit" />
submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。
这个按钮点击,表单真的能提交。这个表单就会被提交到,form标签的action属性中的那个页面中去。
前端开发工程师,只需要关心页面的美、样式、板式、交互。至于数据的保存、读取,都是后台工程师做的事情。
3重置按钮:
1<input type="reset" />
reset就是“复位”的意思。
label标签
本质上讲,“男”、“女”这两个汉字,和input元素没有关系。
1<input type="radio" name="sex" /> 男
2<input type="radio" name="sex" /> 女

label就是解决这个问题的。
1<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
2<input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>

input元素要有一个id,然后label标签就有一个for属性,和id相同,就表示绑定了,这个label和input就有绑定关系了。

复选框也有label:
1<input type="checkbox" id="kk" />
2<label for="kk">10天内免登陆</label>  
什么表单元素都有label。
HTML杂项
HTML注释
任何的程序、代码都有注释,注释就是给程序员看的,不影响程序的。

适当的注释,能够让我们的程序更加可读,所以用中文提示自己,这里的程序是干什么的。
1   <!--这里是头部,还没有做完,准备加两天班弄完-->
2   <div>头部</div>
3   <!--这里是陈伟弄的,跟我没关系-->
4   <div>主要内容</div>
5   <!--这里是高俊负责的-->
6   <div>页尾</div>
HTML注释的语法
1<!--注释的内容-->
Sublime中按ctrl+/ 就是注释
字符实体
我们想在页面上输出“<h1>”这些字符,但是HTML认为这是一个标签,还没封闭。
1好高兴啊,今天我们学习了<h1>标签,老师说这个标签是主标题的语义。
所以,
1<
就是<的字符实体,什么意思呢?就是用常用字符表示这些符号的方式。
lt 就是英语less than 小于的意思;

1>
就是>的字符实体。
gt就是greater than 大于的意思。

1©
就是©  版权符号。

1 
nbsp就是英语non-breaking spacing不打断空格的意思,就是空格。

所以:
1哈    哈
空出了4个字的格,可以防止空白折叠现象。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart Material Design 菜单 顶

材质菜单基于MenuModel对象呈现菜单。 此菜单包含material-popup中的material-list和material-button,其文本或图标...

942
来自专栏知道一点点

八种创建等高列布局【出自w3c】

高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可...

1334
来自专栏偏前端工程师的驿站

CSS魔法堂:那个被我们忽略的outline

 在CSS魔法堂:改变单选框颜色就这么吹毛求疵!中我们要模拟原生单选框通过Tab键获得焦点的效果,这里涉及到一个常常被忽略的属性——outline,由于之前对其...

711
来自专栏Nian糕的私人厨房

WeChat 文章列表页面(一)

本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问...

1144
来自专栏个人随笔

列表,表格与媒体元素

一.列表   列表就是信息资源的一种展示形式  1.列表及其应用    1)无序列表      无序列表由<ul>标签和<li>标签组成,使用<ul>标签作为无...

36910
来自专栏coding

vue.js动画中的js钩子函数

在transition中还可以通过设置javascript钩子函数,实现自定义动画效果。

1083
来自专栏肖蕾的博客

解决安卓中XML文件声明高度 宽度无效的问题

1143
来自专栏青玉伏案

Web前端上万字的知识总结

下面是自己学HTML+DIV+CSS+JS时的学习笔记,给大家分享以下,相互学习。大二时候寒假在家无聊的时候想做点事,总结了一下web前端基础的东西,下面的每...

29610
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Vue.js(五)Vue的动画

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

1913
来自专栏C/C++基础

CSS3制作3D水晶糖果按钮

本人仿照20个漂亮 CSS3 按钮效果及优秀的制作教程中的BonBon(Candy)Button实现了其棒棒糖果按钮,如下图所示:

1211

扫码关注云+社区

领取腾讯云代金券