html 基本标签

<!-- 这是一段注释 -->

<h1>这是一级标题</h1> 标题标签 <h1> <h2> ....<h6>

<p>标签定义一个文本段落,一个段落含有默认的上下间距,段落之间会用这种默认间距隔开

&nbsp :代表空格 | &lt :小于 | &gt:大于

html块

1、div标签 块元素,表示一块内容,没有具体的语义。

2、span标签 行内元素,表示一行中的一小段内容,没有具体的语义。 《给一行的某几个字加样式可以包一下》

含样式和语义的标签

1、em标签 行内元素,表示语气中的强调词
2、i标签 行内元素,原本没有语义,w3c强加了语义,表示专业词汇
3、b标签 行内元素,原本没有语义,w3c强加了语义,表示文档中的关键字或者产品名
4、strong标签 行内元素,表示非常重要的内容


图像标签:

<img src ='xxx/test.png' alt ='一张图片' />

html链接

<a>标签可以在网页上定义一个链接地址

href ='xxx.com '定义跳转的地址

title属性定义鼠标悬停时弹出的提示文字框

'#' :表示链接到当前页面的顶部

<a href="#"></a> <!--  # 表示链接到页面顶部   -->
<a href="http://www.baidu.com/" title="跳转到百度">百度</a>
<a href="2.html">测试页面2</a>

<a href = "javascript:;"></a> 有a的样式,但是什么都不做

定义页面内滚动跳转

页面内定义了“id”或者“name”的元素,可以通过a标签链接到它的页面滚动位置,前提是页面要足够高,有滚动条,且元素不能在页面顶部,否则页面不会滚动。

<a href="#test1"> 测试1</a>

...

...

...

<h1 id ='test1'>跳转到的页面</h1>


有序列表

在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现,代码如下:

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

在网页上生成的列表,每条项目上会按1、2、3编号,有序列表在实际开发中较少使用。

无序列表

在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现,代码如下:

<ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ul>

定义列表

定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释,代码如下:

<h3>前端三大块</h3>
<dl>
    <dt>html</dt>
    <dd>负责页面的结构</dd>

    <dt>css</dt>
    <dd>负责页面的表现</dd>

    <dt>javascript</dt>
    <dd>负责页面的行为</dd>

</dl>


html表格

table常用标签

1、table标签:声明一个表格

2、tr标签:定义表格中的一行

3、td和th标签:定义一行中的一个单元格,td代表普通单元格,th表示表头单元格

table常用属性:

1、border 定义表格的边框

2、cellpadding 定义单元格内内容与边框的距离

3、cellspacing 定义单元格与单元格之间的距离

4、align 设置单元格中内容的水平对齐方式,设置值有:left | center | right

5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom

6、colspan 设置单元格水平合并

7、rowspan 设置单元格垂直合并


传统布局:

传统的布局方式就是使用table来做整体页面的布局,布局的技巧归纳为如下几点:

1、定义表格宽高,将border、cellpadding、cellspacing全部设置为0

2、单元格里面嵌套表格

3、单元格中的元素和嵌套的表格用align和valign设置对齐方式

4、通过属性或者css样式设置单元格中元素的样式

表格常用样式属性

border-collapse:collapse 设置边框合并,制作一像素宽的边线的表格




猜你喜欢

转载自blog.csdn.net/onionnmmn/article/details/80465126