蓝旭工作室讨论班：前端第一讲——HTML基础

最新推荐文章于 2023-08-02 17:27:33 发布

一只大喵喵

最新推荐文章于 2023-08-02 17:27:33 发布

阅读量528

点赞数 2

本文链接：https://blog.csdn.net/Cream_Cicilian/article/details/80143602

版权

一、什么是前端（了解）：
前端对于网站来说，通常是指网站的前台部分，包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。
HTML、CSS、JavaScript这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
HTML：
指的是超文本标记语言 (Hyper Text Markup Language)，超文本标记语言（HyperText Markup Language，简称为HTML）是为网页创建和其它可在网页浏览器中看到的信息设计的一种标记语言。HTML被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。

HTML发展历史：
HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日，W3C推荐标准
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
HTML 5——2014年10月28日，W3C推荐标准 [4] （详见本处参考资料）

HTML和css入门学习方法（仅仅是个人建议）：
①少看书，多敲代码
②遇到问题，先百度，百度看不懂（这种情况经常发生）问学长学姐
③解决了问题，最好可以把问题记录下来，写入博客。推荐csdn，博客园不推荐的原因是大二的时候刘志勇老师会让你们使用博客园写作业

二．准备工作
安装火狐，谷歌；
安装并使用Sublime text 3可以安装插件emmet（安装方法请百度）；

三．创建HTML文档
创建一个文本文件，并将其文件扩展名设置为html
了解HTML文档：
外层结构
元数据
内容
外层结构

<!DOCTYPE html>
<html>
</html>

<!DOCTYPE html>让浏览器明白处理的是HTML文件
是html的开始标签：让浏览器明白自此知道html结束标签，所有的元素内容都应该作为HTML处理。

元数据：
HTML文档的元数据可以用来向浏览器提供文档的一些信息。元数据包含在head元素内。
内容：
文档内容放在body元素中

四．重要的HTML标签（使用频繁）
1.文档标签：<html>、<head>、<title>、<body>
2.文章标签：<h1> - <h6> 、<p>、<span>、
3.链接标签：<a>
4.多媒体标签:<img>、<map>、<area>、<object>、<param>、
5.表格标签： <table>、<thead>、 <tr>、 <td>、 <th>、
6.表单标签：<from>、<input>、<textarea>、<button>、<select>
7.列表标签：<ul>、<ol>、<li>、<dl>、<dt>、<dd>、
8.布局标签：<div>、
9.框架标签：<frame>、<frameset>、<iframe>

五．父元素、子元素、后代元素、兄弟元素

六．块级元素和行级元素
行内元素会在一条直线上排列，都是同一行的，水平方向排列；
块级元素各占据一行，垂直方向排列。
块级元素太多，记住行级元素即可
常用块元素(block element)：

* div -  块级容器 
* form -表单
* table - 表格
* h1 - 大标题 
* h2 - 副标题 
* h3 - 3级标题 
* h4 - 4级标题 
* h5 - 5级标题 
* h6 - 6级标题 
* p - 段落  
* ol - 排序列表
* ul – 无序列表
* li –

常用内联（行内）元素(inline element)：

* a - 锚点（链接）   
* span - 行内文字
* img - 图片  
* input - 输入框  
* select - 项目选择

七．书写注意

1.标签闭合：<p>这是一段话（错误）
可能不会导致出错，但是这是非常不可取的，是必须百分百避免的。
<img> <input>等少部分标签没有闭合标签
2.使用小写的标记：

 <P>Here's an interesting fact about corn. </P>

最好不要这样写，费力气输入大些字母没有任何用处，并且会让代码很难看。
3.添加注释：
快捷键：Ctrl+？
4.代码规范
这里写图片描述
5.文件格式规范

