文章目录

一、页面内容
二、知识点
- 1.语句
- - 1.html的基本样式
  - 2.换行及下划线
  - 3.字体样式
  - 4.标题
  - 5.无序列表及有序列表
  - 6.网址和函数的引用
- 2.代码实现

一、页面内容

标题 hello world
我是宋体
我是隶书
我是加粗样式 我是斜体样式 我是下划线样式
我是加粗斜体下划线样式

我是第一段

我是第二段

111111

222222

333333

444444

555555

666666

下面是列表

列表1
列表2

列表3
列表4

有序列表1
有序列表2
有序列表3
有序列表4
有序列表5
有序列表6

点此前往度娘

点此前往贴吧
move!

死循环

二、知识点

1.语句

1.html的基本样式

<html><head><title>标题</title></head><body></body>
</html>

2.换行及下划线

<br>//换行
<hr>//下划线

3.字体样式

<font></font>//对字体的设置
<font color=" red（字体颜色）" size="6（字体大小）" face="隶书（字体格式）"></font>

我是隶书

  <b>我是加粗样式</b><i>我是斜体样式</i><u>我是下划线样式</u><p>我是段落</p><p align=center>//align是对齐方式</p>

我是加粗样式 我是斜体样式 我是下划线样式
我是加粗斜体下划线样式

我是段落

4.标题

<h1~6>//标题
<h1>111111</h1>
<h2>222222</h2>
<h3>333333</h3>
<h4 >444444</h4>
<h5>555555</h5>
<h6>666666</h6>

111111

222222

333333

444444

555555

666666

5.无序列表及有序列表

<ul>//无序列表
<ol>//有序列表
<li>//列表元素

type有：disc（默认实心圆）square（实心矩形）circle（空心圆）

<font color="red">
<h3>下面是列表</h3>
<ul type="square" style="color: rgb(75, 139, 192);"><li>列表1</li><li>列表2</li>
</ul>
<font face="宋体"><ul type="circle" style="font-size: xx-large"><li>列表3</li><li>列表4</li>
</ul>
</font>
</font>
<ol type="i" start="2"><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li><li>有序列表4</li><li>有序列表5</li><li>有序列表6</li>
</ol>
<br>

下面是列表

列表1
列表2

列表3
列表4

有序列表1
有序列表2
有序列表3
有序列表4
有序列表5
有序列表6

6.网址和函数的引用

<a href="http://www.baidu.com" target="_blank">
点此前往度娘
</a>
<hr><a href="https://tieba.baidu.com" target="_blank"><font color="blue">点此前往贴吧</font>
</a><br>
<a href="javascript:alert('get out away!!!')">move!
</a>
<hr>
<a href="javascript:test()">死循环
</a>

函数的定义放于/body>后</html前

</body>
<script>function test(){alert('无情铁手！！！')alert('致残打击！！！')alert('大杀四方！！！')while(true){  alert('西内！！！')}}
</script>
</html>

2.代码实现

代码如下（示例）：

<html><head><title>标题</title></head><body>hello world<br><font color="purple" size="5" face="宋体">我是宋体</font><br><font color=" red" size="6" face="隶书">我是隶书</font><br><b>我是加粗样式</b><i>我是斜体样式</i><u>我是下划线样式</u>
<br>
<font color="purple" size="7" face="方正舒体">
<b><i><u>我是加粗斜体下划线样式</b></i></u>
</font>
<p align="left" >我是第一段</p>
<p align="center">我是第二段</p>
<h1>111111</h1>
<h2>222222</h2>
<h3>333333</h3>
<h4 align="right">444444</h4>
<h5>555555</h5>
<h6>666666</h6>
<hr>
<font color="red">
<h3>下面是列表</h3>
<ul type="square" style="color: rgb(75, 139, 192);"><li>列表1</li><li>列表2</li>
</ul>
<font face="宋体"><ul type="circle" style="font-size: xx-large"><li>列表3</li><li>列表4</li>
</ul>
</font>
</font>
<ol type="i" start="2"><li>有序列表1</li><li>有序列表2</li><li>有序列表3</li><li>有序列表4</li><li>有序列表5</li><li>有序列表6</li>
</ol>
<br>
<a href="http://www.baidu.com" target="_blank">
点此前往度娘
</a>
<hr><a href="https://tieba.baidu.com" target="_blank"><font color="blue">点此前往贴吧</font>
</a><br>
<a href="javascript:alert('get out away!!!')">move!
</a>
<hr>
<a href="javascript:test()">死循环
</a>
</body>
<script>function test(){alert('无情铁手！！！')alert('致残打击！！！')alert('大杀四方！！！')while(true){  alert('西内！！！')}}
</script>
</html>

html前端代码的初步实现（一）相关推荐

用500行纯前端代码在浏览器中构建一个Tableau
2019独角兽企业重金招聘Python工程师标准>>> 在Gartner最新的对商务智能软件的专业分析报告中,Tableau持续领跑.Microsoft因为PowerBI表现出色也处 ...
转程序员，都去写一写前端代码吧
转自: http://www.oschina.net/news/36972/programmer-write-frond-end-code 你可以认为我是一个极端的人,就像有许多人专注于自己的领域而不 ...
前端代码标准最佳实践：CSS篇
上一篇<前端代码标准最佳实践:javascript>发表后,大家讨论还是很热烈,从侧面体现了前端工程师对写标准的前端代码的重视程度很高.这些最佳标准实践并不是那个权威组织发布的,而是由大量 ...
前端技术周刊 2019-02-26：前端代码保护
2019-02-26 前端代码保护前端快爆 Vue 2.6 正式发布,带来了全新的 Slots(插槽)语法.异步错误处理.动态指令参数.编译警告位置信息.显式创建响应式对象.SSR 数据预抓取.可直 ...
使用 vscode 调试前端代码
使用 vscode 调试前端代码今天我们以webpack项目为基础讲解配置复制代码 1. 安装插件 Debugger for Chrome 2. 修改 config/index.js 将devto ...
2016年 CodePen 最热门的前端代码 Top 100
2016年 CodePen 最热门的前端代码 Top 100 原文:http://www.shejidaren.com/top-pen-of-2016.html 每年 Codepen 都会公布年度最热 ...
grunt 打包前端代码
[grunt整合版]30分钟学会使用grunt打包前端代码 grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于: ① 压缩文件 ② 合并文件 ③ 简单语法检查对于其他用法, ...
【转】在生产环境中部署前端代码
在生产环境中部署前端代码本文章前端代码是基于vue+webpack开发的 Nginx是一款轻量级的Web 服务器/反向代理服务器首先,webpack配置如下在开发过程中,我们是通过npm run ...
Grunt 5分钟上手：合并+压缩前端代码
Grunt 的各种优点这里就不扯了,对于新手来说合并(concat) + 压缩(uglify) 前端代码的需求量应该是最大的,这里以这俩种功能为主做一个5分钟的入门吧! 工作环境 $ node - ...

html前端代码的初步实现（一）

文章目录

一、页面内容

111111

222222

333333

444444

555555

666666

下面是列表

二、知识点

1.语句

1.html的基本样式

2.换行及下划线

3.字体样式

4.标题

111111

222222

333333

444444

555555

666666

5.无序列表及有序列表

下面是列表

6.网址和函数的引用

2.代码实现

html前端代码的初步实现（一）相关推荐

最新文章

热门文章