三天学会HTML基础！

最新推荐文章于 2024-01-05 17:42:37 发布

RunForwardPlz

最新推荐文章于 2024-01-05 17:42:37 发布

阅读量330

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/RunForwardPlz/article/details/104332096

版权

一，HTML的初识

1，HTML是什么？

HyperText Markup Language。是计算机语言中的其中一种，是一种标签语言。全称叫超文本标签语言。
超文本：文字，图片，音乐，视频，程序，链接… 一张网页上面放的放的就是超文本。
标签：叫标记，html中定义好一些标签，如<h1></h1> <img />

2，HTML中的基本骨架

    <!DOYTYPE html>
    <html>
        <head>
            <meta charet="utf-8">
        </head>
        <body>
            <h1>Hello HTML~</h1>
        </body>
    </html>

3，HTML中的基本的语法

A，HTML中不区分大小写。
B，对于单标签，最后的/，可加可不加。
C，属性值可以加引号，也可以不加。
… 语法比较灵活
好习惯：
A，必须有基本的骨架。
B，标签都小写。
C，给属性值加上引号。
D，标签不能交叉。
E，标签要正确的关闭。
…

4，HTML中的标签，属性，元素的概念

标签：<name> 一个标签就是一个单词使用<>包含起来。<h1></h1>
属性：在开始标签中以xxx="xxx"形式的文本，叫属性。class=“box”
元素：开始标签+结束标签+属性+标签中的所有的内容。<h1 class="box">Hello HTML~</h1>

5，什么是HTML中标签的语义化

不同的标签所代表的含义是不一样。根据不同的语义使用不同的标签，也就是说什么样的标签干什么事。
一个网页的标签的语义化好了，也是有利于SEO。
DIV+SPAN是没有任何语义。DIV就是为了和CSS配合进行布局。
HTML5中提供了更有语义的DIV，如:header, footer, nav, seciton…
现在主流还是DIV。

6，web网页的三层结构

结构层：由HTML提供的。核心是DIV。也就是内容层。
样式层：由CSS提供的，CSS的两大作用，布局（浮动布局，流式布局，层布局，flex布局），美化（盒子模型+其它属性）
行为层：由JS提供的。

7，五大浏览器

IE 不要使用IE浏览器
Firefox 也可以使用
Opera 之前也用过
Chrome 学习时，使用谷歌浏览器
Safari 苹果

二，学习HTML就是学习一堆标签(四大类)

四大类分别为：表单相关的标签，列表相关的标签，表格相关的标签，经常使用的其他标签。

1，表单相关的标签

表单：主要用于收集用户输入的内容。有了表单我们就可以参与到一个网页的创建中了。有表单，我们不只是网页的浏览者，也可以是一个网页的创建者。
<form>标签：就是表单的意思，作用就是用来创建一个表单

  <form aciton="xxx" method="get">
    </form>

把用户输入的内容提交到某个地方 method表示提交数据的方式，通常有GET提交，和POST提交
其中表单标签中可以放的三种标签为：input标签，select+option标签，textarea标签

1）input标签

是一种表单元素，有多种形式，通过type就可以指定的形式。
HTML4版本中常见的type:
<input type="text" /> 普通的文本框，用户名
<input type="password" /> 普通的密码框
<input type="redio" /> 单选框如果有两个单选框，你要二选一，你需要加上name属性，name属性值需要一样，如 <input type="redio" name="xxx" />
<input type="checkbox" /> 复选框
<input type="file" /> 文件上传
<input type="submit" /> 提交按钮，具备提交的功能
<input type="button" /> 普通按钮，没有提交的功能
<input type="image" /> 图片按钮
<input type="hidden" /> 隐藏区域，看不见，传递数据
HTML5版本中常见的type: 有兼容性问题，在不同的浏览器下，长的不一样
<input type="email" /> 表示写的数据，需要符合邮箱的格式
<input type="url" /> 表示写的数据，需要符合网站的格式
<input type="number" /> 表示写的数据，必须是数字
<input type="range" /> 不是一个输入框，范围的选择器
<input type="search" /> 输入框后面多一个x
<input type="color" /> 不是一个输入框，颜色的选择器

2）select+option标签：下拉菜单

       <select>
            <optin value="" select="ture">1</optin>  
            <optin value="">2</optin>
            <optin value="">3</optin>
       </select>

// value是往后端提交的数据，通过是数字或单词。//select="ture"表示默认选项

3）textarea标签：文本域

可以用来输入大量的文本，比如，贴吧中的输入框，QQ空间中的输入框…

2，列表相关的标签

分类：
无序列表：用的相当多，用来列表或导航，基本上任何一个网站都有列表
有序列表：用的比较少，只有在你强调语义化时，才会使用有序列表
自定义列表：对一个事件，时间，术语，名词解释时。

1）无序列表：

        ul+li  
          <ul>
          		<li>HTML</li>
          		<li>CSS</li>
          		<li>JS</li>
          </ul>

默认情况下，每一个li前面有一个小黑点，在CSS中通常都会直接去掉。

2）有序列表：

    ol+li  
     <ol>
    		 <li>HTML</li>
    		 <li>CSS</li>
    		 <li>JS</li>
     </ol>

默认情况下，会有一个标签，在CSS中也会去掉，通过自己设置标识。

