目录

开发前端网页方案：
HTML(骨)：文字+简单图片,简单排版、大板块设计设计
CSS(皮)：表示样式,细化每一个板块中的内容，美化网页
JavaScript(魂)：网页交互，完成逻辑表达

CSS和JS专业版IDEA才支持，vscode默认支持前端的代码（HTML 、CSS、JS）

1.HTML标签结构

HTML 代码是由 "标签（<>）" 构成，如hello

• 标签名 (body) 放到 < > 中，标签成对出现. 为开始标签, 为结束标签.
• 少数标签只有开始标签, 称为 "单标签".
• 开始标签和结束标签之间, 写的是标签的内容. (hello)
• 开始标签中可能会带有 "属性"。 id 属性相当于给这个标签设置了一个唯一的标识符，如：    hello

1.1HTML 文件基本结构

• html 标签是整个 html 文件的根标签(最顶层标签)
• head 标签中写页面的属性.
• body 标签中写的是页面上显示的内容
• title 标签中写的是页面的标题.

    
        
    
    
        hello world
    

标签之间的结构关系, 构成了一个文档对象模型，（Document Object Mode， DOM 树）

在 IDEA 中创建文件 html文件 , 直接输入 ! , 按 tab 键, 自动生成代码的主体框架，如下：

• 称为 DTD (文档类型定义), 描述当前文件是一个 HTML5 的文件.
•   lang 属性：表示当前页面是一个 "英语页面".
• 描述页面的字符编码方式. 

1.2常见标签

注释标签    注释标签不能嵌套

标题标签  

段落标签

  

换行标签
(单标签)

格式化标签(加粗strong(b)、下划线ins(u)、倾斜em(i)、删除线del(s))  可用CSS实现

超链接标签

（1）注释标签------>ctrl + /： 快速注释/取消注释.

注释内容不会在网页中显示

(2)标题标签

h1-h6:数字越大, 则字体越小.

    
    
    
    
      


    hello world
    
hello
    
hello
    
hello
    
hello
    
hello
    
hello

  

（3）段落标签: p

    
    
    
    
      


    hello world
    
hello
    
第一段Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat numquam omnis iusto! Modi, eum animi nemo nesciunt corporis voluptatum! Soluta quae vero cumque. Deleniti illum minima quos nostrum corrupti numquam?
    
第二段Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, deserunt. Eligendi, quo? Rem, consequatur et. Eos accusantium, ipsa ipsam praesentium enim consequuntur dolore. Earum quod quas quam, necessitatibus est praesentium.

  

（4）换行标签

• 格式化标签
• 加粗: strong 标签 和 b 标签
• 倾斜: em 标签 和 i 标签
• 删除线: del 标签 和 s 标签
• 下划线: ins 标签 和 u 标签

strong 加粗
b 加粗
倾斜
倾斜
删除线
删除线
下划线
下划线

（5）图片标签

img 标签必须带有 src 属性. 表示图片的路径：

img 标签的其他属性：

• alt: 替换文本. 当内容不能正确显示的时候, 会显示一个替换的文字.
• title: 提示文本. 鼠标放到图片上 的提示文本
• width/height: 控制宽、高， 一般改一个，另外一个会等比例缩放. 否则图片失衡.
• border: 边框, 宽度的像素. 一般使用 CSS设定.

网络路径：形如http://或https://这样的URL

注意！！！
 1. 属性可以有多个, 不能写到标签之前
 2. 属性之间用空格分割, 可以是多个空格, 也可以是换行.                                                                 3. 属性之间不分先后顺序
 4. 属性使用 "键值对" 的格式来表示.

（6）超链接标签

• href: 表示点击后会跳转到哪个页面.
• target: 打开方式. 默认是替换，若 target=“blank”则用新的标签页打开链接页面.

 
百度超链接文本
超链接文本

空链接：使用 # 在 href 中占位.

空链接

