HTML初步认识和一些简单常用属性

HTML的初步认识和一些简单常用属性

1.什么是HTML？

HTML是描述网页的一种语言

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

页面内包含的内容不仅仅是文本，还可以包含图片、链接、音乐、视频等一些非文字的元素。

HTML 不是一种编程语言，而是一种标记语言 (markup language)

HTML 使用标记标签来描述网页

HTML的后缀名为.html或者.htm

2.什么是HTML5？

HTML5（H5）是HTML的下一代标准，产生于2012年，基本形成的比较稳定的版本。

3.Html开发需要的环境

编程软件：

只要是可以支持编程的软件都行，如vi、vim、记事本

主要用的是VS Code和Sublime

使用VS Code的主要原因是它是微软公司开发的编程软件，能够支持多系统，并且实现开源。我认为VS Code最主要的优点是内置了扩展程序的管理功能，能够方便快捷的安装一些插件，且支持汉化。

相较于VS Code来说Sublime安装插件的方法比较复杂并且插件安装比较困难。

浏览器：

Chrome\Firefox

主流的浏览器具有比较强大的代码调试工具和一些好用的浏览器插件，且这两个浏览器的兼容性比较好。

浏览器作用：

1.用于读取html文件，并将其作为网页显示

2.用于调试代码

HTTP的服务器

主要用于部署写好的html页面，用来让用户进行访问。（因为用编程软件所写好的网页主要是存储在自己的电脑里面，无法让其他人顺利的访问你所写的网页，所以需要上传至服务器。）

云服务器-安装Apache-部署

B/S框架

Browser（浏览器）/Server（服务器）

用户只需要安装一款主流浏览器，即可访问很多的服务

HTTP协议

超文本传输协议，简单的请求-响应协议

URL

统一资源定位符

4.HTML文档主要部分

HTML5的文档类型为<!DOCTYPE html>

<html></html>:HTML的根元素用来包含HTML文档的所有元素

<head></head>:包含在head里的内容，不会显示在网页上，这里面通常放的一些配置信息，包含编码，作者，页面描述信息还有js、css的导入，编码方式

<title></title>:写入网页的标题，但不会展示在网页的主体内容中

<body></body>:是html文档的内容区

5.HTML元素&标签

标签和元素通常意思相同，但严格来讲，一个元素通常是由一组标签组成的。

HTML标签

一般成对出现、大小写不敏感、但是H4推荐使用小写

样式：开始标签内容结束标签

<div>这是一个盒子</div>

HTML标签部分可以嵌套使用

块级元素（如<div></div>）

独占一行空间

用来布局段落、列表、导航菜单等

不要把块级元素嵌套在行内元素里

行内元素（如：<span></span>）

与其他行内元素共享一行空间

一般就是作为段落的一部分

空元素（单标签）

没有内容的元素

空元素是在开始标签中结束的（如：<br/>、<hr/>、<img src="" />）

空元素只有开始标签，可以不写关闭符/，但建议写上。

替代元素(替换元素)

把文件引入文档，并且用自身的位置来替换

img

video

audio

HTML属性

元素的属性一般写在开始标签里

属性由键值对组成

如：<div id="myDiv" class="myDivClass"></div>

核心属性

id：唯一标识

class：表示当前元素是某一类的元素

style：规定元素的行内样式

title：描述元素的信息（光标悬浮时会显示）

HTML语法

1. 在html文档中不论由多少个空格都会解析为一个

2. 实体

1. 空格

2. < <

3. > >

4. " "

5. ' '

6. & &

3. 注释

注释的作用：

一定要多写注释，方便之后自己或同事查看你的代码

常用标签（元素）

div 无意义的块级元素

p 段落块级元素浏览器会自动在p标签前后添加空行，可以结合br使用

h1-h6 一级标题-六级标题浏览器会自动在标题标签前后添加空行一般结合hr使用

文本格式化-CSS

strong 强调加粗

b 加粗

em 斜体

i 斜体

u 下划线

sub 下标

sup 上标

（文本格式化主要是针对文本的格式进行调整，对文本的内容不会改变，所以我们一般在html标签中不使用此类标签。

后续学到CSS中也是对文本的样式进行调整。）

列表

有序列表（快捷写法ol>li）

序号默认从1开始可用通过 start属性改变起始值

如：<ol start="3">

reversed (单值属性) 规定列表顺序为降序

