html和css基础

一、 HTML语法介绍

1. 标签

标签也称为标记或元素,用于在网页中标记内容

  1. 语法:标签使用< >为标志,标签名不区分大小写(个人习惯为小写)

  2. 分类:

    • 双标签:成对出现,包含开始标签和结束标签。例:
    <html>html>
    
    • 单标签:只有开始标签,没有结束标签,可以手动添加“/”表示闭合。例:
    <br>
    <br/>
    
  3. 标签属性:

    • 标签属性书写在开始标签中,使用空格与标签名隔开,用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成,属性值使用双引号表示。例:
     
    
    • 同一个标签中可以添加若干组标签属性,使用空格间隔。例:
     <img src="lily.jpg" width="200px" height="200px">
    

二、常用标签介绍

1. 基本结构解析(主体)


 

<html> 
   
   <head>
       
       <title>网页标题title>
       
       <meta charset="utf-8"> 
   head>
   
   <body> 
       网页主体内容
   body>
html>

2. body中常用标签

  • 文本标签

    • 标题标签:自带加粗效果,从h1到h6字体大小逐级递减
     <h1>一级标题h1>
     <h2>二级标题h2>
     <h3>三级标题h3>
     <h4>四级标题h4>
     <h5>五级标题h5>
     <h6>六级标题h6>
    
    • 段落标签:
     <p>段落文本p>
    
    • 普通文本标签:
     <span>行分区标签,用于对特殊文本特殊处理span>
     <b>加粗标签b>
     <strong>强调标签,效果同b标签strong>
     <label>普通文本标签,常与表单控件结合实现文本与控件的绑定label>
     <i>斜体标签i>
     <u>删除线标签u>
    
    • 格式标签:
      浏览器会忽略代码中的换行和空格,只显示为一个空格。想要实现页面中的换行,需要借助于换行标签。
     <br>
    
    • 水平线标签,在页面中插入一条水平分割线
     <hr>
    
    
    • 字符实体:
      某些情况下,浏览器会将一些特殊字符按照HTML的方式解析,影响显示结果。此时需要将这类字符转换为其他的形式书写
      例:
     使用 < 在页面中呈现 "<"
     使用 > 在页面中呈现 ">"
     使用   在页面中呈现一个空格
     使用 © 在页面中呈现版权符号"©"
     使用 ¥ 在页面中呈现人民币符号"¥"
    
    
  • 容器标签
    常用于页面结构划分,结合CSS实现网页布局

       <div id="top">页面顶部区域div>
       <div id="main">页面主体区域div>
       <div id="bottom">页面底部区域div>
    
    
  • 图片与超链接标签

    • 图片标签 :用于在网页中插入一张图片。

      1. 属性 src 用于给出图片的URL,必填。
      2. 属性 width/height 用于设置图片尺寸,取像素值,默认按照图片的原始尺寸显示。
      3. 属性 title 用于设置图片标题,鼠标悬停在图片上时显示
      4. 属性 alt 用于设置图片加载失败后的提示文本

      语法:

    <img src="" width="" height="" title="" alt="">
    
    
    • 超链接标签:用户可以点击超链接实现跳转至其他页面
      1. 属性 href 用于设置目标文件的URL,必填。
      2. 属性 target用于设置目标文件的打开方式,默认在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank")
    <a href="http://www.taobao.com" target="_self">淘宝a>
    <a href="http://www.baidu.com" target="_blank">百度a>
    
    

3. 常用结构标签

  • 列表标签

    • 无序列表(ordered list)
      默认使用阿拉伯数字标识每条数据
    <ol>
    	<li>list item 列表项li> 
    	<li>list item 列表项li>
    	<li>list item 列表项li>
    ol>
    
    
    • 有序列表(unordered list)
      默认使用实心圆点标识列表项
     <ul>
      	<li>list item 列表项li> 
      	<li>list item 列表项li>
      	<li>list item 列表项li>
      ul>
    
    
    • 列表嵌套
      在已有列表中嵌套添加另一个列表,常见于下拉菜单
    <ol>
    	<li>
    		西游记
    		<ul>
    			<li>孙悟空li>
    			<li>孙悟空li>
    			<li>孙悟空li>
    		ul>
    	li>
    ol>
    
    

    表格标签

    • 表格由行和单元格组成,常用于直接的数据展示或辅助排版,基本结构如下
     
    <table>
    	 
    	<tr>
    		
    		<td>姓名td>
    		<td>年龄td>
    		<td>班级td>
    	tr>
    	<tr>
    		<td>小白td>
    		<td>18td>
    		<td>001td>
    	tr>
    	<tr>
    		<td>迪丽热巴td>
    		<td>20td>
    		<td>002td>
    	tr>
    table>
    
    
    • 单元格合并:用于调整表格结构,分为跨行合并和跨列合并,合并之后仍然保证表格结构完整
    <table border="1px" width="300px" height="300px" align="center">
    	<tr>
    		<td colspan="3">星期1td>
    		
    		<td>星期1td>
    		<td>星期1td>
    	tr>
    	<tr>
    		<td rowspan="2">星期1td>
    		<td>星期1td>
    		<td>星期1td>
    		<td>星期1td>
    		<td>星期1td>
    	tr>
    	<tr>
    		
    		<td>星期1td>
    		<td>星期1td>
    		<td>星期1td>
    		<td>星期1td>
    	tr>
    table>
    
    
    • 行分组标签:可以将表格中的若干行划分为一组,表示表头,表尾及表格主体,默认在表格中创建的所有行都会被自动加入表格主体中
    <table border="1px" width="300px" height="300px">
    	
    	<thead>
    		<tr>
    			
    			<th>姓名th>
    			<th>年龄th>
    			<th>班级th>
    		tr>
    	thead>
    	
    	<tfoot>
    		<tr>
    			<td colspan="3">小计td>
    		tr>
    	tfoot>
    	
    	<tbody>
    		<tr>
    			<td>小红td>
    			<td>18td>
    			<td>001td>
    		tr>
    		<tr>
    			<td>小红td>
    			<td>18td>
    			<td>001td>
    		tr>
    		<tr>
    			<td>小红td>
    			<td>18td>
    			<td>001td>
    		tr>
    	tbody>
    table>
    
    

三、CSS中的span和div

div就相当于容器可以放东西

span属于文本级的标签

  • div

    • div在浏览器中,默认是不会增加任何的效果改变的,但是语义变了,div中的所有元素是一个小区域。

    • div标签是一个容器级标签,里面什么都能放,甚至可以放div自己

  • span

    • span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
    • span里面是放置小元素的,div里面放置大东西的:
<div>
    <h3>四大名著h3>
    <ul>
        <li>西游记li>
        <li>红楼梦li>
        <li>水浒传li>
        <li>三国演义li>
    ul>
div>
<p>
    111111111111111
    <span>
        <a href='http://www.baidu.com'>百度a>
        <a href='http://www.taobao.com'>淘宝span>
    
p>

你可能感兴趣的:(html和css基础)