下载链接：href 对应的路径是一个文件. (可以使用 zip 文件）

下载文件

网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中

锚点链接: 可以快速定位到页面中的某个位置

第一集
第二集
第三集

第一集剧情 

第一集剧情 

...


第二集剧情 

第二集剧情 

...


第三集剧情 

第三集剧情 

1.3表格标签

• table 标签: 表示整个表格
• tr: 表示表格的一行
• td: 表示一个单元格
• th: 表示表头单元格. 会居中加粗
• thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
• tbody: 表格得到主体区域.

table 包含 tr , tr 包含 td 或者 th.

able 标签属：

• align ：表格相对于周围元素的对齐方式. align="center" (不是内部元素的对齐方式)
• border：边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框.
• cellpadding ：内容距离边框的距离, 默认 1 像素
• cellspacing： 单元格之间的空隙. 默认为 2像素,0时单元格之间不会有空隙
• width / height：设置尺寸.

style标签写CSS内容，   text-align: center;控制文字内容居中对齐

    

        
姓名
        
性别
        
年龄
    
    

        
张三
        
男
        
10
    
    

        
李四
        
女
        
11
    

合并单元格：
跨行合并: rowspan="n"
跨列合并: colspan="n"

    
        王五
        男
    

 1.4列表标签

• 无序列表ul （unordered list）整个无序列表和 li(list item)列表项，一个列表包含多个表项（并列关系）
• 有序列表 ol 和li（按照123标号）
• 自定义列表dl (总标签)、dt (小标题) 、dd (标题里的内容) 

有序列表

    
 吃饭
    
 睡觉
    
 追剧
    
 学习


无序列表

    
 吃饭
    
 睡觉
    
 追剧
    
 学习

自定义列表

    
日常活动
    
吃饭
    
睡觉
    
学习

                                                    

 1.5表单标签

•  表单域: 包含表单元素的区域. 重点是 form 标签.
• 表单控件: 输入框, 提交按钮等. 重点是 input 标签.

账户：
 


密码：
 


性别:
男
女  


爱好:
 吃饭  睡觉 
打游戏 



  



    
    
    



    
    
    
    


    

1.6label 标签

搭配 input 使用. 点击 label 也能选中对应的单选/复选框

• for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应

男 

女 

未知 

1.7select标签（下拉框）

•   option 中定义 selected="selected" 表示默认选中，若无selected="selected"，则默认选中第一个城市

    北京
    上海
    广州
    深圳
    重庆

1.8textarea 标签

多行编辑框，指定行列：

上述的所有标签均是语义标签

1.9无语义标签: div & span

 div 标签, division 的缩写, 含义是 分割，div 是独占一行的, 是一个大盒子.
span 标签, 含义是跨度， span 不独占一行, 是一个小盒子
用于网页布局  DIV 标签称为区隔标记。作用:设定字、画、表格等的摆放位置

    咬人猫
    咬人猫
    咬人猫


    兔总裁
    兔总裁
    兔总裁


    阿叶君
    阿叶君
    阿叶君

 2 制作简历页面

 3.填写简历信息页面

    
    
    
    


    
请填写简历信息
    
    

        

            
姓名
            

        

        

            
性别
            

                 
                  男
                 
                 女
            
        

        

            
出生日期
            

                
                    --请选择年份--
                    1998
                
                
                    --请选择月份--
                    1
                    2 
                
                
                    --请选择日期--
                    1
                    2 
                
            
        

        

            
就读学校
            

            
            
        

        

            
应聘岗位
            

            
            前端开发
            
            后端开发
            
            测试开发
            
            运维开发
            
        

        

            
掌握的技能
            

        

        

            
项目经历
            

        

        

            

            

            我已仔细阅读过公司的招聘要求
        

4.HTML特殊字符

空格:  
小于号: <
大于号: >
按位与: &

HTML 只是描述了页面的骨架结构.详细的页面布局美化还需要使用CSS