HTML前端(一)----DIV布局

最新推荐文章于 2024-04-29 16:27:27 发布

CS_GaoMing

最新推荐文章于 2024-04-29 16:27:27 发布

阅读量1w

点赞数 1

分类专栏： HTML 文章标签： HTML前端

本文链接：https://blog.csdn.net/CS_GaoMing/article/details/86547446

版权

HTML的基本结构

使用sublime的快捷键生成HTML的模版文件格式.

生成HTMl5.0的文件格式 ! + tab

<!-- 这个是注释符号测试. -->
<!-- 在sublime下输入！再按一下tab键即可快速生成. -->
<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>          
    </body>
</html>

生成HTML1.0的文件格式 html:xt +tab

<!-- html:xt，再按一下tab键即可快速实现文件的格式生成. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title> xhtml 1.0  </title>
</head>
<body>
</body>
</html>

说明

HTML一般是使用成对的 <*></*> 来描述的，但是有极少数的例外是不需要的。

<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>这个是网页标题</title>
    </head>
    <body>
		这个是网页的主体部分，用来描述网页的内容的。          
    </body>

<!-- 这个是网页的结束，成对的出现，与开始部分是想对应的. -->
</html>

若需要使用快捷键生成，则需要安装对应的插件.

推荐安装的插件如下：

Emmet
目前，Emmet 已经可以通过 Package Control 安装了。如果你的 Sublime Text 3 还没有安装 Package Control，请参照以下方法安装。

为 Sublime Text 3 安装 Package Control 组件：

按 `Ctrl + `` 打开控制台，粘贴以下代码到底部命令行并回车如下：
```
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp =   sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())	
```
之后在左下角看到提示，也就是没有 = 来回小幅度滑动，此时退出sublime，注意退出方式是file->exit ,在 Perferences->Package Settings 中看到 Package Control，则表示安装成功，或者在 Perferences->Package Settings 中看到 Package Control，则表示安装成功.
使用 Package Control 安装 Emmet 插件：

在 Package Control 中选择 Install package 或者按 Ctrl+Shift+P，打开命令板输入 pci 然后选择 Install Package,也就是单击即可安装，(若是没有找到说明已经完成安装)，同时左小角有一个小的 = 小幅度滑动.
安装emmet的插件
- 搜索输入 emmet，先安装emmet，再找到 Emmet Css Snippets，点击就可以自动完成安装。若是已经安装则无法找到，但是可以在已安装插件处找到…
  
  插件安装部分完成，若是不成功，理由只有一个就是你的数据无法找到，可以通过vpn实现自己的安装，没有vpn使用代理连接墙外服务器的几乎失败。

购买外国的VPS安装VPN代理

推荐服务器提供商-搬瓦工，使用优惠劵后，年费约198人民币。单核-500MB内存-1Gb/s-10GB SSD硬盘+500GB/mon。比较便宜，应该是最便宜的了，但是完全可以实现一个人的正常使用，看看720p视频之类的还是完全无压力的。
方法自己找，但是可以借鉴此人的：https://juejin.im/post/5b14c5115188257d37761a5a

HTML标签

段落标签

<p>&nbsp;&nbsp;&nbsp;（空格，三个空格略等于一个中文汉字占据宽度，此法的空格是不精确的，用css样式可以精确定义.）<br />


<!-- 这个是换行符号. -->
<br />

这个是段落标签，带样式，带样式的意思是不仅仅是显示文档信息还有段落的格式问题，如段落缩进，行间距等。</p>

块标签
- <div> 标签块元素，表示一块内容，没有具体的语义-无样式。
- <span> 标签行内元素，表示一行中的一小段内容，没有具体的语义-无样式。
插入-图片链接

<img src="images/logo.png" alt="百度logo">

插入-网址超链接

<a href="这是一个新的网址.html">点我去新网址！</a>

点图片超链接到网页地址

<a href="http://www.baidu.cn" title="去到百度的网站" target="_blank"><img src="images/logo.png" alt="百度logo">

列表标签


<!-- 快速生成有序列表，会标有1,2,3...如下： -->
	<!-- ol>li*3 + tab -->

	<ol>
		<li>html</li>
		<li>css</li>
		<li>javascript</li>
	</ol>


<!-- 快速生成无序列表，没有标号，只有小黑点，如下： -->
	<!-- ul>(li>a{标题})*3  -->
	<ul>
		<li><a href="#">标题</a></li>
		<li><a href="#">标题</a></li>
		<li><a href="#">标题</a></li>
	</ul>

HTML-表格

1、<table>标签：声明一个表格，它的常用属性如下：

border属性定义表格的边框，设置值是数值.
cellpadding属性定义单元格内容与边框的距离，设置值是数值.
cellspacing属性定义单元格与单元格之间的距离，设置值是数值.
align属性设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right。

2、<tr>标签：定义表格中的一行.

3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：

align 设置单元格中内容的水平对齐方式,设置值有：left | center | right.
valign 设置单元格中内容的垂直对齐方式 top | middle | bottom.
colspan 设置单元格水平合并，设置值是合并的列数值.
rowspan 设置单元格垂直合并，设置值是合并的行数值.

点击:代码展开

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格</title>
</head>
<body>
	<h1>表格</h1>

	<!-- cellspacing设置为0，则表格线合并. --><

最低0.47元/天解锁文章

CS_GaoMing

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML前端(一)----DIV布局

HTML的基本语法使用，只包含DIV部分，非CSS+DIV实现...
复制链接

扫一扫

专栏目录