3.9 前端

HTML基础知识

一、HTML的语法

1. 双标签
2. 单标签

二、常见的标签使用

1. h1~h6 标题字体

   默认样式：字体越来越小，加粗效果越来越弱。
   h1一般用于网页中最重要的部分（logo部分）

   	<h1>我是H1标签</h1>
   	<h2>我是H2标签</h2>
   	<h3>我是H3标签</h3>
   	<h4>我是H4标签</h4>
   	<h5>我是H5标签</h5>
   	<h6>我是H6标签</h6>
   

   

2. p 段落标签

   默认样式：独占一行，上下间距

   <p>我是段落标签</p>
   

3. i/em b/strong

   `<i>倾斜</i>   <em>倾斜</em>`
   //em标签的倾斜效果比i标签的稍微强一些，但是在浏览器界面无太大差别
   
   <b>加粗</b>   <strong></strong>
   //同上，strong标签的倾斜效果比b标签的稍微强一些
   

4. 一些其他的标签

   <u>下划线标签</u>
   <br> 换行
   <hr> 分割线
   &nbsp; 转义字符  空白符
   

5. 列表标签

   	// 无序列表
   	<ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
      </ul>
   

   

   	//有序列表
   	 <ol>
          <li>列表1</li>
          <li>列表2</li>
          <li>列表3</li>
     	 </ol>
   

   

   //自定义列表
   	<dl>
          <dt></dt>
          <dd></dd>
      </dl>
   

6. 超链接标签 a 标签

   //a标签一般写法
   <a href="">我是a标签</a>
   //href属性用于指定超链接目标的URL
   //title属性包含a标签的关键词
   //target属性表示打开窗口的方式 
   <a target="_blank">以打开新的窗口方式跳转</a> 
   	
   

   

7. 图片标签img

    <img>
   	属性：
   		src = "url"//图片地址
   		alt = ''  //指带有指定替代文件的图像
   		title = '文本提示'
   		width ='' //设置图片的宽度
   		height = '' //设置图片的高度
   		border = '' //给图片增加一层边框
   

   图片title和alt区别：

       alt:
           1、alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户，以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候，图片的替换文字。
           2、alt属性值得长度必须少于100个英文字符
           3、alt属性是img标签的必须属性，如果没有特别意义的图片，可以写alt=""
           4、alt属性是搜索引擎判断图片与文字是否相关的重要依据，alt属性添加到img主要的目的才是为了SEO
   
       title:
           1、title属性并不是必须的。
           2、title属性规定元素的额外信息，有视觉效果，当鼠标放到文字或是图片上时有文字显示。
           3、title属性并不作为搜索引擎抓取图片的参考，更多倾向于用户体验的考虑。
   

8. 相对路径

   同级找同级
   	目标文件的名字
   上级找下级
   	目标文件的文件夹/目标文件的名字
   下级找上级 
   	../目标文件的名字（常见的路径写法）
   

9. 表格

   <table>                 //表单标签
   	<tr>				//行
   		<td></td>		//单元格
   		<td></td>
   	</tr>
   	<tr>
   		<td></td>
   		<td></td>
       </tr>
   </table>
   <!--
   常见的属性
   	width 宽度 height 高度 border 表格边框
   	cellspacing 调整边框距离  cellpadding 调整文字跟表格的距离
   	bordercolor 改变边框颜色  bgcolor 改变背景颜色
   对齐方式
   	水平 align:
   			left	左	
   			right	右
   			center	居中
   	垂直 valign:
   			top		顶部
   			bottom	底部
   			middle	中间
   单元格合并
   	列合并	colspan=""	
   	行合并	rowspan=""
   
   -->
   

10. 表单

    //表单的作用是用来收集用户信息的，常见的方法(method)是get/post
    //表单的表达式
    <form action="" name=" " method="POST/GET">
    
    </form>
    //action 表单提交的地址
    //name 名字
    //method 提交方法
    <!-- 
    input 表单控件
    控件类型：
    	text		输入框	value/placeholder 提示文本
    	password	密码
    	radio		单选
    	checkbox	多选  checked 默认选择/disabled 禁止选择
    	submit		提交
    	reset		重置
    	button		空按钮
    	
    -- >