2019.09.09

入门基础

把前面安装完环境以后，我们就正式开始上手啦！！！打开sublime新建一个html文件，按住ctrl+！ tab一下，我们首先看到的是下面这样一串代码：

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

head部分

title标签是网页标签页的标题
为了减少内存，使html文档更简洁明了，可以使用link标签引入外部.css文件，使用script标签引入外部的.js文件，还可以引入所需的样式包

<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href=""><script type="text/javascript"></script>
</head>

body部分

body内的文本是可见的页面内容

为了渲染出漂亮的页面，我们会使用很多的标签和样式来美化它们。我们先来了解一下有哪些基础的标签吧

基础标签

标题标签

h1-h6 作用是使文章出现标题，它的特性是加粗，自己独占一行
h1 是最大的标题，就像我们word文档里的最大的字号一样，h6为最小的标题
一般h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3

<body><h1>Hello I'm Taylor</h1><h2>Hello I'm Taylor</h2><h3>Hello I'm Taylor</h3><h4>Hello I'm Taylor</h4><h5>Hello I'm Taylor</h5><h6>Hello I'm Taylor</h6>
</body>

段落标签

p标签的作用是可以把html文档分为若干段落
使用p标签时，浏览器会自动在其前后添加一行

<body><p>今天是9月10日教师节</p><p>教师节，旨在肯定教师为教育事业所做的贡献。在中国近现代史上，多次以不同的日期作为过教师节。直至1985年，第六届全国人大常委会第九次会议通过了国务院关于建立教师节的议案，才真正确定了1985年9月10日为中国第一个教师节。</p><p>我们祝老师节日快乐！！！</p>
</body>

水平线标签

hr标签的作用是在html中创建水平线
我们也可以给它添加长、宽、颜色、阴影等样式

<body><p>今天是9月10日教师节</p><hr><p>我们祝老师节日快乐！！！</p>
</body>

图像标签

img标签的作用是插入图片
而它的src属性的值是图片的路径
当图片加载不出来时跳出的提示文本，我们通常会用alt属性来实现
当鼠标悬停在图片上时显示的提示文本，我们用tittle属性来实现
我们还可以给img添加长、宽、边框样式

<body><img src="Taylor Swift - Reputation Cover.jpg" alt="无法加载" title="快来支持Reputation！" width="300px" height="300px">
</body>

链接标签

a标签的作用是创建链接
其中href属性是规定链接的目标
name属性是规定锚的名称
target属性是定义被链接的文档在何处显示。_self在当前页面显示，_blank在新窗口显示，默认为_self

<body><a href="https://www.w3school.com.cn/html/index.asp" target="_blank">点我</a>
</body>

列表标签

html支持有序、无序和自定义列表
有序列表始于ol标签，每个标签项始于li标签
无序列表始于ul标签，每个标签项始于li标签
自定义列表始于dl标签，每个自定义列表项以dt开始，每个自定义列表项的定义以dd开始

<body><ol><li>海绵宝宝</li><li>派大星</li><li>章鱼哥</li></ol><ul><li>小明</li><li>小红</li><li>小兰</li></ul><dl><dt>Coffee</dt><dd>Black hot drink</dd><dt>Milk</dt><dd>White cold drink</dd></dl>
</body>

路径

路径分为绝对路径和相对路径
绝对文件路径是指向一个因特网文件的完整 URL

<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">

相对路径指向了相对于当前页面的文件

<img src="/images/picture.jpg" alt="flower">

漫漫长路，这才第一天，感觉有点小累(ノへ￣、)

html基础入门（一）相关推荐

用python循环语句求素数_Python基础入门_3条件语句和迭代循环
Python 基础入门前两篇: Python 基础入门--简介和环境配置 Python基础入门_2基础语法和变量类型这是第三篇内容,主要简单介绍条件语句和迭代循环语句,内容也比较简单,目录如下: 条 ...
MAYA 2022基础入门学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,48.0 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.41 GB |时长:4.5小时包含 ...
Blender 3.0基础入门学习教程 Introduction to Blender 3.0
成为Blender通才,通过这个基于项目的循序渐进课程学习所有主题的基础知识. 你会学到什么教程获取:Blender 3.0基础入门学习教程 Introduction to Blender 3.0- ...
三维地形制作软件 World Machine 基础入门学习教程
<World Machine课程>涵盖了你需要的一切,让你有一个坚实的基础来构建自己的高质量的电影或视频游戏地形. 你会学到什么为渲染或游戏开发创建高分辨率.高细节的地形. 基于Worl ...
SketchUp Pro 2021基础入门学习视频教程
SketchUp Pro 2021基础入门学习视频教程 1280X720 MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz,2 Ch 流派:电子学习|语言:英语+中文字幕( ...
Maya基础入门学习教程
Maya基础入门学习教程视频:.MKV, 1280x720, 共57节课时长 4小时25分钟,3GB 语言:英语+中文字幕(根据原英文字幕机译更准确)+原英文字幕指导老师:Shane Whitt ...
Maya2022基础入门学习教程
Maya2022基础入门学习教程 Maya 2022 Essential Training Maya2022基础入门学习教程 Maya 2022 Essential Training MP4 |视频: ...
Blender基础入门学习教程 Learning Blender from Scratch
Blender基础入门学习教程 Learning Blender from Scratch 流派:电子学习| MP4 |视频:h264,1280×720 |音频:aac,48000 Hz 语言:英语+ ...
json vue 对象转数组_vue 基础入门（一）修改
vue基础入门(一) 1. 什么是vue Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标 ...
python 二进制流转图片_Python零基础入门到精通-5.1节:Python程序的执行过程
教程引言: 系统地讲解计算机基础知识,Python的基础知识, 高级知识,web开发框架,爬虫开发,数据结构与算法,nginx, 系统架构.一步步地帮助你从入门到就业. 5.1.1 在命令行中执行Py ...

html基础入门（一）

2019.09.09

入门基础

基础标签

html基础入门（一）相关推荐

最新文章

热门文章