前端开发1.0之 HTML和CSS

HTML是一种标记语言,用于创建网页。它包括标签和文本,如<head>、<title>、<body>等。文章介绍了HTML的基础,如创建链接、嵌入图片、文本格式化以及<head>中的<meta>标签用法。还提到了CSS如何影响HTML的样式,如去除链接下划线。
摘要由CSDN通过智能技术生成

HTML

我想没有什么特别难的,所以直接两小时过一下。

HTML简述

HTML是创建网页的语言,对于中文要使用<meta charset="utf-8">否则会出现乱码。
后缀名:.html或.htm

完整的HTML文件的组成:

@112P7ZPX4OFD2~}A91.png

<!DOCTYPE html>
<html>
<head> 
<titile> 题目 </title>
<meta charser="utf-8">
</head>
<body> 
<h1> 可以有一级标题 <h1>
<h2> 这里是二级标题而不是第二个标题 <h2>
<p> p是段落 </p>
</body>
</html>

p段落会自动换行

对HTML的描述:

HTML不是编程语言,而是标记语言,包含HTML标签和HTML文本。
用标签来描述网页的语言。
HTML文档又称作web文档。
HTML通常成对出现,如 <b> </b> 收尾表示一个标签/元素。
浏览器会处理HTML并显示,但并不会显示全部,例如
A2B~BLK([RNK.png
用记事本打开编写网页方法:
写完代码另存为 .html 的格式即可用电脑默认浏览器打开。

HTML基础

HTML链接

以a定义
<a href="这里是个链接"> 跳转 </a>
在href属性中指定链接的地址

HTML图片

图片以img来定义
<img decoding = "图片名称" srd = "图片路径" width = "长" height = "高度"/>

HTML图片链接

伪代码:

<a href = "链接">
<img src"图片路径"border = "边框长度,为0为无边框" alt = "链接名称" width = "" height = ""/></a>

HTML属性

属性常为元素添加信息,多作用于起始标签
常用属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-db8skNUx-1682950614679)(:/e553446c34484f53934ad27db567c651)]

常用标签

https://www.runoob.com/tags/ref-byfunc.html

HTML文本格式化

常用的(伪代码):

这个文字包含
<sub>下标<sub>
<br />
这个文字包含
<sup>上标</sup>
<br/>
<strong>这行文字是加粗的</strong>
<br />
<b>这行文字是加粗的</b>
<br />
<small>这行文字是缩小的</small>
<br />
<big>这行文字是放大的</big>
<br />
<i> 这行文字是斜体的</i>
<br />
<em> 这行文字是斜体的</em>
<br />

斜体可用于地址

预格式文本

伪代码:

<pre>
这里是预格式文本
</pre>

用途未知

缩略语

在某些浏览器中,鼠标移至缩略语会展现出完整语句,此处作为了解

<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>

删除字和插入字

伪代码:

the color is <del>black</del><ins>white</ins>

HTML头部

base

格式和a一样:

<base href="http://www.runoob.com/images/" target="_blank">

base会定义web文档中所有链接默认的链接目标地址(即target)

style

<style> 标签定义了HTML文档的样式文件引用地址.
例如

<style type="text/css">

当然也可以在<style>中直接对元素进行渲染

<meta> 标签- 使用实例

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

<meta name="author" content="Runoob">

每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">

HTML CSS

设置没有下划线的链接

伪代码:

<a href = "链接" style = "text-decoration:none">
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值