企业官网建设流程全解析

深圳集团网站建设案例,栏目手机版 企业网站,铁岭网站建设,如何提高网站的收录HTML网页开发基础一、HTML文档基本结构1.1 文档类型声明!DOCTYPE html !-- HTML5文档声明 --1.2 基本骨架html headmeta charsetutf-8 !-- 设置中文编码 --title页面标题/title !-- 浏览器…HTML网页开发基础一、HTML文档基本结构1.1 文档类型声明!DOCTYPE html !-- HTML5文档声明 --1.2 基本骨架html head meta charsetutf-8 !-- 设置中文编码 -- title页面标题/title !-- 浏览器标签页显示 -- /head body 网页内容区域 /body /html二、常用HTML标签2.1 标题标签h1一级标题/h1 !-- 最大最重要 -- h2二级标题/h2 h3三级标题/h3 h4四级标题/h4 h5五级标题/h5 h6六级标题/h6 !-- 最小 --特性自动加粗、换行、字号递减2.2 段落标签p这是一个段落会自动换行/p p这是另一个段落与前一段有间距/p2.3 水平线标签hr !-- 单标签创建水平分割线 --2.4 注释!-- 这是注释不会在网页中显示 --三、元素属性3.1 基本语法标签 属性1值1 属性2值2内容/标签3.2 常用属性align - 对齐方式h1 alignleft左对齐/h1 h2 aligncenter居中对齐/h2 h3 alignright右对齐/h3bgcolor - 背景颜色body bgcolor#ff0000 !-- 红色背景 -- body bgcolorred !-- 颜色名称 -- body bgcolorrgb(255,0,0) !-- RGB格式 --四、文本格式化标签标签描述示例b加粗文本b加粗文字/bi斜体文本i斜体文字/iu下划线文本u下划线文字/udel删除线文本del删除文字/delsmall小号字体small小字/smallsub下标Hsub2/subOsup上标100msup2/supmark高亮标记mark重点内容/mark4.1 化学公式示例Hsub2/subSOsub4/sub !-- 硫酸 -- E mcsup2/sup !-- 质能方程 --4.2 换行标签第一行br第二行brbr两个换行后的第三行五、超链接5.1 基本语法a href目标地址链接文本/a5.2 链接类型外部网站链接a hrefhttp://www.baidu.com百度/a本地文件链接a hrefindex.html返回首页/a图片链接a hrefhttp://www.taobao.com img srclogo.png alt淘宝 /a邮件链接a hrefmailto:contactexample.com联系我们/a5.3 target属性a hrefhttp://www.baidu.com target_self当前窗口打开/a a hrefhttp://www.baidu.com target_blank新窗口打开/a六、图像标签6.1 基本语法img src图片路径 alt替代文本6.2 常用属性属性描述示例src图片来源srcphoto.jpgalt替代文本alt风景图片width宽度(px/%)width200或width50%height高度(px)height150img srcavatar.jpg alt用户头像 width100 height100 img srcbanner.jpg alt横幅广告 width100%注意高度百分比通常无效建议使用固定像素值七、列表7.1 无序列表ul typedisc !-- 默认值实心圆点 -- li列表项1/li li列表项2/li li列表项3/li /ultype属性值disc● 实心圆点默认circle○ 空心圆圈square■ 实心方块7.2 有序列表ol type1 start1 li第一步/li li第二步/li li第三步/li /oltype属性值1数字1,2,3...默认A大写字母A,B,C...a小写字母a,b,c...I大写罗马数字I,II,III...i小写罗马数字i,ii,iii...八、表格8.1 基本表格结构table border1 tr th表头1/th th表头2/th th表头3/th /tr tr td数据1-1/td td数据1-2/td td数据1-3/td /tr tr td数据2-1/td td数据2-2/td td数据2-3/td /tr /table8.2 单元格合并横向合并 (colspan)tr th colspan3学生成绩表/th /tr纵向合并 (rowspan)tr td rowspan2张三/td td语文90/td /tr tr td数学85/td /tr8.3 完整表格示例table border1 tr th colspan3学生信息表/th /tr tr th姓名/th th科目/th th成绩/th /tr tr td rowspan2李四/td td语文/td td88/td /tr tr td数学/td td92/td /tr /table九、HTML实体字符实体显示描述nbsp;不间断空格lt;小于号gt;大于号amp;和号quot;双引号copy;©版权符号reg;®注册商标p10 gt; 5 显示为 10 5/p p版权所有 copy; 2025/p十、表单10.1 表单基本结构form action提交地址 methodget !-- 表单内容 -- /formmethod属性GET数据附加在URL后适合少量数据http://example.com/login?username张三password123POST数据放在请求体中适合大量或敏感数据10.2 input输入框文本输入框input typetext nameusername placeholder请输入用户名 required密码框input typepassword namepassword placeholder请输入密码 required提交按钮input typesubmit value登录重置按钮input typereset value清空10.3 input常用属性属性描述示例type输入类型typetextname参数名称nameusernamevalue默认值valueadminplaceholder提示文本placeholder请输入...required必填项requiredmaxlength最大长度maxlength20readonly只读readonlydisabled禁用disabled10.4 其他输入类型!-- 邮箱验证 -- input typeemail nameemail placeholder请输入邮箱 !-- 普通按钮 -- input typebutton value点击我 οnclickalert(你好!) !-- 图片按钮 -- input typeimage srcsubmit.png alt提交 !-- 隐藏字段 -- input typehidden nameuserid value100110.5 完整表单示例form actionlogin.php methodpost p label用户名/label input typetext nameusername placeholder请输入用户名 required maxlength20 /p p label密码/label input typepassword namepassword placeholder请输入密码 required /p p label邮箱/label input typeemail nameemail placeholderexampledomain.com /p p input typesubmit value登录 input typereset value重置 input typebutton value帮助 οnclickshowHelp() /p input typehidden nametoken valueabc123 /form十一、最佳实践建议语义化标签合理使用标签表达内容含义编码统一始终使用UTF-8编码属性引号属性值用双引号包裹图片优化添加alt属性设置合适尺寸表单验证前端验证结合后端验证代码缩进保持一致的缩进格式注释清晰复杂结构添加必要注释十二、现代替代建议CSS代替部分HTML属性使用CSS设置颜色、对齐等样式!-- 旧方式 -- body bgcolorred h1 aligncenter标题/h1 !-- 新方式 -- body h1 styletext-align: center;标题/h1HTML5新增输入类型input typetel namephone !-- 电话号码 -- input typenumber nameage !-- 数字 -- input typedate namebirthday !-- 日期 -- input typecolor namefavcolor!-- 颜色选择 --使用label元素label forusername用户名/label input typetext idusername nameusername