码迷,mamicode.com
首页 > Web开发 > 详细

1 HTML概念

时间:2019-06-06 18:55:50      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:绝对路径   href   blog   重命名   常用   属性   content   文本   包含   

实现技术
      html+css+js
      html------结构(骨骼)
      css-------表现(美化师)
      javascript-------行为 

网页编码
	字符集utf-8,支持所有的国家语言
    bgk国标码,仅在中国用gbk就没问题

html-----负责页面的结构
	HTML俗称网页,网站。html就是一个文档
	学习html主要学习html的标签
	超文本标记语言 
      Hyper Text Markup Language(超文本标记语言) 
	  标记语言的意思是:标签语言
	  
	
 
html结构            	
	从html页面的结构来总结HTML
	<!DOCTYPE html> //第一行是DTD(文档类型声明)告知浏览器当前html文件是什么版本的html
	<html lang="en">//html标签用英文表示,默认就是这个值,可不写
		<head>
			<meta charset="utf-8">//html文件使用的编码
			<title>Document</title>
		</head>
		<body>
			<!-- 网页真正的内容放body标签内部-->
		</body>

头部
	<head>
		html头部:写html文档的信息
		<meta name="description" content="世界上最大的电商平台">//html文档的作用说明
		<meta charset="utf-8">//htm字符集
		<meta name="keywords" content="电器 数码 衣服">//用户可以根据这些关键字搜索到该网页,作用很小

	头部有哪些标签
		<title> 窗口的标题
		<base> 为所有链接提供默认的地址和目标
		<link> 指定css文件
		<script> js脚本,增加交互
		<style> 样式表,给一个或一些元素增加样式
		<meta> 标签提供关于 HTML 文档的元数据,为了说明更多的html信息。
			   元数据不会显示在页面上,但是对于机器是可读的。
			   典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
			   <meta> 标签始终位于 head 元素中。
			     元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
身体				 
	<body>
		html主体	
		标签从使用的角度 分为容器级标签和文本级标签		
		<p>	p是一个文本级标签,p里面只能放文字、图片、表单元素,不能放其他东西,。		
				 容器级标签 里面啥都可以装 甚至可以装自己
							<div>
							   <div></div>
							</div> 
				 文本级标签  放文字、图片、表单元素或其他文本级标签
						 <p><span></span></p>  
						 
		<img src="img/liutao.jpg" alt="替换文本,当图片加载失败后提示的文案" title="鼠标悬停说明">
		 	src属性 表示图片位于什么位置
		 	绝对路径-----带盘符的路径
		 	相对路径: 从当前的网页文件出发
		 
		<a></a>   
			<a href="http://www.baidu.com">百度</a>
				href:跳转页面的绝对地址 相对路径
			链接:
				为什么:
					访问到外部文件或者锚到内部文件的某个地方
				超链接可以是一个字,一个词,或者一组词,也可以是一幅图像
				连接的目标可以是当前页面,也可以是新窗口,也可以是iframe

				其他常用的属性
					title属性  鼠标悬停的时候提示文字
					target属性  设置是否在新窗口中打开连接 

				超链接的应用 
					* 页面内的锚点
						在某个位置设置锚点 <a name="demo"></a>
						在需要跳转到锚点的位置上设置
							<a href="#demo">跳转</a> 
					* 跨页面的锚点
					
列表
		无序
		   <ul>	
			   <li></li>	
		   </ul>	
		有序	
		   <ol>	
			   <li></li>	
		   </ol>	
		自定义 	
			 <dl>	
				  <dt></dt>	
				  <dd></dd>	
			 </dl> 	
			 
		列表属性允许你改变列表项标志形状,或者将图像作为列表项标志。	
		列表形状
			ul {list-style-type : square}//项目标志的形状修改
		列表项图像
			ul li {list-style-image : url(xxx.gif)}////项目标志设置为背景图	
		列表标志位置
			list-style-position:inside//位置往里面挪一点		 
表单
		<form>
			  ...表单元素	
		</form> 	 
			选择字也能选中单元框,就要用到label	
			用for指向input的id或者直接用label包含标签	
								
								
windows快捷键
	 windows+d 返回桌面
   	 windows+e 打开本地磁盘
  	 F2 重命名
   	 F5 刷新
								
注释 <!--注释-->
        <!--
             ...
        -->
	
字符实体(转义字符)
       &字母;
 
       <  <
       >  >
       © 版权
         空格
	 
visual studio codeIDE 快速的生成html结构,需要用emmet,下载安装如下三个
	https://blog.csdn.net/sunshinegirl_7/article/details/49802579
	https://jingyan.baidu.com/article/afd8f4de64d4cd34e286e9aa.html
	https://www.cnblogs.com/engeng/p/5957389.html

  

1 HTML概念

标签:绝对路径   href   blog   重命名   常用   属性   content   文本   包含   

原文地址:https://www.cnblogs.com/xuanjian-91/p/10986264.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!