3）自定义列表：

    dl+dt+dd 
       <dl>
       		  <dt>HTML</dt>
      		  <dt>CSS</dt>
     		  <dt>JS</dt>
        	  <dd>
             	 上面的三门技术是用来开发网页。包含PC端的网页和移动端的网页。
      		  </dd>
 	   </dl>

3，表格相关的标签

用的不多。
场景：带有表格的网站，或者是后台管理系统。
表格相关的一堆的标签：
table: 表格本意是桌子意思
thead: 表头往往只有一个
tbody: 表体往往只有一个
tr: row 行
th: 表头中的每一个单元格（列）
td: 表体中的每一个单元格（列）

表格中相关的一堆的属性：
border: 给表格设置边框这个边框是table最外层的边框不是单元格的边框。
width: 宽度，给table加，表示整体表格的宽度，不写单位，默认是px。
height: 高度，给table加，表示整体表格的高度，不写单位，默认是px。
align: 对齐方式，给table加,表示整体表格的对齐方式，有left, reght, center
也可以给tr加，表示它里面的内容对齐的方式
也可以给td加，表示它里面的内容对齐的方式
也可以给tbody加，表示它里面的内容对齐的方式
bgcolor: 背景颜色
cellspacing: 单元格之间的距离，给table加，表示单元格之间的距离
cellpadding: 单元格中的内容与单元格边框的距离

td和th上面的有两个重要的属性：
rowspan: row 行 span 跨度
同一列中的多行，进行跨度，同一列的第1行加上rowspan，跨度几行，rowspan的值就是多少。还需要把其它行的删除了。
colspan: cols 列 span 跨度

如下：

 <table border="1" width="500" height="250" align="center" cellspacing="10" cellpadding="4">
          <thead bgcolor="skyblue">
               	 <tr>
            				<th colspan="2" align="right">星期一</th>
           				    <th>星期二</th>
           				    <th>星期三</th>
            		 	    <th>星期四</th>
            			    <th>星期五</th>
       			 </tr>
    	  </thead>
    	  <tbody  bgcolor="gold" align="center">
       			 <tr>
            			   <td>AAA</td>
           				   <td>BBB</td>
            			   <td>CCC</td>
            			   <td>DDD</td>
            			   <td>EEE</td>
       			 </tr>
       	  </tbody>
 </ttable>

4，经常使用的其他标签

1）标题标签：

h1~h6
场景：新闻，博客，文章的标题 / 网站的logo
基本上任何一个网站都有，标题标签是有利于SEO。
男标签，块级标签，独占一行

2）图片标签：

< img >
场景：就向网页插入一张图片。
属性：
src: 图片的地址（相对地址，绝对地址）
alt: 1）当图片路径出错时，显示提示内容 2）有利于SEO
widht: 设置图片的宽度
height: 设置图片的高度
一个图片也可以当成一个链接，进行点击。

代码：

<img src="./imgs/mm.jpg" alt="图片出错了，请刷新你的浏览器">

3）段落标签：

p
场景：语文中的段落，使用它进行分隔内容
男标签，块级标签，独占一行

4）超连接标签：

a
场景：形成一个链接站外链接站内链接锚点链接
./ …/ ./表示当前目录 …/表示上一级目录
站外链接 <a href="http://www.baidu.com">百度一下</a>
站内链接 <a href="./about.html">关于我们</a>
锚点连接：先打锚点连接到锚点
<a name="xxx"></a> <a href="#xxx">连接到某个锚点</a>
特殊的锚点：top <a href="#top">返回顶部</a>
top可以不写 <a href="#">返回顶部</a>

重要的属性:
href: 表示一个连接的地址 href=“http://www.baidu.com”
target: _blank 表示以一个新的选项卡打开链接
_self 表示在当前的选项卡中打开链接
name: 用于设置锚点
title: 设置提示内容，鼠标放上去显示提示内容。

5) DIV和SPAN：

div是核心，div标签它没有任何的语义。一个网站中使用最多的标签就是div。会通过class给不同div起上不同的名字，为了后面CSS布局。通常我们会使用div配合CSS完成布局。会把页面中的某一块区域放到一个div中的。是男标签，块级标签，独占一行。
span是行内标签（女标签），肯定是没有div使用的多。

三，一些其他事项

快捷键：
shift+alt+向下箭头复制上一行
ctrl+x 删除一行（剪切）
ctrl+z 撤销
ctrl+鼠标中键改变字体大小
按住鼠标中键，向下拉，同时选中多行
ctrl+B 把项目结构视图隐藏（展开）
…
web前端开发环境：
编辑器+浏览器
编辑器：vscode, webstrom,hbuilder
浏览器：谷歌浏览器

参考别人写的代码：
源码之家
A5源码

开发者工具调试网页：
F12 鼠标检查

MDN是一个比较权威手册

RunForwardPlz

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
三天学会HTML基础！

一，HTML的初识1，HTML是什么？ HyperText Markup Language。是计算机语言中的其中一种，是一种标签语言。全称叫超文本标签语言。超文本：文字，图片，音乐，视频，程序，链接.... 一张网页上面放的放的就是超文本。标签：叫标记 <abc> <name></name> html中定义好一些标签，如&lt...
复制链接

扫一扫