八．推荐网站：
http://www.w3school.com.cn/ w3school在线教程
http://www.imooc.com/ 慕课网
https://blog.csdn.net/ csdn博客
http://www.ycku.com/course/ web飘城俱乐部
九．作业
仿照蓝旭的报名表，设计一个报名表
要求：
使用表格标签和表单标签
这里写图片描述
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这里是标题栏的标题</title>
</head>
<body>
    <h1>这是h1的效果</h1>
    <h2>这是h2的效果</h2>
    <h3>这是h3的效果</h3>
    <h4>这是h4的效果</h4>
    <h5>这是h5的效果</h5>
    <h6>这是h6的效果</h6>
    <p>一段话</p>
    <span >一句话</span>
    <a href="https://www.baidu.com/" target="_blank">谷歌的老婆</a>
    <img src="tupian.jpg">
    <table  border="1" width="400px" height="400px" cellspacing="0">
        <tr>
           <td width="20%">一</td>
           <td width="20%">二</td>
           <td width="20%">三</td>
           <td width="20%">四</td>
           <td width="20%">五</td>
        </tr>
        <tr>
           <td ></td>
           <td >English</td>
           <td >C语言</td>
           <td ></td>
           <td >English</td>
        </tr>
        <tr>
           <td >❤计算机导论</td>
           <td>思修</td>
           <td >线性代数</td>
           <td >计算机导论</td>
           <td >C语言</td>
        </tr>
        <tr>
           <td ></td>
           <td >写作</td>
           <td >❤❤线性代数</td>
           <td >❤❤走进软件</td>
           <td>体育</td>
        </tr>
        <tr>
           <td>大学生职业规划</td>
           <td></td>
           <td></td>
           <td></td>
           <td>❤思修</td>
        </tr>
        <tr>
           <td>高数</td>
           <td>高数</td>
           <td></td>
           <td></td>
           <td>高数</td>
        </tr>      
    </table>
    <table  border="1" width="700px" cellspacing="0">
      <tr height="50px" align="center">
         <td colspan="6">修改简历信息</td>
      </tr>
      <tr height="50px" align="center">
         <td rowspan="7" width="100px">基本<br/>资料</td>
         <td width="60px">姓名</td>
         <td width="100px">-</td>
         <td width="60px">性别</td>
         <td width="100px"  align="center">
            <div>
               <input type="radio"  name="sex"/>男 
            </div>
            <div>   
               <input type="radio" name="sex"/>女
            </div>
         </td>
         <td rowspan="4" width="130px">
            <img src="tupian.jpg" height="100px" width="130px">
         </td>
      </tr>
      <tr height="50px" align="center">
         <td>名族</td>
         <td>-</td>
         <td>籍贯</td>
         <td>-</td>


      </tr>
      <tr height="50px" align="center">
         <td>出生日期</td>
         <td>-</td>
         <td>政治面貌</td>
         <td>
            <select>                 
                <option selected>中共党员</option>
                <option>共青团员</option>
                <option>普通群众</option>
            </select>
         </td>


      </tr>   
      <tr height="50px" align="center">
         <td>学历</td>
         <td>-</td>
         <td>健康状况</td>
         <td>
            <input type="radio"  name="health"/>偏瘦
            <input type="radio"  name="health"/>匀称
            <input type="radio"  name="health"/>肥胖
            <input type="radio"  name="health"/>超重 
         </td>


      </tr>
      <tr height="50px" align="center">
         <td>专业</td>
         <td colspan="4">
            <input type="checkbox" />HTML         
            <input type="checkbox" />CSS
            <input type="checkbox" />JavaScrip
            <input type="checkbox" />Java
            <br/>
            <input type="checkbox" />Jsp         
            <input type="checkbox" />Tomcat
            <input type="checkbox" />Oracle
            <input type="checkbox" />UML
         </td>



      </tr>
      <tr height="50px" align="center">
         <td>通讯地址</td>
         <td colspan="2">-</td>
         <td>邮编</td>
         <td>-</td>


      </tr>
      <tr height="50px" align="center">
         <td>联系电话</td>
         <td colspan="4">-</td>

      </tr>
    </table>




    <form>                                 <!-- 表单 -->
        <input type="text" value="请输入姓名" />
        <input type="password" />
        <input type="file" />
        <input type="number" />
        <textarea >在这里输入你的评价textarea</textarea>
        <input type="reset" />
        <input type="submit" name="biaodan">
        <button>点击我</button>
        <select>                 <!-- 下拉框 -->
            <option>吉林</option>
            <option selected>北京</option>
            <option>山西</option>
        </select>
        <input type="checkbox" />苹果            <!-- 多选框 -->
        <input type="checkbox" />香蕉
        <input type="checkbox" />梨
        <input type="radio" name="subject" />数学     <!-- 单选框 -->
        <input type="radio"  name="subject" />语文
        <input type="radio"  name="subject" />英语
    </form>

    <ul>                <!-- 无序列表 -->
      <li>Coffee</li> 
      <li>Milk</li>
      <li>orange</li> 
    </ul>


    <ol>                <!-- 有序列表 -->
      <li>Coffee</li> 
      <li>Milk</li> 
      <li>orange</li> 
    </ol>

    <div style="width: 400px;height: 400px;background-color: pink;"></div>

</body>
</html>

一只大喵喵

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
蓝旭工作室讨论班：前端第一讲——HTML基础

一、什么是前端（了解）：前端对于网站来说，通常是指网站的前台部分，包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。 HTML、CSS、JavaScript这三个是前端开发中最基本也是最必须的...
复制链接

扫一扫