type="1" 默认 1 还有 A a I i 四种值

无序列表（快捷写法ul>li）

标题是圆型符号，没有顺序

自定义列表 dl > dt、dd

超链接 a

（实现跳转到邮箱）

绑定目标与元素的id值实现锚点跳转

（可以跳转到id="header"的标签位置）

属性：

href：跳转的目的地

target：_self（默认为在此页面跳转）/_blank（在新窗口打开链接）

图片

src：图片的地址（必填项）

alt：图片地址出错时会显示alt的内容(当图片加载不出来的时候可以显示alt中的内容。)

width：设置图片的宽

height：设置图片的高

（单独设置其中一个的时候，可以实现等比例的缩小或者放大图片，同时设置宽和高可能会导致图片的失真。）

演示：

<!--

* @Author: 标签及其属性的应用

* @Date: 2021-08-02 19:35:12

* @LastEditTime: 2021-08-02 20:17:16

* @LastEditors: Please set LastEditors

* @Description: In User Settings Edit

* @FilePath: \briup\2-HTML&CSS\day01\day01中标签及其属性的应用.html

-->

<!DOCTYPE html>

<head>

<title>HTML中标签和属性的应用</title>

</head>

<a href="#myDiv"><h4>块级元素的使用</h4></a>

<a href="#myDl"><h4>自定义列表</h4></a>

<div id="myDiv">我是一个盒子，这里是块级元素</div>

<div>我可以独占一行，不管我多长</div>

<p>我是也是一个块级元素，我也可以独占一行</p>

<p>我表示的是一个段落，但是我有空行，和div不一样</p>

<p>我是一个很长的段落。我是一个很长的段落。<br />这是第二段，我是一个很长的段落。我是一个很长的段落。我是一个很长的段落。<br />这是第三段，我是一个很长的段落。我是一个很长的段落。我是一个很长的段落。我是一个很长的段落。</p>

<span>我是一个行内元素，</span>

<span>我只能占据我内容的长度</span>

</ol>

</ol>

</ol>

</ol>

</ul>

<dt>自定义列表的标题</dt>

</dl>

</body>

</html>

效果：

HTML初步认识和一些简单常用属性相关推荐

nunit常用属性_通过在测试中使用nunit属性来帮助您的同事节省时间
nunit常用属性 Let's face it, there is nothing worse than trying to understand the code you wrote 3 month ...
css规则中区块block,css常用属性总结：背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
DIV常用属性大全自己整理
一.属性列表代码如下:color : #999999 文字颜色 font-family : 宋体文字字型 font-size : 10pt 文字大小 font-style:itelic 文字斜体育 ...
Android相对布局（RelativeLayout）常用属性、练习使用按键、文本框等控件、线性布局（LinearLayout）属性
RelativeLayout中子控件常用属性: 子控件默认是从父控件的左上角开始排列的相对于父控件 android:layout_alignParentTop="true" 和父 ...
【itext学习之路】--2.设置pdf的一些常用属性
来源:https://blog.csdn.net/tomatocc/article/details/80666361 在上一篇文章中,我们已经成功的创建了一个简单的pdf,下面我将学习设置该pdf的常 ...
numpy的基本使用附python代码详细讲解（numpy函数，创建数组，常用属性，索引切片，数组的复制，修改维度，数组的分割、拼接、转置）
目录使用array创建数组使用arange创建数组 Numpy中的随机数创建 ndarray对象的常用属性其他方式创建数组索引和切片(一位数组.二维数组) 数组的复制修改数组的维度数组的拼 ...
flex简单常用笔记
flex简单常用笔记多行换行操作: ul {display: flex;flex-direction: row;justify-content: space-between;flex-wrap: w ...
vb中WindowsMediaPlayer的常用属性和方法
vb中WindowsMediaPlayer的常用属性和方法 enableContextMenu:Boolean 显示/不显示播放位置的右键菜单 fullScreen:boolean 全屏显示 stre ...
JavaScript对象的常用属性及使用
什么是浏览器对象模型? 浏览器对象模型(BOM Browser Object Model)是JavaScript的组成之一,它提供了独立于内容和浏览器窗口进行交互的对象,使用浏览器对象模型可以实现与H ...

HTML初步认识和一些简单常用属性

HTML初步认识和一些简单常用属性相关推荐

最新文章

热门文章