前端攻城狮---html基础标签

最新推荐文章于 2023-02-05 00:09:18 发布

csdn_gyh

最新推荐文章于 2023-02-05 00:09:18 发布

阅读量214

点赞数

分类专栏：前端攻城狮文章标签： html 前端

本文链接：https://blog.csdn.net/gaoyouhuang/article/details/80545354

版权

前端攻城狮专栏收录该内容

44 篇文章 0 订阅

订阅专栏

最近对前端特有兴趣索性就学起了前端。话不多说开始新的篇章

开发工具

对于前端的开发工具目前我选择sublime 加上安装些插件开发如鱼得水如 Emmet jQuery 等等

认识html结构

什么叫html？它的全拼叫Hyper Text Markup Language(超文本标记语言)
本来这就是个标记的语言，但却有超越了它本来的含义，名字取得非常的巧妙。
我们先来看看一个基本的html结构吧以下html4.01 Transitonal的结构

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
</body>
</html>

DTD的认识

我们先来看看第一行非常长的一大段 <!DOCTYPE....>简称DTD(文档类型声明)，类型那一共有7种，DTD决定了这个html骨架用的是哪个版本，能使用哪些语法。

一共有以下7种

html4.01分三个小版本

html4.01 Strict (严格版):一些老的语法标签不能使用( 如< br/>)
html4.01 Transitonal(过渡版):就是可以使用一些老的语法标签
html4.01 Frameset(框架集版):就是可以使用框架集

XHTML 扩展的严格的html

XHTML Strict (严格版)
XHTML Transitonal(过渡版)
XHTML Frameset(框架集版)

html5
一共以上7种
html5主要那个移动端web开发，那么xhtml和html4.01的主要区别就是，xhtml对语法标签的格式要求更加严格，XHTML1.0 规定标签必须要小写

head的认识

head 里面我们来认识一下meta 和 title

meta

1.主要的可以用来设置整个html的字符集，通过meta的content的属性来设置**(注:如果说网页只在国内的话可以吧utf-8改成gbk/gb-2312,因为占用的字节不同可以起到优化的作用)优化1**
2.可以用来优化搜索引擎
如 :<meta name="keywords" content="电器数码衣服 ">

title

主要是表示页面的名字

body

body就是用来填写整个界面的界面和内容。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

html的特点

html对换行缩进空格特别的不敏感：我们可以将全部的代码缩进成一行，程序也能照样编写，所以在发布正式的项目的时候，我们需要去掉所有的空格回车等可以说这么做起到优化的作用 优化2
空白折叠：<p>1 1</p>两个1之间无论加了多少个空格多少个回车，最后都只压缩到一个空格

标签的认识

单标签 <img /> <br/>
双标签 <p></p> <div></div> <h1></h1> ...

标签的使用角度又可以分成文本级标签和容器级标签
* 容器级标签
里面啥都可以装甚至可以装自己
<div>
<div></div>
</div>
* 文本级标签
放文字、图片、表单元素或其他文本级标签
<p><span></span></p>

常见标签

<img/>

<a></a>超链接

<a href="http://www.baidu.com" title="鼠标悬停的时候提示文字" target="_blank">百度</a>
target="_blank" 表示点击后弹出新的界面
超链接锚点的使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>
<p>很多内容很多内容<a name="maodian"></a>很多内容</p>
....
<p>很多内容<a href="#maodian"></a>很多内容</p>
</body>
</html>

我们来认识一下第一个超链接的作用就是锚点，当它被一大堆文字包裹的时候，内容多到网页都可以出现上下轮动了，那么我们点击第二个超链接，就会跳转到第一个超链接所在的位置。

列表

1. 有序列表

<ul>
          <li> </li>
          <li></li>
          <li></li>
</ul>

2. 无需列表

<ol>
       <li></li>
        <li></li>
</ol>

3. 自定义列表

<dl>
              <dt></dt>//标题
              <dd></dd>//内容
</dl>

表单

<input type="text" />
<input type="file" />
<input type="password" />
<input type="radio"  />
<input type="checkbox"/>
<select name="" id="">
	<option value=""></option>
</select>
<textarea cols="40" rows="20">这家伙很懒 啥都没留下</textarea>
<input type="button" value="俺很普通"/>
<input type="submit" value="提交" />
<input type="reset"  value="重置"/>

表格

<table border="1">
	        <caption>标题</caption>
		<!-- tr表示行-->
		<tr>
			<!--td单元格-->
			<th>国家</th>
			<th>人口</th>
			<th>所属洲</th>
		</tr>
		<tr>
			<td>中国</td>
			<td>14亿</td>
			<!--rowspan表示横跨两行,行合并-->
			<td rowspan="2">亚洲</td>
		</tr>
		<tr>
			<td>韩国</td>
			<td>6亿</td>	
		</tr>
		<tr>
			<td>法国</td>
			<td>4亿</td>
			<td>欧洲</td>
		</tr>
		<tr>
			<!--colspan表示占据2列，列合并-->
			<td colspan="2">澳大利亚5亿</td>
			<td>澳洲</td>
		</tr>
	</table>

大家可以把以上代码加入body中，去跑跑看看效果，便于理解

div span

div span 都是没有语义的标签，可以把它们理解成容器，div可以防止任何标签的容器，span一般是来存放语义标签的容器

字符实体

大家也知道<a>这是一个超文本标签，但是如果我们想要在p标签中显示<a>这样的内容，如果是直接<p><a></p>,那么肯定是识别不了，html会把<a>当成标签来识别而不是内容，这个时候我们需要使用字符实体。
<p>&lta&gt</p> 这样最终在网页上显示的是<p><a></p>
1. &字母;
2. & lt; <
3. & gt; >
4. & copy; 版权
5. & nbsp; 空格

html的基础已经讲完，接下来会来讲css2.1的样式，如有表达错的请谅解和提出错的点，大家共同进步。

csdn_gyh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端攻城狮---html基础标签

最近对前端特有兴趣索性就学起了前端。话不多说开始新的篇章开发工具对于前端的开发工具目前我选择sublime 加上安装些插件开发如鱼得水如 Emmet jQuery 等等认识html结构什么叫html？它的全拼叫Hyper Text Markup Language(超文本标记语言)本来这就是个标记的语言，但却有超越了它本来的含义，名字取得非常的巧妙。我们先来看看一个...
复制链接

扫一扫

专栏目录