浅尝HTML

ke_xy
150 阅读6分钟

HTML 基础含义以及样式

  1. HTML 全名：Hyper text markup language 超文本标记语言,所写的语言都是标签，<html></html>,并且标签基本都是成对出现的，当然也有个别单个出现的标签，例如<hr/> <br/>等。
  2. 一个基础的网页由HTML写成，而一个HTML又由三大部分组成，分别是网页框架html，头部标签head，以及身体标签body，html是根标签，head是给浏览器看的，称为头标签，body则是页面显示的内容，我们要展现出来的部分基本都写在body里面。
  3. 语言和编码问题，不同地区语言不通，而且浏览器的编码也不同，如果我们需要让我们的网页在任何地方都能打得开，我们就需要用统一的编码格式。一般来说编码格式和语言格式都写在meta标签里面，而该标签位于头部head标签内，通用的编码格式为UTF-8，而语言要根据不同地区进行调整，一般是en英语，zh-cn//zh-cmn汉语
<html>
    <head>
        <meta charset="UTF-8">
        <meta language="en zh-CN">
    </head>
</html>

HTML 基础标签

常见文本标签

  1. p标签，段落标签，是一个块级标签，独占一行，并且拥有一定间隔距离。
  2. h1 ~ h6标签，标题标签，文字大小h1最大，h6最小，一般用于页面内容重点标题样式，会将里面的文字放大加粗，并且独占一行，也是一个块级标签，其中h4是正常文字大小。
  3. strong标签，作用是将里面的文字加粗，同时有强调作用。b标签虽然与strong类似，但是没有强调作用，因此现在并不常用。
  4. em标签，将文字倾斜，也有强调作用，i标签与em类似，但是因没有强调作用，也不常用。
  5. del删除线标签，在文字中间画一条线，一般用于打折
  6. address地址标签，相当于p em的联合，会将里面的文字进行斜体化同时也独占一行。
<p>段落P标签</p>
<h1>标题1</h1>
<strong>加粗标签</strong>
<em>倾斜标签</em>
<del>删除线标签</del>
<address>地址标签</address>

结构化标签

  • 结构化标签一般用来当容器使用，该标签内部来放置其他标签，将不同的标签划分到不同的区域。
  • 结构化标签可以为里面的子元素设置属性，一般相同的属性如果子元素没有经过设置，会自动继承父级标签的属性。

在写一个页面之前要先考虑结构问题，划分好区域之后在区域里面填写自己需要的内容，因此一般写网页都先写结构化标签。

  • 常见的结构化标签有两个 div span，他们之间的区别在于div是一个块级元素，独占一行，而span则是一个行内元素，里面一般放文字或者小图标等。
<div>
    div是块级元素
    <span> span是行内元素 </span>
</div>

  • 编码问题，一般来说当我们在div中写中文的时候，一旦到了边界就会自动换行，而英文则不会，这是因为中文默认自带分隔符，计算机会识别，但是英文不会识别，因此我们需要用分隔符隔开才能让计算机明白我们需要分割的地方

    • 我们采用的方式是 &名称;,分号不能省略，其中用的最多的也就是空格：&nbsp;，一个代表一个空格，需要多少就写多少个。还有>&gt; <&lt;等。
    • 回车也属于分隔符，但是我们直接用回车是没有效果的，我们这个时候就必须利用br标签，它的作用就是强制换行。这是一个单标签，一般书写<br/>

其他标签

1.列表标签

  1. 有序列表 ol li

    1. 该列表前面会有数字1，2，3或者根据css自己设定样式

  2. 无序列表ul li

    1. 该列表前面会有小黑点，也可以根据css设定样式
    2. 该列表属性常用于制作导航栏

  3. 自定义列表dd dt

//有序列表
<ol>  
    <li></li>   
    <li></li>
</ol>
//无序列表
<ul>
    <li></li>
    <li></li>
</ul>
//自定义列表
<dt>
	<dd></dd>
	<dd></dd>
</dt>

2.a超链接标签

  1. 基础写法：<a href="#" target="_blank"></a>,其中#是需要挑战的地址，可以是网址，也可以是该页面的锚点，而target=_blank代表打开的方式，这个代表在新的页面中打开，默认在当前页面打开超链接。
  2. 协议限定符，在a标签中，我们可以写javascript的代码，比如在移动端的手机拨号，我们写的就是a href="phone:132XXXX1123"
  3. 默认样式：a标签默认字体蓝色，带下划线，但是通常我们都会把下划线修改掉，利用text-decoration:none;属性来把下划线删除。
<a href="#" target="_blank"> </a>

3.img图片标签

  1. 基础写法：<img src="" alt="" title=""></img>,其中src是必写标签，里面的内容就是我们图片的地址，一般src里面写的地址分为网上地址，本地地址,alt占位符属性，当图片加载失败的时候会出现，title标题属性，当鼠标移动到图片上会显示。

    1. 图片定位，一般分为绝对定位和相对定位，前者是一个固定的地址，而后者则是根据放置位置而改变，一般都用相对定位
    2. 书写方式： ./带表当前文件夹 ， ../代表上一级文件夹
<img src="./XX.png" alt="占位符" title="图片描述">

4.table表格标签

  1. table 是一个三级结构标签，也就是说该标签组成最少要有三个部分

    1. tr的表格的行 td是单元格，也就是表格的列

      1. td的属性 cellpadding内边距，单元格内容距离单元格边框的距离， cellspacing属性，单元格之间的距离，设置为0就可以去掉单元格内的边框线
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

table以前多用于布局，但现在都会用div来进行布局，table现在已经很基本不用于布局了。 原因：在计算机中，异步代表两个属性同时加载，例如用多个div的话，多个div会同时加载，这样就能更快的展示页面信息以及美化。而同步则是按照顺序进行加载，table就是会使用同步进行加载，从第一个单元格到最后一个单元格，因此如果用table进行布局的化，加载会比较缓慢，所以已经弃用。

5.form表单标签

让网站具有交互性，用户需要输入的地方都用form表单来写

表单由容器和控件组成，一个表单一般都包含输入框和按钮等，这些输入框就是控件，表单就是容器

<form action="url" method="get|post" name="myform">
  
</form>

action服务器地址 name表单名称

method中get和post的区别

数据提交方式，get把提交的数据url可以看到，post看不到

get一般用于提交少量数据，post用来提交大量数据

表单元素

一个完整的表单分三个部分：表单标签，表单域（输入框），表单按钮

<form>
  <input type="text">
  <input type="submit">
</form>

表单元素

  • 文本框 <input type="text"> 当用户需要输入字母，数字等内容时，就会用文本域

  • 密码框<input type="password"> 当用户需要输入密码时，会用到密码框

    密码框内的字符不会显示，会用圆点显示

  • 提交按钮<input type="submit">当用户点击提交按钮时，表单的内容会被传送到另一个文件

 <form>
        用户名：<input type="text">
        密码：<input type="password">
        <input type="submit" value="登录">
</form>

欢迎大家来看看我的 个人博客

avatar
文章
阅读
粉丝