【页面设计】01.HTML

页面设计用到的语言

1.HTML:结构框架
2.CSS
3.JS

HTML:超文本标记语言

<...>:标签/元素

<!DOCTYPE html>:解释文档类型为html

一、head区域常用标签

<base>

使用后浏览器不再使用当前文档的URL,而使用指定的URL来解析所有的相对URL。其中包括<a>,<img>,<link>,<form>中的URL

<title>

浏览页标题

<meta>

可提供有关页面的元信息。

<meta charset = "UTF-8">:指定编码模式

<meta name = "viewport" content="...">:设置可视区域、缩放级别等

<meta hettp-equiv = "..." content = "...">:设置浏览器兼容性模式

<link>

<script>

<style>

二、body区域常用标签

1.标题标签

<h1></h1>

分为1-6级,默认字体大小依次递减

2.字体标签

<b></b>,<strong></strong>

加粗

<sup></sup>

上标

<sub></sub>

下标

<s></s>

删除线

<u></u>

下划线

<i></i>,<em></em>

斜体

<code></code>

显示代码

<cite></cite>

引用

3.格式化标签

<p></p>

段落

<br />

换行

<hr />

分割线

<pre></pre>

预格式化(尽量不使用Tab键)

<div>区块

<div style="margin-top:1000px"></div>

4.链接标签

<a></a>

<a href = "...">...</a>:在同一页面跳转
<a href = "..." target = "_blank">...</a>:在新页面跳转

其中,href = "..."被称为属性attribute,属性名称为href

5.注释标签

<!-- -->

6.list标签

<ul></ul>,<ol></ol>

<ul>
    <li>...</li>
</ul>
<ol>
    <li>...</li>
</ol>

<ul>列表项前面加点,<ol>列表项前面加数字。

快捷创建:

 回车

7.table标签

<table></table>

<tr></tr>:表行

上图代码的效果如下:

8.form标签

<form></form>

(1)代码一

上图代码的效果如下:

 

name是提交表单form时用的

(2)代码二

action可以被指向一个文件,来处理后续的逻辑问题
method是提交方式

(3)代码三

上图代码的效果如下:

 

 9.button标签

<button></button>


<button>This is a Button</button>

上图代码的效果如下:

10.image标签

<img>


<img style="width:100vw" src="img/pic.jpg" alt="This is a img tag">

src:图像源地址
alt:当因某些原因图像无法正常显示时,显示alt内容
style="width:100vw":占100%的浏览器宽度

显示异常时:

 

11.注释标签:<abbr></abbr>


<p><abbr title="Massachusetts Institute of Technology">MIT</abbr> is a prestigious college</p>

 上图代码的效果如下:

 

12.input标签

输入框

<input type = "text" name = "userName">
<input type = "password" name = "userPwd">

三、元素分类

a.块级元素

1.在页面内以块的形式展现
2.出现在新的一行
3.占全部宽度

如:<div>,<h1>-<h6>,<p>,<ul>,<ol>

b.内联元素

1.通常在块级元素内
2.不会导致文本换行
3.只占必要的部分宽度

如:<a>,<img>,<em>,<strong>

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值