HTML基础

最新推荐文章于 2024-10-09 11:42:00 发布

Yolo.H

最新推荐文章于 2024-10-09 11:42:00 发布

阅读量249

点赞数

分类专栏：前端知识文章标签： web html

本文链接：https://blog.csdn.net/qq_49075665/article/details/115352595

版权

前端知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

导语

网页的基本组成

网页是构成网站的基本元素，是由图片、连接、文字、声音、视频等元素组成，实际上是一个html文件。

常用的浏览器

常用浏览器：IE、火狐、谷歌、Safari、Opera五大浏览器。
浏览器内核：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
国内一般浏览器都采用Webkit / Blink内核，如360、UC、QQ等
谷歌使用Blink，Blink其实是Webkit的分支。Safari是苹果浏览器内核。

Web标准的三大组成部分

W3C：万维网联盟，是国际最著名的标准化组织。
Web标准三大组成：结构、表现、行为
结构：对网页元素进行整理和分类，html
表现：设置网页元素的版式、颜色、大小等外观样式，CSS
行为：指网页模型的定义以及交互的编写，Javascript
三者中，结构最重要。

什么是HTML：

一种超文本标记语言（标记：用字符或单词描述网页的结构或语法），不是编程语言，不是编程语言
用于构成一个网页

<!--html格式-->
<html>
    <head>
    	<!--head：头部写页面说明-->
        Examples
    </head>
    <body>
   	    <!--body：身体写主要内容-->
        <h1>My First Heading</h1>
    </body>
</html>

HTML的标签：

由尖括号包围，如 <html> 和 </html>
一般成对出现，如 <b> 和 </b>，第一个标签是开始 / 开放 标签，第二个标签是结束 / 闭合标签
也有不成对出现的标签，如：<br />

HTML的属性：

提供了有关 HTML 元素的更多信息。
以名称/值对的形式出现，比如：name=“value”。
始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题

基本标签

块元素：<h1>, <p>, <ul>, <table>
独占一行
内联元素：<b>, <td>, <a>, <img>
标题<h1></h1>---<h6></h6>

由大到小，由重到轻，独占一行
段落<p></p>

文本在一个段落中会根据游览器窗口的大小自动换行
段落和段落之间保有空隙
强制换行 break<br />
是个单标签
只是简单开始新的一行
跟小一行的间距不像段落那么大
加粗：<strong></strong>，<b></b>。更推荐第一个
倾斜：<em></em>，<i></i>。更推荐第一个
删除: <del></del> ， <s></s>。更推荐第一个
下划线:<ins></ins>， <u></u>。更推荐第一个
布局标签：div /div大盒子，自己独占一行，无语义
布局标签：span /span 小盒子，一行可以放多个span，无语义

其他标签

图像：标签：`<img>`

<img src="w3school.jpg" width="104" height="142" />
<!--
必须属性：`src` 用于指定图像文件的路径和文件名
属性：属于这个图像的特性
替换：<img src="图像URL“  alt="当图像显示不出来的时候用这个文字替换"/>
备注：<img src="图像URL“  title="当鼠标经过图像时，会在鼠标出会出现的文字" />  
宽度：<img src="图像URL“  width="433"/>
高度：<img src="图像URL“  height="433"/>
一般改变以上width或hieght一个即可，另一个会等比例缩放放大
边框：<img src ="图像URL“  border ="15"/>`
注意点：属性之间不分先后顺序，但属性间要用空格隔开
-->

链接：`<a>`

<!--<a></a>之间要有内容,给谁加数据，要写；并且要加协议头-->
<!--在原网页中跳转-->
<a href="http://www.w3school.com.cn">This is a link</a>

<!-- target 属性-->
<!--另外打开一个网页跳转-->
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

表格：`<table>`

每个表格均有若干行（由 <tr> 标签定义）
每行被分割为若干单元格（由 <td> 标签定义）。
字母 td 指表格数据，即数据单元格的内容。

<table border="1"><!--==0则无边框-->
    <tr>
        <td>row 1, cell 1</td><!--第一行第一列-->
        <td>row 1, cell 2</td><!--第一行第二列-->
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

效果：

表头：`<th>`

<table border="1">
    <tr><！--会自动加粗跟居中-->
        <th>Heading</th>
        <th>Another Heading</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

无序列表： `<ul>`、`<li>`。

<ul><!--无序列表始于<ul>标签-->
    <li>Coffee</li><!--每个列表项始于 <li> 标签-->
    <li>Milk</li>
</ul>

有序列表： `<ol>`、`<li>`。

<ol><!--无序列表始于<ol>标签-->
    <li>Coffee</li><!--每个列表项始于 <li> 标签-->
    <li>Milk</li>
</ol>

表单： `<form>`

<form>
    First name: 
     <!-- 表单输入： input-->
    <input type="text" name="firstname" />
    <br />
    Last name: 
    <input type="text" name="lastname" />
</form>

效果：

单选按钮：`Radio Buttons`

<form>
    <input type="radio" name="sex" value="male" /> Male
    <input type="radio" name="sex" value="female" /> Female
</form>

效果：

复选框：`Checkboxes`

<form>
    <input type="checkbox" name="bike" />I have a bike
    <input type="checkbox" name="car" />I have a car
</form>

效果：

表单的动作属性（Action）和确认按钮：

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form name="input" action="html_form_action.asp" method="get">
    Username: 
    <input type="text" name="user" />
    <input type="submit" value="Submit" />
</form>

在一个页面中再嵌入一个页面：`iframe`

<iframe src="URL"></iframe>

<!-- 设置高度和宽度 -->
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

<!-- 删除边框 -->
<iframe src="demo_iframe.htm" frameborder="0"></iframe>

背景色：`Bgcolor`

属性值可以是十六进制数、RGB 值或颜色名。

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

背景：`Background`

如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

相对路径的三种形式

相对路径：例如：图片相对于HTML页面的位置

同一级路径如：<img src="baidu.img>
下一级路径：/ 如：<img src="imges/baidu.img>
上一级路径: …/ 如：<img src="../baidu.img>

绝对路径

绝对路径：指目录下的绝对位置，直接到达目标位置，通常是由盘符开始的路径。可以是本机上的绝对路径，也可以是网络上的路径链接。

超链接标签

语法规范：

标签： <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href用于指定链接目标的url地址，一定要写的
target用于指定链接页面的打开方式。其中_self为默认值，_blank为在新窗口中的打开方式

分类：

外部链接：跳转到网上的其他网址链接
<a href="http://www.baidu.com></a>

内部链接：跳转到自己目标文件夹中的其他页面
<a href="index.html“></a>

空链接：当还未完成其他网页的书写时可用这个替代
<a href="#“></a>

下载链接：点击文字，或图片，可以下载文件
<a href="img.zip文件地址“></a>

网页元素链接：点击对象可以设置为文字、图片、表格、音频、视频等
<a href="http;//www.baidu.com"><img src="img.ipg"/></a>

锚点链接：点击链接，可以快速定位到页面中的某个位置。
在连接文本的href属性中，设置属性值为#名字的形式，如<a href = ”two">第二集</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id="two">第二集介绍</h3>

特殊字符

重点记住：空格&nbp，大于<，小于>

Yolo.H

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

HTML基础

导语

网页的基本组成

常用的浏览器

Web标准的三大组成部分

什么是HTML：

HTML的标签：

HTML的属性：

基本标签

其他标签

图像：标签：<img>

链接：<a>

表格：<table>

表头：<th>

无序列表 ： <ul>、<li>。

有序列表： <ol>、<li>。

表单： <form>

单选按钮：Radio Buttons

复选框：Checkboxes