HTML那些事

HTML初学的那些事（一）

这是我写的第一篇博客！刚刚从学校踏入工作岗位，以前学习的是java，到公司之后才知道在web开发之中还包括了前端，UI，美工，后台，数据库抽取，项目经理等职位。前端工程师应用HTML，CSS，AJAX等前端开发技术进行web前端的开发，直接编写向客户进行展示的部分的职位。想要做前端开发首要的学习的就是HTML的编写，通过它才能编写出展示的页面。

创新互联服务项目包括厦门网站建设、厦门网站制作、厦门网页制作以及厦门网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，厦门网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到厦门省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

HTML语言的定义：超文本标记语言。我自己的理解就是一些可以控制页面元素的标签的集合。

一，HTML标签

这是一个综述，<p></p>这既是一个标签一个最简单的段落标签，前面的是开始标签，后面的结束标签。在html4中如果没有结束标签也可以进行完整的显示的，但是在XHTML中以及以后的HTML5中结束标签是必须存在的，所以在以后的书写过程中结束标签是必不可少，即使是像换行的标签<br/>。

二，HTML基础

1，HTML的标题和段落

<h2>-<h7>都是是用来定义标题的文本标签，他们的大小粗细是顺序是<h2> > <h3> > <h4>的顺序来排列的。

段落标签是<p></p>,浏览器会在段落的前后自动的加上空格。使用<p></p>插入一个空行是一个不好的习惯，要是想插入一个空行可以使用<br/>。如果想在不产生新的段落的情况下进行换行也可以使用<br/>。

2，HTML的样式

用style属性来改变HTML元素的样式。

style属性的作用是提供了一种改变所有HTML样式的通用方法。

例子：<body style="background-color:#609">

<h3 style="background-color:#0C0">this is title</h3>

<p style="background-color:#FF0"> this is a paragraph</p>

</body>

上边的例子就是用来改变背景颜色。

第二个例子是设置文本的对齐方式

例子：<body style="background-color:#609">

<h3 style="text-align:center">this is title</h3>

<p style="background-color:#FF0"> this is a paragraph</p>

</body>

默认的对齐方式是左对齐。

3，HTML的超链接和锚标签

HTML的超链接用<a>标签实现，href属性定义的所要连接的位置或者文档。

例子：<a href="http://www.baidu.com/" target="_blank">连接到百度</a>

上述例子中的target属性的作用是规定链接打开的位置，上面的例子就是新打开一个页面在其中显示百度的主页面。

<a>的除了可以连接到其他网页外还可以连接到本网页的其他位置也就是锚标记。定位标记：

<a name="标记名">，跳到标签处的写法：<a href="#定位标记名">这样就可以调到当前页面的指定位置。

例子：<p>

<a href="#C4">查看 Chapter 4。</a>

</p>

<p>This chapter explains ba bla bla</p>

<h3>Chapter 3</h3>

<p>This chapter explains ba bla bla</p>

<h3><a name="C4">Chapter 4</a></h3>

<p>This chapter explains ba bla bla</p>

<h3>Chapter 5</h3>

<p>This chapter explains ba bla bla</p>

当想要直接连接到跳转后的页面想要的位置是也可以通过起来实现：

<a href="http://www.smalluv.com/somepage.html#tips">Jump to the Useful Tips Section</a>
在跳转的页面中会有：<a name="tips">Jump to the Useful Tips Section</a>

4，HTML表格

HTML中的表格由<table>来定义。<tr>用来定义每个表格的行，<td>用来定义每个单元格。

例子：

<tr>

<td>first</td>

</tr>

<tr>

</tr>

</table>

如何设置表格的表头？，我们可以使用<th>标签进行表头的设置。

例子：

<tr>

</tr>

<tr>

</tr>

</table>

有的时候空的单元格的边框不会被显示出来（在fireFox浏览器中可以）；为了避免这种事件的发生，通常在空的单元格中使用占用符来使它的边框显示出来。

其他小方法：

1，如何使表格带标题?

在<table>的标签下使用<caption>标签

<caption> 表格的标题</caption>

2,如何合并单元格？在需要合并的位置加上colspan（和并列）或者rowspan（合并行）

3,如何设置单元格边距和单元格间距？

边距：<table cellpadding="10">

间距：<table cellspacing="10">

5，HTML的列表

HTML中的列表可以分为有序列表和无序列表。

（1）无序列表：

起始于<ul> 标签。每个列表项始于 <li>。

例子：

<ul>

 <li>Coffee</li>
 <li>Milk</li>
 </ul>

无序列表的样式：实心点：<ul type="disc">,空心点：<ul type="circle">,实心方框：

(2)有序列表：

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>

 <li>Coffee</li>
 <li>Milk</li>
 </ol>

有序列表的排序方式：type="a/1/A/I、i"

列表可以进行嵌套

文章题目：HTML那些事
浏览路径：https://www.cdcxhl.com/article4/jcdiie.html

成都网站建设公司_创新互联，为您提供响应式网站、定制网站、服务器托管、移动网站建设、网站营销、用户体验

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容